Advanced frontend web development tutorials.

Welcome to Built With Code! You'll find tutorials to create and build your next web project, leveraging frameworks like Framer Motion, Next.js, and Tailwind.

This scroll animation feels alive (Motion + Lenis)
9:30
This scroll animation feels alive (Motion + Lenis)
This Grid Animation Is So Satisfying (powered by Motion)
7:41
This Grid Animation Is So Satisfying (powered by Motion)
Page transitions in the Next.js App Router (View Transition + Motion)
8:33
Page transitions in the Next.js App Router (View Transition + Motion)
Making a better textbox with Framer Motion
6:54
Making a better textbox with Framer Motion
My new favorite tool for coding animations
4:07
My new favorite tool for coding animations
Making a better timer with Framer Motion
7:06
Making a better timer with Framer Motion
Next-level list filters using Framer Motion layout animations
8:52
Next-level list filters using Framer Motion layout animations
3 mistakes to avoid on your responsive website
3:39
3 mistakes to avoid on your responsive website
Drag and drop in Framer Motion: Guide for beginners
5:37
Drag and drop in Framer Motion: Guide for beginners
Create a Responsive and Animated Navbar with Framer Motion
13:18
Create a Responsive and Animated Navbar with Framer Motion
Horizontal smooth scroll with Lenis
10:14
Horizontal smooth scroll with Lenis
CSS Border Animations with Framer Motion in 7 Minutes
7:21
CSS Border Animations with Framer Motion in 7 Minutes
Scrolling Table of Contents with Framer Motion
21:33
Scrolling Table of Contents with Framer Motion
Lenis smooth scroll in under 4 minutes
3:29
Lenis smooth scroll in under 4 minutes
Floating Card Animations with CSS and Framer Motion
13:53
Floating Card Animations with CSS and Framer Motion
Animated Number Counter with Framer Motion
3:36
Animated Number Counter with Framer Motion
Build the Figma floating toolbar with Framer Motion
8:59
Build the Figma floating toolbar with Framer Motion
Apple’s favorite text scroll animation
9:48
Apple’s favorite text scroll animation
Glass material with TailwindCSS in under 3 minutes
2:44
Glass material with TailwindCSS in under 3 minutes
Apple-style product cards with Framer Motion
19:46
Apple-style product cards with Framer Motion
Blur + Zoom Card Parallax with Framer Motion
6:53
Blur + Zoom Card Parallax with Framer Motion
Animated bottom tray with Framer Motion layout animations
14:22
Animated bottom tray with Framer Motion layout animations
Block editor in Next.js using BlockNote and UploadThing
23:37
Block editor in Next.js using BlockNote and UploadThing
Animated custom scrollbar with Framer Motion Layout Animations
24:00
Animated custom scrollbar with Framer Motion Layout Animations
Signup form validation using Shadcn + Zod
18:36
Signup form validation using Shadcn + Zod
Landing page with full-page navigation menu using Next.js and Framer Motion
38:51
Landing page with full-page navigation menu using Next.js and Framer Motion
Add keyboard superpowers to Next.js apps
16:10
Add keyboard superpowers to Next.js apps
Custom themes with TailwindCSS in under 9 minutes
8:40
Custom themes with TailwindCSS in under 9 minutes
Infinite scrolling carousel with hover effects using Framer Motion
22:40
Infinite scrolling carousel with hover effects using Framer Motion
Landing page with Parallax & Smooth Scroll using Lenis and Framer Motion
23:23
Landing page with Parallax & Smooth Scroll using Lenis and Framer Motion