screencasting.com by Aaron Francis

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="csrf-token" content="5vc9grXvTCJnpS9vpKPklGKGDbjwhtZIvHtAzRQh" /> <title>screencasting.com by Aaron Francis</title> <meta name="title" content="screencasting.com by Aaron Francis" /> <meta name="description" content="screencasting.com educates developers and aspiring teachers to create high-quality screencasts faster than ever. Plan, record, and edit screencasts that truly shine." /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://screencasting.com" /> <meta property="og:title" content="screencasting.com by Aaron Francis" /> <meta property="og:description" content="screencasting.com educates developers and aspiring teachers to create high-quality screencasts faster than ever. Plan, record, and edit screencasts that truly shine." /> <meta property="og:image" content="https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/meta2.png" /> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:url" content="https://screencasting.com" /> <meta property="twitter:title" content="screencasting.com by Aaron Francis" /> <meta property="twitter:description" content="screencasting.com educates developers and aspiring teachers to create high-quality screencasts faster than ever. Plan, record, and edit screencasts that truly shine." /> <meta property="twitter:image" content="https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/meta2.png" /> <link rel="apple-touch-icon" sizes="180x180" href="https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/favicon-16x16.png" /> <link rel="mask-icon" href="https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/safari-pinned-tab.svg" color="#5bbad5" /> <meta name="msapplication-TileColor" content="#da532c" /> <meta name="theme-color" content="#ffffff" /> <script src="https://cdn.usefathom.com/script.js" data-site="FWDQPOFA" defer></script> <script src="https://kit.fontawesome.com/d88515d631.js" crossorigin="anonymous" defer></script> <link rel="preload" as="style" href="https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/build/assets/app-7c98b327.css" /><link rel="preload" as="style" href="https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/build/assets/app-6f214b75.css" /><link rel="modulepreload" href="https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/build/assets/app-58728e00.js" /><link rel="stylesheet" href="https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/build/assets/app-7c98b327.css" /><link rel="stylesheet" href="https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/build/assets/app-6f214b75.css" /><script type="module" src="https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/build/assets/app-58728e00.js"></script> <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script> <script> window.lemonSqueezyAffiliateConfig = { store: 'screencasting', }; </script> <script src="https://lmsqueezy.com/affiliate.js" defer></script> <style >[wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid], [wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short], [wire\:loading\.delay\.long], [wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest] {display:none;}[wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {animation-duration: 50000s;animation-name: livewireautofill;}@keyframes livewireautofill { from {} }</style> </head> <body> <div x-data="{ scrollToId(href) { const el = document.getElementById(href.split('#')[1]); if (el) { window.scroll({ top: el.offsetTop, behavior: 'smooth' }); } else { window.location.assign(href); } }, }" class="min-h-screen bg-white font-sans text-black antialiased" > <header x-data="{ navIsOpen: false }" class="bg-black flex h-[116px] w-full items-center lg:h-[140px]" > <div class="mx-auto flex w-full max-w-screen-2xl items-center justify-between gap-8 px-6 xl:px-16"> <div class="xl:flex-1"> <a href="/" class="inline-flex items-center gap-4 rounded-sm text-xl font-medium text-white transition hover:text-white/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black sm:text-[22px]" > <svg class="w-10 sm:w-12" viewBox="0 0 41 26" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M28.996 20.312a.588.588 0 0 1-.256-.485v-4.712c0-.472.529-.752.92-.486l5.346 3.649a.882.882 0 0 0 1.38-.729V7.647a.882.882 0 0 0-1.38-.729l-5.347 3.648a.588.588 0 0 1-.92-.486V7.435c0-.902-.73-1.633-1.632-1.633H6.609c-.902 0-1.633.731-1.633 1.633v1.086c0 .902.73 1.633 1.633 1.633h14.566c.904 0 1.728.239 2.473.717a5.23 5.23 0 0 1 1.829 1.935c.474.788.711 1.672.711 2.652v5.039c0 .955-.237 1.84-.711 2.651a5.228 5.228 0 0 1-1.829 1.935 4.486 4.486 0 0 1-2.473.717H1.72A1.72 1.72 0 0 1 0 24.08v-2.367c0-.937.759-1.695 1.694-1.695h17.544c.902 0 1.633-.73 1.633-1.633v-1.08c0-.903-.731-1.634-1.633-1.634H5.013a4.654 4.654 0 0 1-2.506-.716 5.312 5.312 0 0 1-1.83-1.9A5.437 5.437 0 0 1 0 10.368V5.303c0-.98.226-1.863.678-2.651A5.23 5.23 0 0 1 2.507.717 4.654 4.654 0 0 1 5.013 0h22.633c.903 0 1.727.239 2.472.717a5.23 5.23 0 0 1 1.829 1.935c.118.196.221.398.31.606l4.007-2.74c1.952-1.334 4.6.063 4.6 2.428v19.909c0 2.364-2.648 3.761-4.6 2.427l-7.268-4.97Z" fill="#fff" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M28.996 20.312a.588.588 0 0 1-.256-.485v-4.712c0-.472.529-.752.92-.486l5.346 3.649a.882.882 0 0 0 1.38-.729V7.647a.882.882 0 0 0-1.38-.729l-5.347 3.648a.588.588 0 0 1-.92-.486V7.435c0-.902-.73-1.633-1.632-1.633H6.609c-.902 0-1.633.731-1.633 1.633v1.086c0 .902.73 1.633 1.633 1.633h14.566c.904 0 1.728.239 2.473.717a5.23 5.23 0 0 1 1.829 1.935c.474.788.711 1.672.711 2.652v5.039c0 .955-.237 1.84-.711 2.651a5.228 5.228 0 0 1-1.829 1.935 4.486 4.486 0 0 1-2.473.717H1.72A1.72 1.72 0 0 1 0 24.08v-2.367c0-.937.759-1.695 1.694-1.695h17.544c.902 0 1.633-.73 1.633-1.633v-1.08c0-.903-.731-1.634-1.633-1.634H5.013a4.654 4.654 0 0 1-2.506-.716 5.312 5.312 0 0 1-1.83-1.9A5.437 5.437 0 0 1 0 10.368V5.303c0-.98.226-1.863.678-2.651A5.23 5.23 0 0 1 2.507.717 4.654 4.654 0 0 1 5.013 0h22.633c.903 0 1.727.239 2.472.717a5.23 5.23 0 0 1 1.829 1.935c.118.196.221.398.31.606l4.007-2.74c1.952-1.334 4.6.063 4.6 2.428v19.909c0 2.364-2.648 3.761-4.6 2.427l-7.268-4.97Z" fill="url(#paint0_linear_309_404)" /> <defs> <linearGradient id="paint0_linear_309_404" x1="-8.048" y1="14.184" x2="43.982" y2="14.184" gradientUnits="userSpaceOnUse" > <stop stop-color="#FF408B" /> <stop offset="1" stop-color="#FF714E" /> </linearGradient> </defs> </svg> <span>screencasting.com</span> </a> </div> <nav class="hidden gap-4 lg:flex lg:items-center lg:justify-center xl:gap-10"> <a href="/#intro" x-on:click.prevent="scrollToId($el.href)" class="rounded-sm text-xl font-medium text-white transition hover:text-white/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black xl:text-xl" > Intro </a> <a href="/#preview" x-on:click.prevent="scrollToId($el.href)" class="rounded-sm text-xl font-medium text-white transition hover:text-white/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black xl:text-xl" > <span class="hidden xl:inline">Course</span> Preview </a> <a href="/#testimonials" x-on:click.prevent="scrollToId($el.href)" class="rounded-sm text-xl font-medium text-white transition hover:text-white/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black xl:text-xl" > Testimonials </a> <a href="/#pricing" x-on:click.prevent="scrollToId($el.href)" class="rounded-sm text-xl font-medium text-white transition hover:text-white/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black xl:text-xl" > Pricing </a> <a href="/#faq" x-on:click.prevent="scrollToId($el.href)" class="rounded-sm text-xl font-medium text-white transition hover:text-white/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black xl:text-xl" > FAQ </a> </nav> <div class="flex items-center justify-end gap-4 lg:gap-6 xl:flex-1"> <a href="/login" class="hidden rounded-sm text-xl font-medium text-white transition hover:text-white/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black md:inline-flex xl:text-xl" > Sign in </a> <a class="relative rounded-[3px] bg-gradient-to-r from-[#FF408B] to-[#FF714E] px-6 py-3 font-semibold inline-flex items-center justify-center gap-2 text-center text-white whitespace-nowrap transition focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black after:absolute after:inset-0 hover:after:bg-[#FFEFF3]/20 after:transition after:rounded-[3px] !hidden md:!inline-flex" href="/#pricing" x-on:click.prevent="scrollToId($el.href)" > <span>Buy Now</span> <i class="far fa-arrow-right" aria-hidden="true"></i> </a> <button x-on:click.prevent="navIsOpen = !navIsOpen" type="button" class="hover:bg-purple-700 focus-visible:ring-purple-600/60 inline-flex items-center justify-center gap-2 rounded-sm p-2 text-center text-2xl font-medium text-white transition focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white lg:hidden" > <i class="fal fa-bars" aria-hidden="true"></i> <span class="sr-only">Menu</span> </button> </div> </div> <div x-dialog x-model="navIsOpen" x-cloak> <nav x-dialog:panel x-transition:enter="transition duration-300 ease-out" x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition duration-300 ease-in" x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" class="fixed inset-0 z-20 overflow-y-auto bg-white px-6 lg:hidden" > <div class="flex items-center justify-between border-b border-gray-300 py-8"> <a href="/" class="inline-flex items-center gap-4 rounded-sm text-xl font-medium text-white transition hover:text-white/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black sm:text-[22px] focus-visible:!ring-offset-white" > <svg class="w-10 sm:w-12" viewBox="0 0 41 26" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M28.996 20.312a.588.588 0 0 1-.256-.485v-4.712c0-.472.529-.752.92-.486l5.346 3.649a.882.882 0 0 0 1.38-.729V7.647a.882.882 0 0 0-1.38-.729l-5.347 3.648a.588.588 0 0 1-.92-.486V7.435c0-.902-.73-1.633-1.632-1.633H6.609c-.902 0-1.633.731-1.633 1.633v1.086c0 .902.73 1.633 1.633 1.633h14.566c.904 0 1.728.239 2.473.717a5.23 5.23 0 0 1 1.829 1.935c.474.788.711 1.672.711 2.652v5.039c0 .955-.237 1.84-.711 2.651a5.228 5.228 0 0 1-1.829 1.935 4.486 4.486 0 0 1-2.473.717H1.72A1.72 1.72 0 0 1 0 24.08v-2.367c0-.937.759-1.695 1.694-1.695h17.544c.902 0 1.633-.73 1.633-1.633v-1.08c0-.903-.731-1.634-1.633-1.634H5.013a4.654 4.654 0 0 1-2.506-.716 5.312 5.312 0 0 1-1.83-1.9A5.437 5.437 0 0 1 0 10.368V5.303c0-.98.226-1.863.678-2.651A5.23 5.23 0 0 1 2.507.717 4.654 4.654 0 0 1 5.013 0h22.633c.903 0 1.727.239 2.472.717a5.23 5.23 0 0 1 1.829 1.935c.118.196.221.398.31.606l4.007-2.74c1.952-1.334 4.6.063 4.6 2.428v19.909c0 2.364-2.648 3.761-4.6 2.427l-7.268-4.97Z" fill="#fff" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M28.996 20.312a.588.588 0 0 1-.256-.485v-4.712c0-.472.529-.752.92-.486l5.346 3.649a.882.882 0 0 0 1.38-.729V7.647a.882.882 0 0 0-1.38-.729l-5.347 3.648a.588.588 0 0 1-.92-.486V7.435c0-.902-.73-1.633-1.632-1.633H6.609c-.902 0-1.633.731-1.633 1.633v1.086c0 .902.73 1.633 1.633 1.633h14.566c.904 0 1.728.239 2.473.717a5.23 5.23 0 0 1 1.829 1.935c.474.788.711 1.672.711 2.652v5.039c0 .955-.237 1.84-.711 2.651a5.228 5.228 0 0 1-1.829 1.935 4.486 4.486 0 0 1-2.473.717H1.72A1.72 1.72 0 0 1 0 24.08v-2.367c0-.937.759-1.695 1.694-1.695h17.544c.902 0 1.633-.73 1.633-1.633v-1.08c0-.903-.731-1.634-1.633-1.634H5.013a4.654 4.654 0 0 1-2.506-.716 5.312 5.312 0 0 1-1.83-1.9A5.437 5.437 0 0 1 0 10.368V5.303c0-.98.226-1.863.678-2.651A5.23 5.23 0 0 1 2.507.717 4.654 4.654 0 0 1 5.013 0h22.633c.903 0 1.727.239 2.472.717a5.23 5.23 0 0 1 1.829 1.935c.118.196.221.398.31.606l4.007-2.74c1.952-1.334 4.6.063 4.6 2.428v19.909c0 2.364-2.648 3.761-4.6 2.427l-7.268-4.97Z" fill="url(#paint0_linear_309_404)" /> <defs> <linearGradient id="paint0_linear_309_404" x1="-8.048" y1="14.184" x2="43.982" y2="14.184" gradientUnits="userSpaceOnUse" > <stop stop-color="#FF408B" /> <stop offset="1" stop-color="#FF714E" /> </linearGradient> </defs> </svg> <span>screencasting.com</span> </a> <button x-on:click.prevent="navIsOpen = !navIsOpen" type="button" class="inline-flex h-8 w-8 items-center justify-center gap-2 rounded-[3px] bg-gray-100 text-center text-xl font-medium text-gray-600 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white" > <i class="fal fa-xmark" aria-hidden="true"></i> <span class="sr-only">Close</span> </button> </div> <div class="flex flex-col py-8"> <a href="/#intro" x-on:click.prevent=" navIsOpen = false; scrollToId($el.href) " class="rounded-sm py-2 text-xl font-medium text-gray-600 transition hover:text-black focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white xl:text-xl" > Intro </a> <a href="/#preview" x-on:click.prevent=" navIsOpen = false; scrollToId($el.href) " class="rounded-sm py-2 text-xl font-medium text-gray-600 transition hover:text-black focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white xl:text-xl" > Course Preview </a> <a href="/#testimonials" x-on:click.prevent=" navIsOpen = false; scrollToId($el.href) " class="rounded-sm py-2 text-xl font-medium text-gray-600 transition hover:text-black focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white xl:text-xl" > Testimonials </a> <a href="/#pricing" x-on:click.prevent=" navIsOpen = false; scrollToId($el.href) " class="rounded-sm py-2 text-xl font-medium text-gray-600 transition hover:text-black focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white xl:text-xl" > Pricing </a> <a href="/#faq" x-on:click.prevent=" navIsOpen = false; scrollToId($el.href) " class="rounded-sm py-2 text-xl font-medium text-gray-600 transition hover:text-black focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white xl:text-xl" > FAQ </a> </div> <div class="mt-2 pb-6"> <a class="relative rounded-[3px] bg-gradient-to-r from-[#FF408B] to-[#FF714E] px-6 py-3 font-semibold inline-flex items-center justify-center gap-2 text-center text-white whitespace-nowrap transition focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black after:absolute after:inset-0 hover:after:bg-[#FFEFF3]/20 after:transition after:rounded-[3px] w-full focus-visible:!ring-offset-white" href="/#pricing" x-on:click.prevent="navIsOpen = false; scrollToId($el.href)" > <span>Buy Now</span> <i class="far fa-arrow-right" aria-hidden="true"></i> </a> <button x-on:click.prevent=" navIsOpen = false; $dispatch('show-auth-dialog', { mode: 'login' }) " class="mt-3 inline-flex w-full items-center justify-center gap-1.5 whitespace-nowrap rounded-sm bg-gray-100 px-5 py-3 text-center text-base font-medium text-gray-600 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white" > Sign in </button> </div> </nav> </div> </header> <section class="overflow-hidden bg-black pb-20 pt-10 md:pb-28 md:pt-16 lg:py-32"> <div class="mx-auto max-w-screen-2xl px-6 xl:px-16"> <h1 class="mx-auto max-w-5xl bg-gradient-to-b from-white to-[#F1C9EA] bg-clip-text text-center font-display text-5xl font-medium text-transparent md:text-6xl lg:text-7xl" > Effortlessly create high-quality screencasts faster than ever. </h1> <h2 class="mx-auto mt-5 max-w-2xl text-center text-xl text-gray-300 md:mt-7 lg:text-2xl"> In this course, you’ll learn all the need-to-know <br /> screencasting topics, tips, and tricks. </h2> </div> <div class="relative mx-auto mt-20 w-full max-w-7xl px-6 md:mt-24 lg:mt-32"> <img src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/editor-glow.png" aria-hidden="true" class="absolute inset-0 w-full blur-[138px]" /> <div class="relative -mx-6 h-[480px] bg-[url(/public/images/editor-mobile.jpg)] bg-cover bg-center md:hidden" ></div> <img src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/editor.jpg" alt="Screenshot" class="relative hidden w-full rounded-[10px] shadow-editor md:block" /> </div> <div class="mx-auto mt-20 grid max-w-xl gap-12 px-6 md:mt-24 lg:mt-32 lg:max-w-screen-2xl lg:grid-cols-3 xl:px-16"> <div> <i aria-hidden="true" class="far fa-duotone fa-stars text-2xl text-pink-500"></i> <h2 class="mt-4 text-2xl font-semibold text-white">Create better screencasts</h2> <p class="mt-4 text-lg text-gray-300"> Learn all the tips and tricks that go into creating a high-quality, polished screencast. We'll cover topic research, equipment, recording, and editing. I'll teach you how to create a final product that you're proud of. </p> </div> <div> <i aria-hidden="true" class="far fa-duotone fa-person-running-fast text-2xl text-green-600"></i> <i aria-hidden="true" class="far fa-duotone fa-person-running-fast text-2xl text-green-600"></i> <i aria-hidden="true" class="far fa-duotone fa-person-running-fast text-2xl text-green-600"></i> <h2 class="mt-4 text-2xl font-semibold text-white">Create better screencasts, faster</h2> <p class="mt-4 text-lg text-gray-300"> Creating high-quality screencasts doesn't have to take forever. We'll cover things you can do while recording that make the editing process easier and faster. You’ll also learn my end-to-end system for editing quickly. </p> </div> <div> <i aria-hidden="true" class="far fa-solid fa-people-arrows text-2xl text-orange-600"></i> <h2 class="mt-4 text-2xl font-semibold text-white">For beginners and seasoned pros</h2> <p class="mt-4 text-lg text-gray-300"> You don't have to be an expert filmmaker or videographer to get started! This course is perfect for anyone with something to say. If you’re already a seasoned pro, there's plenty here for you to learn. We dive deep into the research, recording, and editing processes. </p> </div> </div> </section> <section id="intro" class="relative bg-white py-24 md:py-32 lg:py-40"> <div class="mx-auto grid max-w-2xl justify-center gap-16 px-6 lg:max-w-screen-2xl lg:grid-cols-2 xl:px-16"> <div class="mx-auto max-w-lg lg:max-w-none"> <h3 class="max-w-fit bg-gradient-to-r from-[#FF408B] to-[#E66E50] bg-clip-text text-[22px] font-medium text-transparent" > 01 — Meet your instructor </h3> <h2 class="mt-5 font-display text-4xl font-medium md:text-5xl lg:text-6xl"> Hey, I’m Aaron Francis! I make really good screencasts </h2> <p class="mt-5 text-lg text-gray-600 lg:text-xl"> I’m going to teach you everything you need to know about how to make exceptional screencasts efficiently. </p> <p class="mt-8 font-display text-lg font-medium">You’ll learn:</p> <ul class="mt-2 max-w-lg list-disc text-lg text-gray-600 marker:text-gray-300"> <li>How to structure your content</li> <li>How to set up your gear (and what gear you can skip)</li> <li>Little-known techniques that let you record, edit, and publish quickly</li> <li>Pro tips that give your videos a high-quality look and feel you'll be proud of</li> </ul> <a class="relative rounded-[3px] bg-gradient-to-r from-[#FF408B] to-[#FF714E] px-6 py-3 font-semibold inline-flex items-center justify-center gap-2 text-center text-white whitespace-nowrap transition focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black after:absolute after:inset-0 hover:after:bg-[#FFEFF3]/20 after:transition after:rounded-[3px] mt-10 focus-visible:!ring-offset-white" href="#testimonials" x-on:click.prevent="scrollToId($el.href)" > <span>See What Others Are Saying</span> <i class="far fa-arrow-right" aria-hidden="true"></i> </a> </div> <div class="p-12"> <div class="relative"> <img src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/dots.png" aria-hidden="true" class="absolute -left-7 -top-7 w-full" loading="lazy" /> <div class="absolute -bottom-12 -right-9 flex h-full w-full items-end justify-center rounded-[10px] bg-gradient-to-tr from-[#FF408B] to-[#FF714E] p-4" > <div class="text-center text-sm font-medium text-white xl:text-base"> <span class="xl:hidden">Meet Aaron!</span> <span class="hidden xl:inline">Meet Aaron and learn about this screencasting course!</span> </div> </div> <div class="relative aspect-video overflow-hidden rounded-lg"> <lite-vimeo videoid="849566350" style=" background-image: url('https://i.vimeocdn.com/video/1703608464-734f0e1735597d6d05312c36da123d20508d3b2310b03b00fa195f3644132137-d?mw=600&mh=338'); " > <div class="ltv-playbtn"></div> </lite-vimeo> </div> </div> </div> </div> <div class="absolute inset-x-0 bottom-0 z-10 flex translate-y-1/2 items-center justify-center"> <svg class="max-w-[1084px]" viewBox="0 0 1084 145" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M1084 63.679c0-.457-.59-.827-1.33-.827-.73 0-1.32.37-1.32.827V81.32c0 .457.59.827 1.32.827.74 0 1.33-.37 1.33-.827V63.68ZM1072.5 61.473c0-.456-.6-.827-1.33-.827-.73 0-1.33.37-1.33.827v22.054c0 .456.6.827 1.33.827.73 0 1.33-.37 1.33-.827V61.473ZM1060.99 51.55c0-.457-.59-.828-1.32-.828-.74 0-1.33.37-1.33.827v41.902c0 .456.59.827 1.33.827.73 0 1.32-.37 1.32-.827V51.549ZM1049.49 65.884c0-.457-.6-.827-1.33-.827-.73 0-1.33.37-1.33.827v13.232c0 .457.6.827 1.33.827.73 0 1.33-.37 1.33-.827V65.884ZM1037.99 61.473c0-.456-.6-.827-1.33-.827-.74 0-1.33.37-1.33.827v22.054c0 .456.59.827 1.33.827.73 0 1.33-.37 1.33-.827V61.473ZM1026.48 65.884c0-.457-.59-.827-1.33-.827-.73 0-1.32.37-1.32.827v13.232c0 .457.59.827 1.32.827.74 0 1.33-.37 1.33-.827V65.884ZM1014.98 58.165c0-.456-.6-.827-1.33-.827-.73 0-1.33.37-1.33.827v28.67c0 .456.6.827 1.33.827.73 0 1.33-.37 1.33-.827v-28.67ZM1003.47 53.755c0-.457-.59-.827-1.32-.827-.74 0-1.33.37-1.33.827v37.49c0 .457.59.827 1.33.827.73 0 1.32-.37 1.32-.827v-37.49ZM991.971 65.884c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v13.232c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V65.884ZM980.467 62.025c0-.457-.594-.827-1.327-.827-.734 0-1.328.37-1.328.827v20.95c0 .457.594.827 1.328.827.733 0 1.327-.37 1.327-.827v-20.95ZM968.963 52.1c0-.456-.594-.826-1.327-.826s-1.327.37-1.327.827v40.798c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V52.101ZM957.46 59.268c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V59.268ZM945.956 46.036c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v52.928c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V46.036ZM934.452 52.1c0-.456-.594-.826-1.327-.826s-1.327.37-1.327.827v40.798c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V52.101ZM922.949 59.268c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V59.268ZM911.445 62.025c0-.457-.594-.827-1.327-.827-.734 0-1.328.37-1.328.827v20.95c0 .457.594.827 1.328.827.733 0 1.327-.37 1.327-.827v-20.95ZM899.941 55.96c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v33.08c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V55.96ZM888.438 35.01c0-.457-.595-.828-1.328-.828-.733 0-1.327.37-1.327.828v74.98c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V35.01ZM876.934 52.1c0-.456-.594-.826-1.327-.826-.734 0-1.328.37-1.328.827v40.798c0 .457.594.827 1.328.827.733 0 1.327-.37 1.327-.827V52.101ZM865.43 59.268c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V59.268ZM853.927 38.318c0-.457-.595-.828-1.328-.828-.733 0-1.327.37-1.327.828v68.365c0 .456.594.827 1.327.827s1.328-.371 1.328-.827V38.318ZM842.423 52.1c0-.456-.594-.826-1.327-.826-.734 0-1.328.37-1.328.827v40.798c0 .457.594.827 1.328.827.733 0 1.327-.37 1.327-.827V52.101ZM830.919 59.268c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v26.464c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V59.268ZM819.416 59.268c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V59.268ZM807.912 52.1c0-.456-.594-.826-1.328-.826-.733 0-1.327.37-1.327.827v40.798c0 .457.594.827 1.327.827.734 0 1.328-.37 1.328-.827V52.101ZM796.408 35.01c0-.457-.594-.828-1.327-.828s-1.328.37-1.328.828v74.98c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V35.01ZM784.904 59.268c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V59.268ZM773.401 35.56c0-.456-.594-.826-1.328-.826-.733 0-1.327.37-1.327.827v73.878c0 .457.594.827 1.327.827.734 0 1.328-.37 1.328-.827V35.561ZM761.897 48.793c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v47.414c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V48.793ZM750.393 24.534c0-.456-.594-.827-1.327-.827s-1.327.37-1.327.827v95.932c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V24.534ZM738.89 11.854c0-.457-.594-.827-1.328-.827-.733 0-1.327.37-1.327.827v121.292c0 .457.594.827 1.327.827.734 0 1.328-.37 1.328-.827V11.854ZM727.386 43.83c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v57.338c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V43.831ZM715.882 48.793c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v47.414c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V48.793ZM704.379 28.393c0-.456-.595-.826-1.328-.826-.733 0-1.327.37-1.327.826v88.213c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V28.394ZM692.875 43.83c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v57.338c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V43.831ZM681.371 14.61c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v115.78c0 .456.594.827 1.327.827s1.327-.371 1.327-.827V14.61ZM669.868 28.393c0-.456-.595-.826-1.328-.826-.733 0-1.327.37-1.327.826v88.213c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V28.394ZM658.364 43.83c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v57.338c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V43.831ZM646.86 48.793c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v47.414c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V48.793ZM635.357 9.648c0-.456-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v125.704c0 .456.594.827 1.327.827s1.328-.371 1.328-.827V9.648ZM623.853 35.56c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v73.878c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V35.561ZM612.349 48.793c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v47.414c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V48.793ZM600.846 12.956c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v119.088c0 .456.594.827 1.327.827s1.328-.371 1.328-.827V12.956ZM589.342 27.29c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v90.418c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V27.291ZM577.838 43.28c0-.457-.594-.828-1.327-.828s-1.327.37-1.327.828v58.441c0 .456.594.827 1.327.827s1.327-.371 1.327-.827V43.279ZM566.335 43.28c0-.457-.595-.828-1.328-.828-.733 0-1.327.37-1.327.828v58.441c0 .456.594.827 1.327.827s1.328-.371 1.328-.827V43.279ZM554.831 27.29c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v90.418c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V27.291ZM543.327.827C543.327.37 542.733 0 542 0s-1.327.37-1.327.827v143.346c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V.827ZM531.824 43.28c0-.457-.595-.828-1.328-.828-.733 0-1.327.37-1.327.828v58.441c0 .456.594.827 1.327.827s1.328-.371 1.328-.827V43.279ZM520.32 27.29c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v90.418c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V27.291ZM508.816 43.28c0-.457-.594-.828-1.327-.828s-1.327.37-1.327.828v58.441c0 .456.594.827 1.327.827s1.327-.371 1.327-.827V43.279ZM497.313 14.059c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827V130.94c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V14.059ZM485.809 12.956c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v119.088c0 .456.595.827 1.328.827.733 0 1.327-.371 1.327-.827V12.956ZM474.305 48.793c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v47.414c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V48.793ZM462.802 53.203c0-.456-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v38.594c0 .456.594.827 1.327.827s1.328-.37 1.328-.827V53.203ZM451.298 35.56c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v73.878c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V35.561ZM439.794 48.793c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v47.414c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V48.793ZM428.291 24.534c0-.456-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v95.932c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V24.534ZM416.787 35.56c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v73.878c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V35.561ZM405.283 48.793c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v47.414c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V48.793ZM393.78 53.203c0-.456-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v38.594c0 .456.594.827 1.327.827s1.328-.37 1.328-.827V53.203ZM382.276 41.626c0-.457-.594-.828-1.327-.828-.734 0-1.328.37-1.328.828v61.749c0 .456.594.827 1.328.827.733 0 1.327-.371 1.327-.827v-61.75ZM370.772 9.648c0-.456-.594-.827-1.327-.827s-1.327.37-1.327.827v125.704c0 .456.594.827 1.327.827s1.327-.371 1.327-.827V9.648ZM359.269 35.56c0-.456-.595-.826-1.328-.826-.733 0-1.327.37-1.327.827v73.878c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V35.561ZM347.765 48.793c0-.457-.594-.827-1.327-.827-.734 0-1.328.37-1.328.827v47.414c0 .457.594.827 1.328.827.733 0 1.327-.37 1.327-.827V48.793ZM336.261 11.854c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v121.292c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V11.854ZM324.758 35.56c0-.456-.595-.826-1.328-.826-.733 0-1.327.37-1.327.827v73.878c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V35.561ZM313.254 54.857c0-.456-.594-.827-1.327-.827-.734 0-1.328.37-1.328.827v35.286c0 .456.594.827 1.328.827.733 0 1.327-.37 1.327-.827V54.857ZM301.75 54.857c0-.456-.594-.827-1.327-.827s-1.327.37-1.327.827v35.286c0 .456.594.827 1.327.827s1.327-.37 1.327-.827V54.857ZM290.247 45.485c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v54.03c0 .457.594.827 1.327.827s1.328-.37 1.328-.827v-54.03ZM278.743 22.88c0-.456-.594-.827-1.328-.827-.733 0-1.327.37-1.327.827v99.24c0 .457.594.827 1.327.827.734 0 1.328-.37 1.328-.827V22.88ZM267.239 54.857c0-.456-.594-.827-1.327-.827s-1.328.37-1.328.827v35.286c0 .456.595.827 1.328.827.733 0 1.327-.37 1.327-.827V54.857ZM255.736 45.485c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v54.03c0 .457.594.827 1.327.827s1.328-.37 1.328-.827v-54.03ZM244.232 54.857c0-.456-.594-.827-1.328-.827-.733 0-1.327.37-1.327.827v35.286c0 .456.594.827 1.327.827.734 0 1.328-.37 1.328-.827V54.857ZM232.728 46.036c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v52.928c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V46.036ZM221.224 38.318c0-.457-.594-.828-1.327-.828s-1.327.37-1.327.828v68.365c0 .456.594.827 1.327.827s1.327-.371 1.327-.827V38.318ZM209.721 59.268c0-.457-.594-.827-1.328-.827-.733 0-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827.734 0 1.328-.37 1.328-.827V59.268ZM198.217 62.025c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v20.95c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827v-20.95ZM186.713 52.1c0-.456-.594-.826-1.327-.826s-1.327.37-1.327.827v40.798c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V52.101ZM175.21 59.268c0-.457-.594-.827-1.328-.827-.733 0-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827.734 0 1.328-.37 1.328-.827V59.268ZM163.706 46.036c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v52.928c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V46.036ZM152.202 52.1c0-.456-.594-.826-1.327-.826s-1.327.37-1.327.827v40.798c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V52.101ZM140.699 59.268c0-.457-.594-.827-1.328-.827-.733 0-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827.734 0 1.328-.37 1.328-.827V59.268ZM129.195 62.025c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v20.95c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827v-20.95ZM117.691 40.523c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v63.954c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V40.523ZM106.188 52.1c0-.456-.595-.826-1.328-.826-.733 0-1.327.37-1.327.827v40.798c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V52.101ZM94.684 59.268c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v26.464c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V59.268ZM83.18 53.755c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v37.49c0 .457.594.827 1.327.827s1.327-.37 1.327-.827v-37.49ZM71.677 61.473c0-.456-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v22.054c0 .456.594.827 1.327.827s1.328-.37 1.328-.827V61.473ZM60.173 51.55c0-.457-.594-.828-1.327-.828s-1.328.37-1.328.827v41.902c0 .456.595.827 1.328.827.733 0 1.327-.37 1.327-.827V51.549ZM48.67 61.473c0-.456-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v22.054c0 .456.594.827 1.327.827s1.327-.37 1.327-.827V61.473ZM37.166 65.884c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v13.232c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V65.884ZM25.662 53.755c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v37.49c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827v-37.49ZM14.158 61.473c0-.456-.594-.827-1.327-.827s-1.327.37-1.327.827v22.054c0 .456.594.827 1.327.827s1.327-.37 1.327-.827V61.473ZM2.655 59.268c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V59.268Z" fill="#B7AEB7" fill-opacity=".12" /> </svg> </div> <script type="module" src="https://cdn.jsdelivr.net/npm/lite-vimeo-embed/+esm"></script> </section> <section wire:id="w6PB1dBlXZi6wa5VEOl6" wire:initial-data="{"fingerprint":{"id":"w6PB1dBlXZi6wa5VEOl6","name":"preview-section","locale":"en","path":"\/","method":"GET","v":"acj"},"effects":{"listeners":[]},"serverMemo":{"children":[],"errors":[],"htmlHash":"fce2641f","data":{"subtitle":null},"dataMeta":[],"checksum":"149f977680b4f8c4d61190bd120d028d89a740999e4a61f76ef7258ea459705b"}}" id="preview" class="relative overflow-clip bg-black py-24 md:py-32 lg:py-40"> <img src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/preview-background.jpg" aria-hidden="true" loading="lazy" class="absolute inset-0 blur-2xl" /> <div class="relative mx-auto max-w-screen-2xl px-6 xl:px-16"> <div class="mx-auto max-w-xl text-center lg:max-w-3xl"> <h3 class="mx-auto max-w-fit bg-gradient-to-r from-[#FF408B] to-[#E66E50] bg-clip-text text-[22px] font-medium text-transparent" > 02 — Explore the Course </h3> <h2 class="mt-5 font-display text-4xl font-medium text-white md:text-4xl lg:text-5xl"> We’ll cover all the topics you need, from planning to publishing. </h2> <p class="mt-5 text-lg text-gray-300 lg:text-xl"> We’ll cover everything from planning your content, to cameras, to recording and editing. Start your screencast journey today! </p> </div> <div class="mx-auto mt-32 flex max-w-5xl flex-col gap-32"> <div class="relative flex flex-col items-center gap-16 lg:flex-row lg:items-start"> <div class="lg:sticky lg:top-8"> <div class="relative h-full max-w-sm"> <div class=" group relative z-10 flex h-full flex-1 flex-col overflow-hidden rounded-xl transition" > <div class="relative"> <img src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/section-1-preview.png" alt="Introduction" class="aspect-video w-full object-cover object-top" loading="lazy" /> <div class="absolute inset-0 bg-gradient-to-b from-transparent from-30% to-black"></div> </div> <div class="flex flex-1 flex-col bg-white p-8"> <div class="text-gray-400 text-sm uppercase tracking-wider">Section 01</div> <div class="flex flex-wrap items-start justify-between gap-x-6 gap-y-1"> <h3 class="text-xl font-semibold xl:text-[22px]"> Introduction </h3> <span class="inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-gray-100 p-2 text-xs font-medium text-gray-600" > <i class="far fa-video"></i> <span>3 Videos</span> </span> </div> <p class="mt-3 flex-1 text-gray-600 xl:text-lg"> An overview of the course, a preview of what to expect, and an answer to a question everyone has: will I get rich selling courses? (I don't know!) </p> </div> </div> <div class="mx-auto h-2.5 w-[calc(100%-20px)] -translate-y-1 rounded-b bg-white/60 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> <div class="mx-auto h-1.5 w-[calc(100%-40px)] -translate-y-1 rounded-b bg-white/30 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> </div> </div> <div class="-m-2 max-w-xl lg:max-w-none lg:flex-1"> <a href="/intro/welcome" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 01 </span> <span class="ml-2 font-semibold"> Introduction </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 2:32 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Welcome to the course! This video serves as an overview of who I am and what you can expect throughout this course. </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <a href="/intro/things-i-care-about" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 02 </span> <span class="ml-2 font-semibold"> Things I care about </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 02:37 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> This entire course comes from a single point of view: mine! I'll tell you up front about all the things I care about, and you can decide if you care about the same things. </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <a href="/intro/will-you-get-rich" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 03 </span> <span class="ml-2 font-semibold"> Will you get rich? </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 01:42 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> The question on everyone's mind: will you get rich selling courses? I don't know! It's entirely possible, but it may also lead to jobs, consulting, or other good things. </p> </a> </div> </div> <div class="relative flex flex-col items-center gap-16 lg:flex-row lg:items-start"> <div class="lg:sticky lg:top-8"> <div class="relative h-full max-w-sm"> <div class=" group relative z-10 flex h-full flex-1 flex-col overflow-hidden rounded-xl transition" > <div class="relative"> <img src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/section-2-preview.png" alt="Content Planning" class="aspect-video w-full object-cover object-top" loading="lazy" /> <div class="absolute inset-0 bg-gradient-to-b from-transparent from-30% to-black"></div> </div> <div class="flex flex-1 flex-col bg-white p-8"> <div class="text-gray-400 text-sm uppercase tracking-wider">Section 02</div> <div class="flex flex-wrap items-start justify-between gap-x-6 gap-y-1"> <h3 class="text-xl font-semibold xl:text-[22px]"> Content Planning </h3> <span class="inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-gray-100 p-2 text-xs font-medium text-gray-600" > <i class="far fa-video"></i> <span>9 Videos</span> </span> </div> <p class="mt-3 flex-1 text-gray-600 xl:text-lg"> Before you can record anything, you have to plan out your content! In this section we cover research, scripts, and outlines. </p> </div> </div> <div class="mx-auto h-2.5 w-[calc(100%-20px)] -translate-y-1 rounded-b bg-white/60 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> <div class="mx-auto h-1.5 w-[calc(100%-40px)] -translate-y-1 rounded-b bg-white/30 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> </div> </div> <div class="-m-2 max-w-xl lg:max-w-none lg:flex-1"> <a href="/content/defining-your-audience" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 01 </span> <span class="ml-2 font-semibold"> Who are you teaching? </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 4:43 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Clearly defining your audience will help you develop compelling content. In this video, you’ll learn strategies for identifying that audience. </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <a href="/content/research" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 02 </span> <span class="ml-2 font-semibold"> Researching your topic </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 7:09 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Researching and outlining your topic upfront is a crucial step to producing a cohesive course. In this video, we will talk about the two phases of the method that I use. </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <a href="/content/stair-stepping" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 03 </span> <span class="ml-2 font-semibold"> Stair-stepping knowledge </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 2:58 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Want to make your viewer feel overwhelmed? Teach them everything all at once! Try the stair-stepping technique instead. </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <a href="/content/addressing-objections" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 04 </span> <span class="ml-2 font-semibold"> Addressing viewer objections </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 4:18 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> As you're teaching, try to "speak on behalf of the viewer." Openly addressing common objections to your subject matter can help create trust with your learner. </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 05 </span> <span class="ml-2 font-semibold"> The ideal video length </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 2:55 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Video length is somewhat dependent on platform. Let's talk about the different considerations when deciding how long your videos should be. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 06 </span> <span class="ml-2 font-semibold"> Do it wrong on purpose! </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 3:42 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> It sounds like a bad idea, but it's OK to show a wrong or sub-optimal method first, especially if that's what the viewer would have done on their own. That gives you the opportunity to teach the better (or more correct) method. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 07 </span> <span class="ml-2 font-semibold"> Should you use a script? </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 4:36 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Reading from a script or recording off-the-cuff is totally up to you, but I have my opinions! We'll talk about tradeoffs of each. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 08 </span> <span class="ml-2 font-semibold"> Dictating your content </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 3:42 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> In this video, we’ll look at my method for outlining my ideas. This method can save me up to a couple of hours per video. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 09 </span> <span class="ml-2 font-semibold"> Project management of you </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 3:21 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Managing yourself can be tricky. I’ll show you how it’s done, and encourage you to keep it simple. </p> </div> </div> </div> <div class="relative flex flex-col items-center gap-16 lg:flex-row lg:items-start"> <div class="lg:sticky lg:top-8"> <div class="relative h-full max-w-sm"> <div class=" group relative z-10 flex h-full flex-1 flex-col overflow-hidden rounded-xl transition" > <div class="relative"> <img src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/section-3-preview.png" alt="Equipment" class="aspect-video w-full object-cover object-top" loading="lazy" /> <div class="absolute inset-0 bg-gradient-to-b from-transparent from-30% to-black"></div> </div> <div class="flex flex-1 flex-col bg-white p-8"> <div class="text-gray-400 text-sm uppercase tracking-wider">Section 03</div> <div class="flex flex-wrap items-start justify-between gap-x-6 gap-y-1"> <h3 class="text-xl font-semibold xl:text-[22px]"> Equipment </h3> <span class="inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-gray-100 p-2 text-xs font-medium text-gray-600" > <i class="far fa-video"></i> <span>8 Videos</span> </span> </div> <p class="mt-3 flex-1 text-gray-600 xl:text-lg"> We'll cover what equipment you need and maybe more importantly, what equipment you don't need. </p> </div> </div> <div class="mx-auto h-2.5 w-[calc(100%-20px)] -translate-y-1 rounded-b bg-white/60 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> <div class="mx-auto h-1.5 w-[calc(100%-40px)] -translate-y-1 rounded-b bg-white/30 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> </div> </div> <div class="-m-2 max-w-xl lg:max-w-none lg:flex-1"> <a href="/equipment/intro" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 01 </span> <span class="ml-2 font-semibold"> Introduction to equipment </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 1:49 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> An introduction to the equipment section, where I beg you to not worry about buying a bunch of things. </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <a href="/equipment/do-you-want-to-be-on-camera" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 02 </span> <span class="ml-2 font-semibold"> Deciding if you want to be on camera </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 3:54 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> It's up to you! I am going to try to convince you to be on camera for at least a little bit though. Showing your face on camera can help build rapport with your audience. </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 03 </span> <span class="ml-2 font-semibold"> Picking a camera </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 6:30 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> In this video, we'll discuss the different tiers of cameras, and I'll offer a recommendation for each tier. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 04 </span> <span class="ml-2 font-semibold"> Picking a microphone </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 5:33 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Far more important than the camera is the microphone. I'll give you a few levels of recommendations here as well. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 05 </span> <span class="ml-2 font-semibold"> Picking lights </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 7:08 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> If you are going to be on camera, having just a few lights can take your setup to the next level quite easily. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 06 </span> <span class="ml-2 font-semibold"> Considerations for your monitor </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 4:06 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> You don't need to buy a new monitor! But it will help to set it up correctly for recording. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 07 </span> <span class="ml-2 font-semibold"> Positioning your equipment </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 4:21 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Now that you've got all of your equipment... where does everything go? I'll show you how mine is set up and things you'll need to think about. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 08 </span> <span class="ml-2 font-semibold"> Bonus: Camo Studio </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 1:16 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> A fun little app that I use occasionally. Not always useful, but very good when you do need it. </p> </div> </div> </div> <div class="relative flex flex-col items-center gap-16 lg:flex-row lg:items-start"> <div class="lg:sticky lg:top-8"> <div class="relative h-full max-w-sm"> <div class=" group relative z-10 flex h-full flex-1 flex-col overflow-hidden rounded-xl transition" > <div class="relative"> <img src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/section-4-preview.png" alt="Recording" class="aspect-video w-full object-cover object-top" loading="lazy" /> <div class="absolute inset-0 bg-gradient-to-b from-transparent from-30% to-black"></div> </div> <div class="flex flex-1 flex-col bg-white p-8"> <div class="text-gray-400 text-sm uppercase tracking-wider">Section 04</div> <div class="flex flex-wrap items-start justify-between gap-x-6 gap-y-1"> <h3 class="text-xl font-semibold xl:text-[22px]"> Recording </h3> <span class="inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-gray-100 p-2 text-xs font-medium text-gray-600" > <i class="far fa-video"></i> <span>12 Videos</span> </span> </div> <p class="mt-3 flex-1 text-gray-600 xl:text-lg"> When recording, there are a few things you can do to give your screencast extra polish and make editing easier on yourself. </p> </div> </div> <div class="mx-auto h-2.5 w-[calc(100%-20px)] -translate-y-1 rounded-b bg-white/60 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> <div class="mx-auto h-1.5 w-[calc(100%-40px)] -translate-y-1 rounded-b bg-white/30 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> </div> </div> <div class="-m-2 max-w-xl lg:max-w-none lg:flex-1"> <a href="/recording/consistency" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 01 </span> <span class="ml-2 font-semibold"> Ensuring consistency in your videos </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 2:56 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Creating a cohesive, consistent course can be difficult over time. In this video, we'll talk about a few things to keep in mind that can help you achieve that goal. </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <a href="/recording/preparing-yourself" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 02 </span> <span class="ml-2 font-semibold"> Preparing yourself to record </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 3:46 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Before you record any video, it's important that you prepare yourself. We'll run through a checklist of things to prepare in this video. </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 03 </span> <span class="ml-2 font-semibold"> Preparing your space for recording </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 4:33 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> If you're going to be on camera, you'll need to prep your space. There are a couple things you'll need to think about to maximize consistency. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 04 </span> <span class="ml-2 font-semibold"> Preparing your screen for recording </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 8:22 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Eliminating distraction is a crucial part of an effective screencast. I'll show you all the things you can hide to help your viewers focus. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 05 </span> <span class="ml-2 font-semibold"> Preparing your applications for recording </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 6:07 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> When you're working in an application on-screen, you need to hide every single thing that isn't relevant. We'll take a look at several examples of things you might consider hiding. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 06 </span> <span class="ml-2 font-semibold"> How to do your intros and outros </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 3:31 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> How do you start a video? How do you end it? I'll show you what I think is most natural. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 07 </span> <span class="ml-2 font-semibold"> Recording in chunks </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 7:43 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Getting a video recorded perfectly the first time is a daunting task. In this video we'll talk about how you can break it down into chunks to make it less overwhelming. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 08 </span> <span class="ml-2 font-semibold"> Example chunks from this course </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 10:16 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> To show you how "recording in chunks" works, here are a bunch of outtakes from this very course! </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 09 </span> <span class="ml-2 font-semibold"> Recording settings </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 4:34 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> How to set up your screen recording software with the correct settings. I'll be demoing ScreenFlow, but also make a few recommendations for other software. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 10 </span> <span class="ml-2 font-semibold"> Handling mistakes </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 3:48 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> You're going to make mistakes in your videos, that's guaranteed. The way you handle them depends on what kind of mistake it is! </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 11 </span> <span class="ml-2 font-semibold"> Maximizing the longevity of your videos </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 3:50 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Once you've finally finished your videos, you want them to remain evergreen for as long as possible! I'll give you a few tips to make sure your videos don't feel stale. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 12 </span> <span class="ml-2 font-semibold"> For when you mess up </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 1:07 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> A word of encouragement for when you record a screencast with no video. Or no audio. Or you didn't record at all. </p> </div> </div> </div> <div class="relative flex flex-col items-center gap-16 lg:flex-row lg:items-start"> <div class="lg:sticky lg:top-8"> <div class="relative h-full max-w-sm"> <div class=" group relative z-10 flex h-full flex-1 flex-col overflow-hidden rounded-xl transition" > <div class="relative"> <img src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/section-5-preview.png" alt="Editing" class="aspect-video w-full object-cover object-top" loading="lazy" /> <div class="absolute inset-0 bg-gradient-to-b from-transparent from-30% to-black"></div> </div> <div class="flex flex-1 flex-col bg-white p-8"> <div class="text-gray-400 text-sm uppercase tracking-wider">Section 05</div> <div class="flex flex-wrap items-start justify-between gap-x-6 gap-y-1"> <h3 class="text-xl font-semibold xl:text-[22px]"> Editing </h3> <span class="inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-gray-100 p-2 text-xs font-medium text-gray-600" > <i class="far fa-video"></i> <span>15 Videos</span> </span> </div> <p class="mt-3 flex-1 text-gray-600 xl:text-lg"> The part that everyone dreads: editing. It's not so bad! I'll show you some methods to get through the edits quickly. </p> </div> </div> <div class="mx-auto h-2.5 w-[calc(100%-20px)] -translate-y-1 rounded-b bg-white/60 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> <div class="mx-auto h-1.5 w-[calc(100%-40px)] -translate-y-1 rounded-b bg-white/30 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> </div> </div> <div class="-m-2 max-w-xl lg:max-w-none lg:flex-1"> <a href="/editing/intro" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 01 </span> <span class="ml-2 font-semibold"> Editing introduction </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 2:52 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Editing is a big topic! We'll go over what you can expect from this module. </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <a href="/editing/tour" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 02 </span> <span class="ml-2 font-semibold"> A tour of the editor </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 2:51 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Let's take a look around at the editor and familiarize ourselves with the layout. </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <a href="/editing/rough-cut" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 03 </span> <span class="ml-2 font-semibold"> The first pass: rough cutting </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 10:29 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> The first step in the editing process is the rough cut. There are likely bad takes in your video, and we want to cut those out as quickly as possible without wasting any time. </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 04 </span> <span class="ml-2 font-semibold"> Fine tuning: covering camera cuts </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 6:31 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> After you've done your rough cut pass, it's time to do the fine tuning pass. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 05 </span> <span class="ml-2 font-semibold"> Adding some action to the video </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 7:06 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Adding a few transitions or a bit of movement can make your videos feel much more polished. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 06 </span> <span class="ml-2 font-semibold"> Better video actions </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 5:01 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Let's enhance the actions that we learned about in the previous video. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 07 </span> <span class="ml-2 font-semibold"> Saving time with presets </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 3:53 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Taking advantage of saved presets will save you time and make your videos much more consistent. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 08 </span> <span class="ml-2 font-semibold"> Editing talking head videos </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 5:56 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Recording talking head videos gives you fewer opportunities for seamless edits. In this video we'll explore some ways to hide those edits. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 09 </span> <span class="ml-2 font-semibold"> Cropping mistakes out of your videos </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 5:04 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> You may have recorded the entire screen, but you don"t have to use the entire screen! </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 10 </span> <span class="ml-2 font-semibold"> Freeze frames: your secret weapon </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 3:44 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Sometimes you'll notice a mistake while editing and using a freeze frame (or partial freeze frame!) is a good way to minimize or eliminate that mistake. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 11 </span> <span class="ml-2 font-semibold"> 2 Freeze 2 Frames: even more power </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 5:01 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> A fast and furious way to use freeze frames to make your edits disappear. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 12 </span> <span class="ml-2 font-semibold"> Fine tuning with the keyboard only </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 5:32 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Fine tuning is important, but we still need to do it quickly. I''ll show you my keyboard-only workflow for fine tuning incredibly quickly. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 13 </span> <span class="ml-2 font-semibold"> Color correcting </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 2:53 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> If your video feed comes out a little red, you can fix it! </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 14 </span> <span class="ml-2 font-semibold"> Processing audio </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 0:59 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Having clean audio is extremely important. Hopefully your audio is already good, thanks to your space and your microphone. In this video we'll talk about how to process the audio further to make it even better. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 15 </span> <span class="ml-2 font-semibold"> Making your transitions feel smoother </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 2:36 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Using a few very basic techniques (J & L cuts) we can make our transitions feel smoother than just an abrupt cut. </p> </div> </div> </div> <div class="relative flex flex-col items-center gap-16 lg:flex-row lg:items-start"> <div class="lg:sticky lg:top-8"> <div class="relative h-full max-w-sm"> <div class=" group relative z-10 flex h-full flex-1 flex-col overflow-hidden rounded-xl transition" > <div class="relative"> <img src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/section-6-preview.png" alt="Publishing" class="aspect-video w-full object-cover object-top" loading="lazy" /> <div class="absolute inset-0 bg-gradient-to-b from-transparent from-30% to-black"></div> </div> <div class="flex flex-1 flex-col bg-white p-8"> <div class="text-gray-400 text-sm uppercase tracking-wider">Section 06</div> <div class="flex flex-wrap items-start justify-between gap-x-6 gap-y-1"> <h3 class="text-xl font-semibold xl:text-[22px]"> Publishing </h3> <span class="inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-gray-100 p-2 text-xs font-medium text-gray-600" > <i class="far fa-video"></i> <span>5 Videos</span> </span> </div> <p class="mt-3 flex-1 text-gray-600 xl:text-lg"> Time to get your videos off of your hard drive and out into the world. </p> </div> </div> <div class="mx-auto h-2.5 w-[calc(100%-20px)] -translate-y-1 rounded-b bg-white/60 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> <div class="mx-auto h-1.5 w-[calc(100%-40px)] -translate-y-1 rounded-b bg-white/30 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> </div> </div> <div class="-m-2 max-w-xl lg:max-w-none lg:flex-1"> <a href="/publishing/settings" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 01 </span> <span class="ml-2 font-semibold"> Export settings </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 5:17 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Getting your video off of your hard drive and into the world starts with exporting. Let's talk about the right settings to export your videos! </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 02 </span> <span class="ml-2 font-semibold"> Exporting workflows </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 1:44 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Exporting a portion of the video for previewing or exporting every single video in a batch, I'll show you how to do both. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 03 </span> <span class="ml-2 font-semibold"> Hosting your videos </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 2:43 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Where should you put your videos? I have my favorite spots, but we'll look at a few others too. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 04 </span> <span class="ml-2 font-semibold"> A few marketing ideas </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 2:24 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> You want people to watch your videos, so you need to tell everyone about them! I'll share some of my marketing tactics in this video. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 05 </span> <span class="ml-2 font-semibold"> Goodbye, for now (maybe!) </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 1:28 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> This is potentially the end of the course for some of you, I just want to quickly say thanks! </p> </div> </div> </div> <div class="relative flex flex-col items-center gap-16 lg:flex-row lg:items-start"> <div class="lg:sticky lg:top-8"> <div class="relative h-full max-w-sm"> <div class=" group relative z-10 flex h-full flex-1 flex-col overflow-hidden rounded-xl transition" > <div class="relative"> <img src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/section-7-preview.png" alt="Social Platforms" class="aspect-video w-full object-cover object-top" loading="lazy" /> <div class="absolute inset-0 bg-gradient-to-b from-transparent from-30% to-black"></div> </div> <div class="flex flex-1 flex-col bg-white p-8"> <div class="text-gray-400 text-sm uppercase tracking-wider">Section 07</div> <div class="flex flex-wrap items-start justify-between gap-x-6 gap-y-1"> <h3 class="text-xl font-semibold xl:text-[22px]"> Social Platforms </h3> <span class="inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-gray-100 p-2 text-xs font-medium text-gray-600" > <i class="far fa-video"></i> <span>8 Videos</span> </span> </div> <p class="mt-3 flex-1 text-gray-600 xl:text-lg"> An overview of the philosophy and tactics behind different social platforms, and thoughts on how to optimize each. </p> </div> </div> <div class="mx-auto h-2.5 w-[calc(100%-20px)] -translate-y-1 rounded-b bg-white/60 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> <div class="mx-auto h-1.5 w-[calc(100%-40px)] -translate-y-1 rounded-b bg-white/30 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> </div> </div> <div class="-m-2 max-w-xl lg:max-w-none lg:flex-1"> <a href="/platforms/intro" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 01 </span> <span class="ml-2 font-semibold"> Social media: philosophy and technicality </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 0:48 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Every social platform is different, and each has their own requirements for videos. This will serve as an overview of the platforms. </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 02 </span> <span class="ml-2 font-semibold"> What does the platform want? </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 7:02 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> What does the social media platform want out of you, what do you want to create, and is there a middle ground? </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 03 </span> <span class="ml-2 font-semibold"> Repurpose your content </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 5:02 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Repurposing your content can be a little tricky, because it can lead to lower quality results. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 04 </span> <span class="ml-2 font-semibold"> Twitter (X?) </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 5:45 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Twitter is my favorite platform for sharing short form video content. We'll talk about what I think works well and what doesn't on Twitter. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 05 </span> <span class="ml-2 font-semibold"> YouTube </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 7:05 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> YouTube is the best place to share your standalone long-form videos. It can be a great place to share a few videos from your course as marketing, or completely standalone videos. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 06 </span> <span class="ml-2 font-semibold"> Instagram Reels (Coming soon) </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 0:41 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Instagram Reels is another short-form platform where you might find an audience for your videos. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 07 </span> <span class="ml-2 font-semibold"> LinkedIn (Coming soon) </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 0:41 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> LinkedIn is a surprisingly vital social network where you can share your videos if your audience is there. We'll talk about requirements for that platform. </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 08 </span> <span class="ml-2 font-semibold"> TikTok (Coming soon) </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 0:41 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Not everything on TikTok is dances! It can be a good place to share your short-form content. </p> </div> </div> </div> <div class="relative flex flex-col items-center gap-16 lg:flex-row lg:items-start"> <div class="lg:sticky lg:top-8"> <div class="relative h-full max-w-sm"> <div class=" group relative z-10 flex h-full flex-1 flex-col overflow-hidden rounded-xl transition" > <div class="relative"> <img src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/section-8-preview.png" alt="Teardowns" class="aspect-video w-full object-cover object-top" loading="lazy" /> <div class="absolute inset-0 bg-gradient-to-b from-transparent from-30% to-black"></div> </div> <div class="flex flex-1 flex-col bg-white p-8"> <div class="text-gray-400 text-sm uppercase tracking-wider">Section 08</div> <div class="flex flex-wrap items-start justify-between gap-x-6 gap-y-1"> <h3 class="text-xl font-semibold xl:text-[22px]"> Teardowns </h3> <span class="inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-gray-100 p-2 text-xs font-medium text-gray-600" > <i class="far fa-video"></i> <span>7 Videos</span> </span> </div> <p class="mt-3 flex-1 text-gray-600 xl:text-lg"> Look at real-world example and learn from other people's screencasts! </p> </div> </div> <div class="mx-auto h-2.5 w-[calc(100%-20px)] -translate-y-1 rounded-b bg-white/60 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> <div class="mx-auto h-1.5 w-[calc(100%-40px)] -translate-y-1 rounded-b bg-white/30 shadow-[inset_0px_4px_4px_rgba(0,0,0,0.05)]" ></div> </div> </div> <div class="-m-2 max-w-xl lg:max-w-none lg:flex-1"> <a href="/teardowns/intro" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 01 </span> <span class="ml-2 font-semibold"> Teardown introduction </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 01:22 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> An introduction to the teardowns section. What's important is not my taste, but yours! </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <a href="/teardowns/andrico" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 02 </span> <span class="ml-2 font-semibold"> Andrico Karoulla </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 12:31 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> A review of the first video from a course called Component Odyssey. </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <a href="/teardowns/umar" class="block rounded p-2 text-white transition hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > <div class="flex items-center text-xl"> <span class="text-white/50"> 03 </span> <span class="ml-2 font-semibold"> Umar Hansa </span> <span class="ml-3 inline-flex items-center gap-1.5 whitespace-nowrap rounded-[3px] bg-pink-500/10 px-2 py-1 text-sm font-medium text-pink-600" > <span>Free</span> </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 15:58 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> A review of a YouTube video by Umar Hansa </p> </a> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 04 </span> <span class="ml-2 font-semibold"> Teardown 4 </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 04:20 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Teardowns will continue to roll out in the coming weeks! </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 05 </span> <span class="ml-2 font-semibold"> Teardown 5 </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 04:20 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Teardowns will continue to roll out in the coming weeks! </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 06 </span> <span class="ml-2 font-semibold"> Teardown 6 </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 04:20 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Teardowns will continue to roll out in the coming weeks! </p> </div> <div class="p-2"> <hr class="border-t border-white/10" /> </div> <div class="block rounded p-2 text-white"> <div class="flex items-center text-xl"> <span class="text-white/50"> 07 </span> <span class="ml-2 font-semibold"> Teardown 7 </span> <span class="ml-auto rounded bg-black/60 px-2 py-1 text-sm text-white/60"> 04:20 </span> </div> <p class="mt-1 leading-relaxed text-white/80"> Teardowns will continue to roll out in the coming weeks! </p> </div> </div> </div> </div> </div> </section>  <section id="testimonials" class="relative py-24 md:py-32 lg:py-40"> <div class="absolute inset-x-0 top-0 z-10 flex -translate-y-1/2 items-center justify-center"> <svg class="max-w-[1084px]" viewBox="0 0 1084 145" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M1084 63.679c0-.457-.59-.827-1.33-.827-.73 0-1.32.37-1.32.827V81.32c0 .457.59.827 1.32.827.74 0 1.33-.37 1.33-.827V63.68ZM1072.5 61.473c0-.456-.6-.827-1.33-.827-.73 0-1.33.37-1.33.827v22.054c0 .456.6.827 1.33.827.73 0 1.33-.37 1.33-.827V61.473ZM1060.99 51.55c0-.457-.59-.828-1.32-.828-.74 0-1.33.37-1.33.827v41.902c0 .456.59.827 1.33.827.73 0 1.32-.37 1.32-.827V51.549ZM1049.49 65.884c0-.457-.6-.827-1.33-.827-.73 0-1.33.37-1.33.827v13.232c0 .457.6.827 1.33.827.73 0 1.33-.37 1.33-.827V65.884ZM1037.99 61.473c0-.456-.6-.827-1.33-.827-.74 0-1.33.37-1.33.827v22.054c0 .456.59.827 1.33.827.73 0 1.33-.37 1.33-.827V61.473ZM1026.48 65.884c0-.457-.59-.827-1.33-.827-.73 0-1.32.37-1.32.827v13.232c0 .457.59.827 1.32.827.74 0 1.33-.37 1.33-.827V65.884ZM1014.98 58.165c0-.456-.6-.827-1.33-.827-.73 0-1.33.37-1.33.827v28.67c0 .456.6.827 1.33.827.73 0 1.33-.37 1.33-.827v-28.67ZM1003.47 53.755c0-.457-.59-.827-1.32-.827-.74 0-1.33.37-1.33.827v37.49c0 .457.59.827 1.33.827.73 0 1.32-.37 1.32-.827v-37.49ZM991.971 65.884c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v13.232c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V65.884ZM980.467 62.025c0-.457-.594-.827-1.327-.827-.734 0-1.328.37-1.328.827v20.95c0 .457.594.827 1.328.827.733 0 1.327-.37 1.327-.827v-20.95ZM968.963 52.1c0-.456-.594-.826-1.327-.826s-1.327.37-1.327.827v40.798c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V52.101ZM957.46 59.268c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V59.268ZM945.956 46.036c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v52.928c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V46.036ZM934.452 52.1c0-.456-.594-.826-1.327-.826s-1.327.37-1.327.827v40.798c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V52.101ZM922.949 59.268c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V59.268ZM911.445 62.025c0-.457-.594-.827-1.327-.827-.734 0-1.328.37-1.328.827v20.95c0 .457.594.827 1.328.827.733 0 1.327-.37 1.327-.827v-20.95ZM899.941 55.96c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v33.08c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V55.96ZM888.438 35.01c0-.457-.595-.828-1.328-.828-.733 0-1.327.37-1.327.828v74.98c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V35.01ZM876.934 52.1c0-.456-.594-.826-1.327-.826-.734 0-1.328.37-1.328.827v40.798c0 .457.594.827 1.328.827.733 0 1.327-.37 1.327-.827V52.101ZM865.43 59.268c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V59.268ZM853.927 38.318c0-.457-.595-.828-1.328-.828-.733 0-1.327.37-1.327.828v68.365c0 .456.594.827 1.327.827s1.328-.371 1.328-.827V38.318ZM842.423 52.1c0-.456-.594-.826-1.327-.826-.734 0-1.328.37-1.328.827v40.798c0 .457.594.827 1.328.827.733 0 1.327-.37 1.327-.827V52.101ZM830.919 59.268c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v26.464c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V59.268ZM819.416 59.268c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V59.268ZM807.912 52.1c0-.456-.594-.826-1.328-.826-.733 0-1.327.37-1.327.827v40.798c0 .457.594.827 1.327.827.734 0 1.328-.37 1.328-.827V52.101ZM796.408 35.01c0-.457-.594-.828-1.327-.828s-1.328.37-1.328.828v74.98c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V35.01ZM784.904 59.268c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V59.268ZM773.401 35.56c0-.456-.594-.826-1.328-.826-.733 0-1.327.37-1.327.827v73.878c0 .457.594.827 1.327.827.734 0 1.328-.37 1.328-.827V35.561ZM761.897 48.793c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v47.414c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V48.793ZM750.393 24.534c0-.456-.594-.827-1.327-.827s-1.327.37-1.327.827v95.932c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V24.534ZM738.89 11.854c0-.457-.594-.827-1.328-.827-.733 0-1.327.37-1.327.827v121.292c0 .457.594.827 1.327.827.734 0 1.328-.37 1.328-.827V11.854ZM727.386 43.83c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v57.338c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V43.831ZM715.882 48.793c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v47.414c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V48.793ZM704.379 28.393c0-.456-.595-.826-1.328-.826-.733 0-1.327.37-1.327.826v88.213c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V28.394ZM692.875 43.83c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v57.338c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V43.831ZM681.371 14.61c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v115.78c0 .456.594.827 1.327.827s1.327-.371 1.327-.827V14.61ZM669.868 28.393c0-.456-.595-.826-1.328-.826-.733 0-1.327.37-1.327.826v88.213c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V28.394ZM658.364 43.83c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v57.338c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V43.831ZM646.86 48.793c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v47.414c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V48.793ZM635.357 9.648c0-.456-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v125.704c0 .456.594.827 1.327.827s1.328-.371 1.328-.827V9.648ZM623.853 35.56c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v73.878c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V35.561ZM612.349 48.793c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v47.414c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V48.793ZM600.846 12.956c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v119.088c0 .456.594.827 1.327.827s1.328-.371 1.328-.827V12.956ZM589.342 27.29c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v90.418c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V27.291ZM577.838 43.28c0-.457-.594-.828-1.327-.828s-1.327.37-1.327.828v58.441c0 .456.594.827 1.327.827s1.327-.371 1.327-.827V43.279ZM566.335 43.28c0-.457-.595-.828-1.328-.828-.733 0-1.327.37-1.327.828v58.441c0 .456.594.827 1.327.827s1.328-.371 1.328-.827V43.279ZM554.831 27.29c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v90.418c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V27.291ZM543.327.827C543.327.37 542.733 0 542 0s-1.327.37-1.327.827v143.346c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V.827ZM531.824 43.28c0-.457-.595-.828-1.328-.828-.733 0-1.327.37-1.327.828v58.441c0 .456.594.827 1.327.827s1.328-.371 1.328-.827V43.279ZM520.32 27.29c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v90.418c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V27.291ZM508.816 43.28c0-.457-.594-.828-1.327-.828s-1.327.37-1.327.828v58.441c0 .456.594.827 1.327.827s1.327-.371 1.327-.827V43.279ZM497.313 14.059c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827V130.94c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V14.059ZM485.809 12.956c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v119.088c0 .456.595.827 1.328.827.733 0 1.327-.371 1.327-.827V12.956ZM474.305 48.793c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v47.414c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V48.793ZM462.802 53.203c0-.456-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v38.594c0 .456.594.827 1.327.827s1.328-.37 1.328-.827V53.203ZM451.298 35.56c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v73.878c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V35.561ZM439.794 48.793c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v47.414c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V48.793ZM428.291 24.534c0-.456-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v95.932c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V24.534ZM416.787 35.56c0-.456-.594-.826-1.327-.826s-1.328.37-1.328.827v73.878c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V35.561ZM405.283 48.793c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v47.414c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V48.793ZM393.78 53.203c0-.456-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v38.594c0 .456.594.827 1.327.827s1.328-.37 1.328-.827V53.203ZM382.276 41.626c0-.457-.594-.828-1.327-.828-.734 0-1.328.37-1.328.828v61.749c0 .456.594.827 1.328.827.733 0 1.327-.371 1.327-.827v-61.75ZM370.772 9.648c0-.456-.594-.827-1.327-.827s-1.327.37-1.327.827v125.704c0 .456.594.827 1.327.827s1.327-.371 1.327-.827V9.648ZM359.269 35.56c0-.456-.595-.826-1.328-.826-.733 0-1.327.37-1.327.827v73.878c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V35.561ZM347.765 48.793c0-.457-.594-.827-1.327-.827-.734 0-1.328.37-1.328.827v47.414c0 .457.594.827 1.328.827.733 0 1.327-.37 1.327-.827V48.793ZM336.261 11.854c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v121.292c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V11.854ZM324.758 35.56c0-.456-.595-.826-1.328-.826-.733 0-1.327.37-1.327.827v73.878c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V35.561ZM313.254 54.857c0-.456-.594-.827-1.327-.827-.734 0-1.328.37-1.328.827v35.286c0 .456.594.827 1.328.827.733 0 1.327-.37 1.327-.827V54.857ZM301.75 54.857c0-.456-.594-.827-1.327-.827s-1.327.37-1.327.827v35.286c0 .456.594.827 1.327.827s1.327-.37 1.327-.827V54.857ZM290.247 45.485c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v54.03c0 .457.594.827 1.327.827s1.328-.37 1.328-.827v-54.03ZM278.743 22.88c0-.456-.594-.827-1.328-.827-.733 0-1.327.37-1.327.827v99.24c0 .457.594.827 1.327.827.734 0 1.328-.37 1.328-.827V22.88ZM267.239 54.857c0-.456-.594-.827-1.327-.827s-1.328.37-1.328.827v35.286c0 .456.595.827 1.328.827.733 0 1.327-.37 1.327-.827V54.857ZM255.736 45.485c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v54.03c0 .457.594.827 1.327.827s1.328-.37 1.328-.827v-54.03ZM244.232 54.857c0-.456-.594-.827-1.328-.827-.733 0-1.327.37-1.327.827v35.286c0 .456.594.827 1.327.827.734 0 1.328-.37 1.328-.827V54.857ZM232.728 46.036c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v52.928c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V46.036ZM221.224 38.318c0-.457-.594-.828-1.327-.828s-1.327.37-1.327.828v68.365c0 .456.594.827 1.327.827s1.327-.371 1.327-.827V38.318ZM209.721 59.268c0-.457-.594-.827-1.328-.827-.733 0-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827.734 0 1.328-.37 1.328-.827V59.268ZM198.217 62.025c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v20.95c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827v-20.95ZM186.713 52.1c0-.456-.594-.826-1.327-.826s-1.327.37-1.327.827v40.798c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V52.101ZM175.21 59.268c0-.457-.594-.827-1.328-.827-.733 0-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827.734 0 1.328-.37 1.328-.827V59.268ZM163.706 46.036c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v52.928c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V46.036ZM152.202 52.1c0-.456-.594-.826-1.327-.826s-1.327.37-1.327.827v40.798c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V52.101ZM140.699 59.268c0-.457-.594-.827-1.328-.827-.733 0-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827.734 0 1.328-.37 1.328-.827V59.268ZM129.195 62.025c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v20.95c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827v-20.95ZM117.691 40.523c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v63.954c0 .457.594.827 1.327.827s1.327-.37 1.327-.827V40.523ZM106.188 52.1c0-.456-.595-.826-1.328-.826-.733 0-1.327.37-1.327.827v40.798c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V52.101ZM94.684 59.268c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v26.464c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827V59.268ZM83.18 53.755c0-.457-.594-.827-1.327-.827s-1.327.37-1.327.827v37.49c0 .457.594.827 1.327.827s1.327-.37 1.327-.827v-37.49ZM71.677 61.473c0-.456-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v22.054c0 .456.594.827 1.327.827s1.328-.37 1.328-.827V61.473ZM60.173 51.55c0-.457-.594-.828-1.327-.828s-1.328.37-1.328.827v41.902c0 .456.595.827 1.328.827.733 0 1.327-.37 1.327-.827V51.549ZM48.67 61.473c0-.456-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v22.054c0 .456.594.827 1.327.827s1.327-.37 1.327-.827V61.473ZM37.166 65.884c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v13.232c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V65.884ZM25.662 53.755c0-.457-.594-.827-1.327-.827s-1.328.37-1.328.827v37.49c0 .457.595.827 1.328.827.733 0 1.327-.37 1.327-.827v-37.49ZM14.158 61.473c0-.456-.594-.827-1.327-.827s-1.327.37-1.327.827v22.054c0 .456.594.827 1.327.827s1.327-.37 1.327-.827V61.473ZM2.655 59.268c0-.457-.595-.827-1.328-.827-.733 0-1.327.37-1.327.827v26.464c0 .457.594.827 1.327.827s1.328-.37 1.328-.827V59.268Z" fill="#B7AEB7" fill-opacity=".12" /> </svg> </div> <div class="relative mx-auto max-w-screen-2xl px-6 xl:px-16"> <div class="mx-auto max-w-lg text-center lg:max-w-2xl"> <h3 id="testimonials-carousel-label" class="mx-auto max-w-fit bg-gradient-to-r from-[#FF408B] to-[#E66E50] bg-clip-text text-[22px] font-medium text-transparent" > 03 — Testimonials </h3> <h2 class="mt-5 font-display text-4xl font-medium md:text-5xl lg:text-6xl"> What folks are sayin’ about Aaron’s courses </h2> <p class="mt-5 text-lg text-gray-600 lg:text-xl"> Past students and peers from an online community of over 30K followers </p> </div> </div> <div class="mx-auto mt-8 md:mt-16 grid max-w-md md:max-w-2xl lg:max-w-6xl justify-center gap-6 px-6 md:grid-cols-2 lg:grid-cols-3 xl:px-16"> <blockquote class="bg-[#F1FFCD] text-[#808575] justify-self-center rounded p-4 md:flex md:w-full md:max-w-xs md:shrink-0 md:flex-col md:items-start md:rounded-xl md:p-8" > <i class="far fa-comment-alt-lines hidden text-[29px] md:block"></i> <p class="flex-1 text-base font-semibold text-black md:mt-4 md:text-lg lg:text-[22px]/[29px]"> I watched a few videos of this incredibly beneficial series, it’s awesome. You are teaching in a very precise and simple way, just like teaching to kids. </p> <div class="mt-2 flex items-center justify-end gap-2 md:mt-9"> <img class="order-2 h-6 w-6 rounded-full object-cover md:order-1 md:h-12 md:w-12" src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/testimonials/mian.jpg" alt="Mian M Imran Shah" loading="lazy" /> <cite class="font-semibold not-italic md:order-2"> <div class="text-sm leading-none text-black/70 lg:text-base"> Mian M Imran Shah </div> </cite> </div> </blockquote> <blockquote class="bg-[#FFF0DE] text-[#A88761] justify-self-center rounded p-4 md:flex md:w-full md:max-w-xs md:shrink-0 md:flex-col md:items-start md:rounded-xl md:p-8" > <i class="far fa-comment-alt-lines hidden text-[29px] md:block"></i> <p class="flex-1 text-base font-semibold text-black md:mt-4 md:text-lg lg:text-[22px]/[29px]"> Wow, Aaron, you’re a natural at this! Here I am struggling to record videos and watching yours isn’t making that easier! You just set the bar a bit higher for me now! </p> <div class="mt-2 flex items-center justify-end gap-2 md:mt-9"> <img class="order-2 h-6 w-6 rounded-full object-cover md:order-1 md:h-12 md:w-12" src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/testimonials/bert.jpg" alt="Bert De Swaef" loading="lazy" /> <cite class="font-semibold not-italic md:order-2"> <div class="text-sm leading-none text-black/70 lg:text-base"> Bert De Swaef </div> </cite> </div> </blockquote> <blockquote class="bg-[#D7EFFF] text-[#507F9E] justify-self-center rounded p-4 md:flex md:w-full md:max-w-xs md:shrink-0 md:flex-col md:items-start md:rounded-xl md:p-8" > <i class="far fa-comment-alt-lines hidden text-[29px] md:block"></i> <p class="flex-1 text-base font-semibold text-black md:mt-4 md:text-lg lg:text-[22px]/[29px]"> If you've never done a screencast course before, this 100% will be all you need to get going. As someone who has done a few courses before, I'm still finding it full of great tips! </p> <div class="mt-2 flex items-center justify-end gap-2 md:mt-9"> <img class="order-2 h-6 w-6 rounded-full object-cover md:order-1 md:h-12 md:w-12" src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/testimonials/jack.jpg" alt="Jack McDade" loading="lazy" /> <cite class="font-semibold not-italic md:order-2"> <div class="text-sm leading-none text-black/70 lg:text-base"> Jack McDade </div> </cite> </div> </blockquote> <blockquote class="bg-[#FFE0E5] text-[#B06470] justify-self-center rounded p-4 md:flex md:w-full md:max-w-xs md:shrink-0 md:flex-col md:items-start md:rounded-xl md:p-8" > <i class="far fa-comment-alt-lines hidden text-[29px] md:block"></i> <p class="flex-1 text-base font-semibold text-black md:mt-4 md:text-lg lg:text-[22px]/[29px]"> Binged it in one night. LOVED IT, can’t wait for the additional video tear downs. Those really helped highlight optimizations and how to think when setting up my own. </p> <div class="mt-2 flex items-center justify-end gap-2 md:mt-9"> <img class="order-2 h-6 w-6 rounded-full object-cover md:order-1 md:h-12 md:w-12" src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/testimonials/jacob.jpg" alt="Jacob Devore" loading="lazy" /> <cite class="font-semibold not-italic md:order-2"> <div class="text-sm leading-none text-black/70 lg:text-base"> Jacob Devore </div> </cite> </div> </blockquote> <blockquote class="bg-[#E0F6F2] text-[#4BA998] justify-self-center rounded p-4 md:flex md:w-full md:max-w-xs md:shrink-0 md:flex-col md:items-start md:rounded-xl md:p-8" > <i class="far fa-comment-alt-lines hidden text-[29px] md:block"></i> <p class="flex-1 text-base font-semibold text-black md:mt-4 md:text-lg lg:text-[22px]/[29px]"> Not sure how Aaron Francis does it, but everything he works on, he does with a lot of heart and brain. The results are special. So this course is for sure as well! </p> <div class="mt-2 flex items-center justify-end gap-2 md:mt-9"> <img class="order-2 h-6 w-6 rounded-full object-cover md:order-1 md:h-12 md:w-12" src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/testimonials/christoph.jpg" alt="Christoph Rumpel " loading="lazy" /> <cite class="font-semibold not-italic md:order-2"> <div class="text-sm leading-none text-black/70 lg:text-base"> Christoph Rumpel </div> </cite> </div> </blockquote> <blockquote class="bg-[#D7EFFF] text-[#507F9E] justify-self-center rounded p-4 md:flex md:w-full md:max-w-xs md:shrink-0 md:flex-col md:items-start md:rounded-xl md:p-8" > <i class="far fa-comment-alt-lines hidden text-[29px] md:block"></i> <p class="flex-1 text-base font-semibold text-black md:mt-4 md:text-lg lg:text-[22px]/[29px]"> The quality of these videos is truly impressive, and yet, it still feels like Aaron Francis just jumped on a Zoom call to teach me. Very friendly and approachable teaching style. </p> <div class="mt-2 flex items-center justify-end gap-2 md:mt-9"> <img class="order-2 h-6 w-6 rounded-full object-cover md:order-1 md:h-12 md:w-12" src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/testimonials/anthony.jpg" alt="Anthony Clark" loading="lazy" /> <cite class="font-semibold not-italic md:order-2"> <div class="text-sm leading-none text-black/70 lg:text-base"> Anthony Clark </div> </cite> </div> </blockquote> </div> </section> <section id="pricing" class="relative overflow-hidden bg-black py-24 md:py-32 lg:py-40" x-data> <img src="https://picperf.io/https://dqkg3e31kfkmo.cloudfront.net/9490ce55-28fe-4199-a33a-4e1c6a81d497/images/pricing-background.jpg" aria-hidden="true" loading="lazy" class="absolute inset-0 blur-2xl" /> <div class="relative mx-auto max-w-screen-2xl px-6 xl:px-16"> <div class="mx-auto max-w-lg text-center lg:max-w-2xl"> <h3 class="mx-auto max-w-fit bg-gradient-to-r from-[#FF408B] to-[#E66E50] bg-clip-text text-[22px] font-medium text-transparent" > 04 — Buy the Course </h3> <h2 class="mt-5 font-display text-4xl font-medium text-white md:text-5xl lg:text-6xl"> Start your screencasting journey today </h2> <p class="mt-5 text-lg text-gray-300 lg:text-xl"> 100% money back guarantee. </p> </div> <div class="relative -mx-6 mt-16 gap-12 rounded-xl bg-[#FFC8FF]/10 px-8 sm:mx-auto sm:max-w-xl md:mt-20 lg:mt-24 lg:flex lg:max-w-none lg:items-start lg:justify-between lg:py-12" > <div class="px-8 py-12 lg:w-[30%] xl:py-12"> <h3 class="text-xl font-semibold text-white md:text-2xl xl:text-[28px]"> Basic </h3> <div class="flex flex-wrap items-end gap-x-4"> <div class="flex items-start font-medium text-white"> <span class="mt-1 text-xl md:text-2xl xl:mt-2 xl:text-3xl">$</span> <span class="text-5xl xl:text-6xl"> 249 </span> </div> <div> <div class="text-2xl font-medium leading-none text-pink-600 line-through"> $299 </div> <span class="text-gray-300">One-time</span> </div> </div> <button x-on:click.prevent=" $dispatch('show-auth-dialog', { mode: 'register', productId: '45a994cd-2a4c-4565-9555-9f9b551c372b', tagId: 'screencasting:add_to_cart:basic', }) " class="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-[3px] bg-[#FED8FA]/[.12] px-6 py-3 text-center font-semibold text-white transition hover:bg-[#FED8FA]/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 xl:mt-8 xl:py-4 xl:text-lg" > <span>Buy Now</span> <i class="far fa-arrow-right" aria-hidden="true"></i> </button> <ul class="mt-10 space-y-3 text-gray-300"> <li class="flex gap-4"> <i class="far fa-check mt-1" aria-hidden="true"></i> <span>Lifetime access</span> </li> <li class="flex gap-4"> <i class="far fa-check mt-1" aria-hidden="true"></i> <span>6 course modules: Content Planning, Equipment, Recording, Editing, and Publishing</span> </li> </ul> </div> <div class="pointer-events-none flex items-start justify-center lg:absolute lg:inset-0 lg:-mt-8 lg:px-6 xl:px-16" > <div class="pointer-events-auto w-full rounded-xl bg-white p-12 lg:w-[40%]"> <h3 class="text-xl font-semibold md:text-2xl xl:text-[28px]"> Complete </h3> <div class="flex flex-wrap items-end gap-x-4"> <div class="flex items-start font-medium"> <span class="mt-1 text-xl md:text-2xl xl:mt-2 xl:text-3xl">$</span> <span class="text-5xl xl:text-6xl"> 299 </span> </div> <div> <div class="text-2xl font-medium leading-none text-pink-600 line-through"> $329 </div> <span class="text-gray-600">One-time</span> </div> </div> <button x-on:click.prevent=" $dispatch('show-auth-dialog', { mode: 'register', productId: '5658acc0-49e6-49ed-bef0-bce6ddf211dc', tagId: 'screencasting:add_to_cart:complete', }) " class="relative mt-6 inline-flex w-full items-center justify-center gap-2 rounded-[3px] bg-gradient-to-r from-[#FF408B] to-[#FF714E] px-6 py-3 text-center font-semibold text-white transition after:absolute after:inset-0 after:rounded-[3px] after:transition hover:after:bg-[#FFEFF3]/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white xl:mt-8 xl:py-4 xl:text-lg" > <span>Buy Now</span> <i class="far fa-arrow-right" aria-hidden="true"></i> </button> <ul class="mt-6 space-y-2 text-gray-600"> <li class="flex gap-4"> <i class="far fa-check mt-1 text-pink-600" aria-hidden="true"></i> <span>Lifetime access</span> </li> <li class="flex gap-4"> <div class="my-2 flex w-full items-center"> <div class="h-px grow border-t border-gray-300/50"></div> <div class="mx-2 font-bold text-gray-600"> 6 basic course modules </div> <div class="h-px grow border-t border-gray-300/50"></div> </div> </li> <li class="flex gap-4"> <i class="far fa-check mt-1 text-pink-600" aria-hidden="true"></i> <span>Strategies for crafting a compelling <strong class="text-gray-900">content plan</strong></span> </li> <li class="flex gap-4"> <i class="far fa-check mt-1 text-pink-600" aria-hidden="true"></i> <span>A breakdown of the most important <strong class="text-gray-900">equipment</strong> you need - and what you can skip</span> </li> <li class="flex gap-4"> <i class="far fa-check mt-1 text-pink-600" aria-hidden="true"></i> <span>Techniques for painless <strong class="text-gray-900">recording</strong> sessions</span> </li> <li class="flex gap-4"> <i class="far fa-check mt-1 text-pink-600" aria-hidden="true"></i> <span>An <strong class="text-gray-900">editing</strong> philosophy and little-known tips to get polished results, quickly</span> </li> <li class="flex gap-4"> <i class="far fa-check mt-1 text-pink-600" aria-hidden="true"></i> <span>Methods for <strong class="text-gray-900">publishing</strong> your screencasts and getting your content in front of your audience</span> </li> <li class="flex gap-4"> <div class="my-2 flex w-full items-center"> <div class="h-px grow border-t border-gray-300/50"></div> <div class="mx-2 font-bold text-gray-600"> 2 premium course modules </div> <div class="h-px grow border-t border-gray-300/50"></div> </div> </li> <li class="flex gap-4"> <i class="far fa-check mt-1 text-pink-600" aria-hidden="true"></i> <span>Content and philosophy guidelines for growing your <strong class="text-gray-900">social media</strong> following via video</span> </li> <li class="flex gap-4"> <i class="far fa-check mt-1 text-pink-600" aria-hidden="true"></i> <span>See the course techniques applied in an ever-growing library of <strong class="text-gray-900">teardowns</strong>. Learn from Aaron's reviews real-world screencasts.</span> </li> </ul> </div> </div> <div class="px-8 py-12 lg:w-[30%] xl:py-12"> <h3 class="text-xl font-semibold text-white md:text-2xl xl:text-[28px]"> Hands-on </h3> <div class="flex flex-wrap items-end gap-x-4"> <div class="flex items-start font-medium text-white"> <span class="mt-1 text-xl md:text-2xl xl:mt-2 xl:text-3xl">$</span> <span class="text-5xl xl:text-6xl"> 1,000 </span> </div> <span class="text-gray-300">One-time</span> </div> <button x-on:click.prevent=" $dispatch('show-auth-dialog', { mode: 'register', productId: '5637b1db-269f-4bdd-82ed-99ffec9a6740', tagId: 'screencasting:add_to_cart:hands_on', }) " class="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-[3px] bg-[#FED8FA]/[.12] px-6 py-3 text-center font-semibold text-white transition hover:bg-[#FED8FA]/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 xl:mt-8 xl:py-4 xl:text-lg" > <span>Buy Now</span> <i class="far fa-arrow-right" aria-hidden="true"></i> </button> <ul class="mt-10 space-y-3 text-gray-300"> <li class="flex gap-4"> <i class="far fa-check mt-1" aria-hidden="true"></i> <span>Lifetime Access</span> </li> <li class="flex gap-4"> <i class="far fa-check mt-1" aria-hidden="true"></i> <span>All 8 Complete course modules including how to get your video seen on social media + real-life teardowns</span> </li> <li class="flex gap-4"> <i class="far fa-check mt-1" aria-hidden="true"></i> <span>40-minute, private 1-on-1 consultation with Aaron to get personalized guidance and advice on your videos</span> </li> </ul> <div class="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-[3px] bg-pink-600/10 px-6 py-3.5 text-center text-sm font-semibold text-gray-100 xl:mt-8" > <i class="far fa-clock"></i> <span>ONLY 30 SPOTS LEFT</span> </div> </div> </div> <p class="mx-auto mt-20 max-w-3xl text-center text-lg text-gray-300/60 lg:mt-48"> Want to buy the course for your team? <a href="mailto:hello@screencasting.com" class="rounded-sm underline transition hover:text-pink-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > Contact us </a> for team pricing! </p> </div> </section> <section id="faq" class="relative bg-[#F6F5F6] py-24 md:py-32 lg:py-40"> <div class="relative mx-auto max-w-screen-2xl px-6 xl:px-16"> <div class="mx-auto max-w-lg text-center lg:max-w-2xl"> <h3 id="testimonials-carousel-label" class="mx-auto max-w-fit bg-gradient-to-r from-[#FF408B] to-[#E66E50] bg-clip-text text-[22px] font-medium text-transparent" > 05 — Frequently Asked </h3> <h2 class="mt-5 font-display text-4xl font-medium md:text-5xl lg:text-6xl">Got a few questions?</h2> </div> <div x-data class="mx-auto mt-16 w-full max-w-3xl space-y-4 lg:mt-20"> <div x-disclosure class="rounded-xl bg-white p-2"> <button x-disclosure:button class="flex w-full items-center justify-between rounded-lg p-4 text-left text-xl font-semibold transition hover:text-black/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 lg:text-2xl" > <span>What is the screencasting.com course?</span> <i x-show="$disclosure.isOpen" x-cloak aria-hidden="true" class="fal fa-minus ml-4" ></i> <i x-show="! $disclosure.isOpen" aria-hidden="true" class="fal fa-plus ml-4" ></i> </button> <div x-disclosure:panel x-collapse x-cloak> <div class="px-4 pb-4 text-lg text-gray-600"> <p> Created by <a class="rounded-sm text-pink-600 underline transition hover:text-pink-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" href="https://twitter.com/aarondfrancis" target="_blank" > Aaron Francis </a> , screencasting.com is a course designed to educate content creators, developers, and aspiring teachers on pro techniques for making high quality screencasts. </p> <p class="mt-3"> It's an 8 module course with 50+ videos that provided detailed breakdowns, instructions and tutorials for making screencasts. Learners get everything from planning course content and equipment setups to pro techniques for recording, editing, and publishing. </p> </div> </div> </div> <div x-disclosure class="rounded-xl bg-white p-2"> <button x-disclosure:button class="flex w-full items-center justify-between rounded-lg p-4 text-left text-xl font-semibold transition hover:text-black/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 lg:text-2xl" > <span>Why is this course unique?</span> <i x-show="$disclosure.isOpen" x-cloak aria-hidden="true" class="fal fa-minus ml-4" ></i> <i x-show="! $disclosure.isOpen" aria-hidden="true" class="fal fa-plus ml-4" ></i> </button> <div x-disclosure:panel x-collapse x-cloak> <div class="px-4 pb-4 text-lg text-gray-600"> <p> Aaron cares about helping content creators and developers to overcome the roadblock of sharing their content. He's here to empower others to make great-looking screencasts with ease and speed. </p> <p class="mt-3"> The course breaks down little-known tips and tricks most people miss, that are <strong class="font-semibold">very easy</strong> and make a <strong class="font-semibold">very high-quality</strong> end result. </p> <p class="mt-3"> screencasting.com gives you pro insight on the exact steps you need to make the screencasting process easier, faster and much more rewarding. </p> </div> </div> </div> <div x-disclosure class="rounded-xl bg-white p-2"> <button x-disclosure:button class="flex w-full items-center justify-between rounded-lg p-4 text-left text-xl font-semibold transition hover:text-black/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 lg:text-2xl" > <span>What are the main course benefits?</span> <i x-show="$disclosure.isOpen" x-cloak aria-hidden="true" class="fal fa-minus ml-4" ></i> <i x-show="! $disclosure.isOpen" aria-hidden="true" class="fal fa-plus ml-4" ></i> </button> <div x-disclosure:panel x-collapse x-cloak> <div class="px-4 pb-4 text-lg text-gray-600"> <p>When you take the course, you'll learn:</p> <ul class="mt-3 list-disc pl-5"> <li>Little-known, easy-to-do techniques to make very high-quality screencasts</li> <li>Tips and tricks that save hours in making screencasts</li> <li>How to optimally plan and organize your content for an efficient production</li> <li>The exact settings you need to calibrate for a smooth recording process</li> <li>Methods for making video editing faster and easier</li> <li>How to save money in choosing the equipment you need - (and avoiding what you don’t need)</li> <li> How to get your content off your computer and out into the world where it can help others and increase your opportunities </li> </ul> </div> </div> </div> <div x-disclosure class="rounded-xl bg-white p-2"> <button x-disclosure:button class="flex w-full items-center justify-between rounded-lg p-4 text-left text-xl font-semibold transition hover:text-black/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 lg:text-2xl" > <span>Who is the course for?</span> <i x-show="$disclosure.isOpen" x-cloak aria-hidden="true" class="fal fa-minus ml-4" ></i> <i x-show="! $disclosure.isOpen" aria-hidden="true" class="fal fa-plus ml-4" ></i> </button> <div x-disclosure:panel x-collapse x-cloak> <div class="px-4 pb-4 text-lg text-gray-600"> <p>This course is ideal for:</p> <ul class="mt-3 list-disc pl-5"> <li>Anyone who wants to be seen as a credible expert when they create videos</li> <li>Creators, developers, or other subject matter experts who want to share content online</li> <li>People who think video editing is too hard</li> <li>Anyone who is ready to create extra income and cares about the quality of their offerings</li> </ul> </div> </div> </div> <div x-disclosure class="rounded-xl bg-white p-2"> <button x-disclosure:button class="flex w-full items-center justify-between rounded-lg p-4 text-left text-xl font-semibold transition hover:text-black/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 lg:text-2xl" > <span>What software is used in the course?</span> <i x-show="$disclosure.isOpen" x-cloak aria-hidden="true" class="fal fa-minus ml-4" ></i> <i x-show="! $disclosure.isOpen" aria-hidden="true" class="fal fa-plus ml-4" ></i> </button> <div x-disclosure:panel x-collapse x-cloak> <div class="px-4 pb-4 text-lg text-gray-600"> <p> The editing software used in the course is <a class="rounded-sm text-pink-600 underline transition hover:text-pink-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" target="_blank" href="https://www.telestream.net/screenflow/store.asp" > ScreenFlow </a> . This course is <em>not</em> a ScreenFlow tutorial, great effort has gone into teaching the philosophy and workflow side of editing, as opposed to editor-specific features. ScreenFlow was chosen because it is so simple. Any editor that you use likely has all of ScreenFlow's features, and more. </p> <p class="mt-2"> If you buy the course and decide it's not useful because of the software demonstrated, we'll happily offer you a 100% refund, no questions asked. </p> </div> </div> </div> <div x-disclosure class="rounded-xl bg-white p-2"> <button x-disclosure:button class="flex w-full items-center justify-between rounded-lg p-4 text-left text-xl font-semibold transition hover:text-black/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 lg:text-2xl" > <span>Is there a free trial available?</span> <i x-show="$disclosure.isOpen" x-cloak aria-hidden="true" class="fal fa-minus ml-4" ></i> <i x-show="! $disclosure.isOpen" aria-hidden="true" class="fal fa-plus ml-4" ></i> </button> <div x-disclosure:panel x-collapse x-cloak> <div class="px-4 pb-4 text-lg text-gray-600"> <p> There are several free videos, but no free trial. If you aren’t fully satisfied with the course, just ask for your money back – no problem. </p> </div> </div> </div> <div x-disclosure class="rounded-xl bg-white p-2"> <button x-disclosure:button class="flex w-full items-center justify-between rounded-lg p-4 text-left text-xl font-semibold transition hover:text-black/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 lg:text-2xl" > <span>How long is the course?</span> <i x-show="$disclosure.isOpen" x-cloak aria-hidden="true" class="fal fa-minus ml-4" ></i> <i x-show="! $disclosure.isOpen" aria-hidden="true" class="fal fa-plus ml-4" ></i> </button> <div x-disclosure:panel x-collapse x-cloak> <div class="px-4 pb-4 text-lg text-gray-600"> <p>The course is comprised of 8 modules, 67 videos, and 4.5 hours of lessons.</p> </div> </div> </div> <div x-disclosure class="rounded-xl bg-white p-2"> <button x-disclosure:button class="flex w-full items-center justify-between rounded-lg p-4 text-left text-xl font-semibold transition hover:text-black/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 lg:text-2xl" > <span>How long do I have access to the course?</span> <i x-show="$disclosure.isOpen" x-cloak aria-hidden="true" class="fal fa-minus ml-4" ></i> <i x-show="! $disclosure.isOpen" aria-hidden="true" class="fal fa-plus ml-4" ></i> </button> <div x-disclosure:panel x-collapse x-cloak> <div class="px-4 pb-4 text-lg text-gray-600"> <p>Forever, as long as it’s online.</p> </div> </div> </div> <div x-disclosure class="rounded-xl bg-white p-2"> <button x-disclosure:button class="flex w-full items-center justify-between rounded-lg p-4 text-left text-xl font-semibold transition hover:text-black/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 lg:text-2xl" > <span>Is there a money back guarantee?</span> <i x-show="$disclosure.isOpen" x-cloak aria-hidden="true" class="fal fa-minus ml-4" ></i> <i x-show="! $disclosure.isOpen" aria-hidden="true" class="fal fa-plus ml-4" ></i> </button> <div x-disclosure:panel x-collapse x-cloak> <div class="px-4 pb-4 text-lg text-gray-600"> <p> If, for any reason, you find yourself less than fully satisfied with the course, you may request a refund at any time. </p> </div> </div> </div> <div x-disclosure class="rounded-xl bg-white p-2"> <button x-disclosure:button class="flex w-full items-center justify-between rounded-lg p-4 text-left text-xl font-semibold transition hover:text-black/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 lg:text-2xl" > <span>Can I sign up to be an affiliate?</span> <i x-show="$disclosure.isOpen" x-cloak aria-hidden="true" class="fal fa-minus ml-4" ></i> <i x-show="! $disclosure.isOpen" aria-hidden="true" class="fal fa-plus ml-4" ></i> </button> <div x-disclosure:panel x-collapse x-cloak> <div class="px-4 pb-4 text-lg text-gray-600"> <p> Yes! Visit <a href="/affiliates" class="rounded-sm text-pink-600 underline transition hover:text-pink-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > our affiliates page </a> to learn more about our affiliate program. </p> </div> </div> </div> </div> <p class="mt-16 text-center text-lg text-gray-600 lg:mt-20"> Didn’t find an answer? <a href="mailto:hello@screencasting.com" class="rounded-sm text-pink-800 underline transition hover:text-pink-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60" > Send me an email </a> and I’ll get ya fixed up. </p> </div> </section> <footer class="bg-black py-8 lg:py-12"> <div class="mx-auto max-w-xl divide-y divide-gray-300/20 px-6 lg:max-w-screen-2xl xl:px-16"> <div class="flex flex-wrap items-center justify-between gap-8 py-16 lg:flex-nowrap lg:py-20"> <div class="max-w-2xl"> <h3 class="font-display text-[34px]/[39px] font-medium text-white"> Start making engaging, head-turning screencasts today </h3> </div> <div class="flex flex-col items-start justify-center lg:items-end"> <a class="relative rounded-[3px] bg-gradient-to-r from-[#FF408B] to-[#FF714E] px-6 py-3 font-semibold inline-flex items-center justify-center gap-2 text-center text-white whitespace-nowrap transition focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black after:absolute after:inset-0 hover:after:bg-[#FFEFF3]/20 after:transition after:rounded-[3px]" href="/#intro" x-on:click.prevent="scrollToId($el.href)" > <span>Level up your screencasting today</span> <i class="far fa-arrow-right" aria-hidden="true"></i> </a> </div> </div> <div class="flex flex-wrap items-end justify-between gap-8 pb-8 pt-16 lg:pt-20"> <div> <a href="/" class="inline-flex items-center gap-4 rounded-sm text-xl font-medium text-white transition hover:text-white/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black sm:text-[22px]" > <svg class="w-10 sm:w-12" viewBox="0 0 41 26" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M28.996 20.312a.588.588 0 0 1-.256-.485v-4.712c0-.472.529-.752.92-.486l5.346 3.649a.882.882 0 0 0 1.38-.729V7.647a.882.882 0 0 0-1.38-.729l-5.347 3.648a.588.588 0 0 1-.92-.486V7.435c0-.902-.73-1.633-1.632-1.633H6.609c-.902 0-1.633.731-1.633 1.633v1.086c0 .902.73 1.633 1.633 1.633h14.566c.904 0 1.728.239 2.473.717a5.23 5.23 0 0 1 1.829 1.935c.474.788.711 1.672.711 2.652v5.039c0 .955-.237 1.84-.711 2.651a5.228 5.228 0 0 1-1.829 1.935 4.486 4.486 0 0 1-2.473.717H1.72A1.72 1.72 0 0 1 0 24.08v-2.367c0-.937.759-1.695 1.694-1.695h17.544c.902 0 1.633-.73 1.633-1.633v-1.08c0-.903-.731-1.634-1.633-1.634H5.013a4.654 4.654 0 0 1-2.506-.716 5.312 5.312 0 0 1-1.83-1.9A5.437 5.437 0 0 1 0 10.368V5.303c0-.98.226-1.863.678-2.651A5.23 5.23 0 0 1 2.507.717 4.654 4.654 0 0 1 5.013 0h22.633c.903 0 1.727.239 2.472.717a5.23 5.23 0 0 1 1.829 1.935c.118.196.221.398.31.606l4.007-2.74c1.952-1.334 4.6.063 4.6 2.428v19.909c0 2.364-2.648 3.761-4.6 2.427l-7.268-4.97Z" fill="#fff" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M28.996 20.312a.588.588 0 0 1-.256-.485v-4.712c0-.472.529-.752.92-.486l5.346 3.649a.882.882 0 0 0 1.38-.729V7.647a.882.882 0 0 0-1.38-.729l-5.347 3.648a.588.588 0 0 1-.92-.486V7.435c0-.902-.73-1.633-1.632-1.633H6.609c-.902 0-1.633.731-1.633 1.633v1.086c0 .902.73 1.633 1.633 1.633h14.566c.904 0 1.728.239 2.473.717a5.23 5.23 0 0 1 1.829 1.935c.474.788.711 1.672.711 2.652v5.039c0 .955-.237 1.84-.711 2.651a5.228 5.228 0 0 1-1.829 1.935 4.486 4.486 0 0 1-2.473.717H1.72A1.72 1.72 0 0 1 0 24.08v-2.367c0-.937.759-1.695 1.694-1.695h17.544c.902 0 1.633-.73 1.633-1.633v-1.08c0-.903-.731-1.634-1.633-1.634H5.013a4.654 4.654 0 0 1-2.506-.716 5.312 5.312 0 0 1-1.83-1.9A5.437 5.437 0 0 1 0 10.368V5.303c0-.98.226-1.863.678-2.651A5.23 5.23 0 0 1 2.507.717 4.654 4.654 0 0 1 5.013 0h22.633c.903 0 1.727.239 2.472.717a5.23 5.23 0 0 1 1.829 1.935c.118.196.221.398.31.606l4.007-2.74c1.952-1.334 4.6.063 4.6 2.428v19.909c0 2.364-2.648 3.761-4.6 2.427l-7.268-4.97Z" fill="url(#paint0_linear_309_404)" /> <defs> <linearGradient id="paint0_linear_309_404" x1="-8.048" y1="14.184" x2="43.982" y2="14.184" gradientUnits="userSpaceOnUse" > <stop stop-color="#FF408B" /> <stop offset="1" stop-color="#FF714E" /> </linearGradient> </defs> </svg> <span>screencasting.com</span> </a> <nav class="mt-5 flex flex-wrap items-center justify-start gap-x-6 gap-y-3"> <a href="/#intro" class="rounded-sm text-lg text-gray-300 transition hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black" > Intro </a> <a href="/#preview" class="rounded-sm text-lg text-gray-300 transition hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black" > Course Preview </a> <a href="/#testimonials" class="rounded-sm text-lg text-gray-300 transition hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black" > Testimonials </a> <a href="/#pricing" class="rounded-sm text-lg text-gray-300 transition hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black" > Pricing </a> <a href="/#faq" class="rounded-sm text-lg text-gray-300 transition hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black" > FAQ </a> <a href="https://twitter.com/aarondfrancis" target="_blank" class="inline-flex items-center gap-2 rounded-sm text-lg text-gray-300 transition hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black" > <i class="fab fa-twitter" aria-hidden="true"></i> <span>Twitter</span> </a> <div> <button x-on:click.prevent="$dispatch('show-auth-dialog', { mode: 'login' })" class="rounded-sm text-lg text-gray-300 transition hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black" > Sign in </button> </div> </nav> </div> <div class="sm:shrink-0"> <p class="text-lg text-gray-300">© 2025 screencasting.com. All rights reserved.</p> </div> </div> </div> <div class="mx-auto flex max-w-xl flex-wrap items-end justify-between gap-8 px-6 pb-16 pt-8 lg:max-w-screen-2xl lg:pb-20 xl:px-16" > <p class="text-lg text-gray-300/60"> Site designed by <a href="https://mikemcalister.com/?utm_campaign=screencasting&utm_source=screencasting.com" target="_blank" class="rounded-sm transition hover:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black" > Mike </a> and built by <a href="https://designtotailwind.com/?utm_campaign=screencasting&utm_source=screencasting.com" target="_blank" class="rounded-sm transition hover:text-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black" > Design to Tailwind </a> </p> </div> </footer> <div wire:id="e0DhWPe7WIhJw7niGL11" wire:initial-data="{"fingerprint":{"id":"e0DhWPe7WIhJw7niGL11","name":"auth-dialog","locale":"en","path":"\/","method":"GET","v":"acj"},"effects":{"listeners":["redirect-to-checkout"]},"serverMemo":{"children":[],"errors":[],"htmlHash":"a0f88f49","data":{"mode":"register","product_id":null,"tag_id":null,"redirect_url":null,"email":null,"password":null},"dataMeta":[],"checksum":"fb45a3708f12ea22fa641dd15a7dc7bd2c4283991d3576e9bf6bba25e4d422e1"}}" x-data="{ open: false, mode: window.Livewire.find('e0DhWPe7WIhJw7niGL11').entangle('mode'), productId: window.Livewire.find('e0DhWPe7WIhJw7niGL11').entangle('product_id'), tagId: window.Livewire.find('e0DhWPe7WIhJw7niGL11').entangle('tag_id'), redirectUrl: window.Livewire.find('e0DhWPe7WIhJw7niGL11').entangle('redirect_url'), show(event) { this.open = true; this.mode = event.detail.mode; this.productId = event.detail.productId; this.tagId = event.detail.tagId; this.redirectUrl = event.detail.redirectUrl; }, }" x-on:show-auth-dialog.window="show" > <div x-dialog x-model="open" x-cloak class="fixed inset-0 z-10 overflow-y-auto"> <div x-dialog:overlay x-transition.opacity class="fixed inset-0 bg-black/50"></div> <div class="relative flex min-h-screen items-center justify-center p-4"> <div x-dialog:panel x-transition class="relative w-full max-w-xl overflow-y-auto rounded-xl bg-white"> <div class="absolute right-0 top-0 pr-6 pt-6"> <button x-on:click.prevent="$dialog.close()" type="button" class="inline-flex h-8 w-8 items-center justify-center gap-2 rounded-[3px] bg-gray-100 text-center text-xl font-medium text-gray-600 transition hover:text-black focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white" > <i class="fal fa-xmark" aria-hidden="true"></i> <span class="sr-only">Close</span> </button> </div> <form wire:submit.prevent="attempt" class="p-12"> <h2 x-dialog:title class="font-display text-3xl font-medium"> Sign Up </h2> <p class="mt-1 text-lg text-gray-600"> Sign up to get access to the course </p> <div class="mt-8 space-y-4"> <div> <label class="block font-medium text-sm text-gray-600" for="email" > Email </label> <input class="border-gray-300/50 focus:border-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 rounded-[3px] mt-1 block w-full" id="email" type="text" wire:model.defer="email" autocomplete="username" /> </div> <div> <label class="block font-medium text-sm text-gray-600" for="password" > Password </label> <input class="border-gray-300/50 focus:border-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 rounded-[3px] mt-1 block w-full" id="password" type="password" wire:model.defer="password" autocomplete="new-password" /> </div> </div> <div class="mt-12 flex flex-wrap items-center gap-4"> <button type="submit" class="relative rounded-[3px] bg-gradient-to-r from-[#FF408B] to-[#FF714E] px-6 py-3 font-semibold inline-flex items-center justify-center gap-2 text-center text-white whitespace-nowrap transition focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-600/60 focus-visible:ring-offset-2 focus-visible:ring-offset-black after:absolute after:inset-0 hover:after:bg-[#FFEFF3]/20 after:transition after:rounded-[3px] focus-visible:!ring-offset-white" > Sign Up </button> <button class="font-medium text-gray-600" wire:click.prevent="toggleMode" type="button"> Already have an account? </button> </div> </form> </div> </div> </div> </div>  </div> <script src="/livewire/livewire.js?id=90730a3b0e7144480175" data-turbo-eval="false" data-turbolinks-eval="false" ></script><script data-turbo-eval="false" data-turbolinks-eval="false" >window.livewire = new Livewire();window.Livewire = window.livewire;window.livewire_app_url = '';window.livewire_token = '5vc9grXvTCJnpS9vpKPklGKGDbjwhtZIvHtAzRQh';window.deferLoadingAlpine = function (callback) {window.addEventListener('livewire:load', function () {callback();});};let started = false;window.addEventListener('alpine:initializing', function () {if (! started) {window.livewire.start();started = true;}});document.addEventListener("DOMContentLoaded", function () {if (! started) {window.livewire.start();started = true;}});</script> </body> </html>

CINXE.COM

screencasting.com by Aaron Francis