🚀 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 - [ Ссылка ]
🔗 Live Demo - [ Ссылка ]
🔗 GitHub repo - [ Ссылка ]

- - -

📍 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

свернуть