Learn Nuxt, GSAP, Tailwind, and Prismic to build a dark, mordern, sleek website - Full Course 2025

🪁 Build a dark, modern, animated website with Nuxt, 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 Nuxt, the intuitive Vue framework, and the new feature coming with Nuxt 4. 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 before we host it with ease on NuxtHub, a cloud hosting platform tailored for scaling Nuxt websites.

We'll get bootstrapped with a minimal starter to set up Nuxt 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.

---

🔗 Course Resources: https://prismic.io/courses/nuxt-dark-modern-website
🔗 Final repository: https://github.com/prismicio-community/nuxt-starter-prismic-glideai
🔗 Live Site: https://prismic-demo-glideai.nuxt.dev

---

📍 Chapters
00:00:00 : Intro
00:01:18 : Project overview : Glide.ai Motion
00:03:32 : Course resources and Figma walkthrough
00:06:48 : Getting started with Prismic and Nuxt 4 overview
00:10:34 : Setting up TailwindCSS
00:14:28 : Installing Nuxt Fonts
00:19:06 : Introduction to Slice Machine
00:20:44 : Our first custom type : Settings
00:26:07 : Adding Settings content on Prismic
00:42:21 : Creating our site header and footer
01:35:58 : Our first page type : Pages
01:41:05 : Introduction to slices : Hero slice
01:47:41 : Templating our Hero slice
02:50:42 : Pushing slices to Prismic and adding content
02:56:42 : Groups in slices with the Bento slice
03:00:27 : Templating our Bento slice
03:22:28 : Variations in slices with the Showcase slice
03:27:55 : Templating our Showcase slice
03:58:27 : Content relationships with the Case Studies slice
04:07:10 : Templating our Case Studies slice
04:51:09 : Animation withing slices with Integrations slice
05:09:34 : Templating our Integrations slice
05:10:41 : Let's add one more slice : the Call to Action slice
05:19:12 : Templating our Call to Action slice
05:29:12 : Polishing the Case Studies pages
05:30:24 : Adding content on Prismic
05:34:54 : Hosting our source code on GitHub
05:37:12 : Deploying our site with NuxtHub
05:44:27 : Outro - Congratulations!

Видео Learn Nuxt, GSAP, Tailwind, and Prismic to build a dark, mordern, sleek website - Full Course 2025 канала Prismic