Build an Animated Website with SvelteKit, GSAP & Prismic - Full Course 2024

Video Description

🚀 Build a dark, modern, animated website with SvelteKit, GSAP, Prismic, Tailwind, and TypeScript! In this in depth course we make a trendy, dark and modern website in the same style as Linear, AuthKit, Raycast, Clerk, and many more! You'll learn how to use SvelteKit, the ultra fast Svelte metaframework. Prismic, a CMS that gives you a Headless Page Builder. We'll use GSAP to add wonderful animations to our site, both on page load and on scroll. We'll also use Tailwind CSS to style the super-polished website. We'll get bootstrapped with a minimal starter to set up SvelteKit and Prismic for us, and I'll walk you through everything you need to know. At the end of this course you'll have built and deployed a great SaaS marketing website that you can put in your portfolio or customize for clients, 🔗 Docs and Resources - https://prismic.notion.site/Course-Resources-Dark-Modern-Website-f1963068872c47ccad97820240e5b7e7 🔗 Live Demo - https://repeat-ai.vercel.app/ 🔗 GitHub repo - https://github.com/a-trost/repeat-ai - - - 📍 Chapters: 00:00:00 - SvelteKit Full Course Intro 00:01:41 - Project Overview with SvelteKit & Prismic 00:09:45 - Notion Doc / Help and troubleshooting 00:11:26 - Getting Started with Prismic 00:14:25 - Getting started with VSCode 00:18:42 - Homepage 00:29:56 - Adding Tailwind CSS 00:34:59 - Installing local font 00:41:45 - Setting up footer 01:07:03 - Tailwind CSS VSCode extension 01:07:41 - Creating the Header 01:54:00 - Styling the bento box 02:20:40 - Showcase Section 03:03:17 - Case Studies Slice 04:00:47 - Integrations Slice 04:29:50 - Call to action Slice 04:37:00 - Assembling in the Page Builder 04:57:40 - Deploying on Vercel 05:10:45 - Animate the Hero with GSAP 05:54:26 - Animate the Integrations section 06:16:57 - Accessibility and Final Touch --- #sveltekit #gsap #svelte #sveltekit #prismic