Teaching you the craft of frontend
AI builds what's easy. Frontend.FYI teaches you the craft of frontend to build what's unforgettable.
Also on YouTube
Free tutorials and interactive code playgrounds
![Video cover image of video: Finally Understanding The Usefulness Of CSS Subgrid In Just 10 Minutes](/video-images/css-subgrid.webp)
![Video cover image of video: Animating a CSS Grid template to create a case carousel](/video-images/animating-css-grid-layout.webp)
![Video cover image of video: Can we Make A CSS Only Infinite Logo Marquee With ZERO Repeating Logos?](/video-images/css-logo-marquee.webp)
![Video cover image of video: Making a CSS Only Infinite Text Marquee](/video-images/css-text-marquee.webp)
![Video cover image of video: Combining scroll-driven animations and SVG path animations to rebuild Apple's pencil draw animation](/video-images/svg-paths-scroll-driven-animations.webp)
![Video cover image of video: The Only And Easy Way To Push That Footer Down With CSS](/video-images/css-push-down-footer.webp)
![Video cover image of video: 3 New CSS Features Making Life So Much Easier](/video-images/popover-starging-style.webp)
![Video cover image of video: Step-by-Step Guide: Creating a Foldable Map with Motion for React](/video-images/foldable-map.webp)
![Video cover image of video: Auto-hiding Sticky Navigation With Motion for React](/video-images/sticky-navigation.webp)
![Video cover image of video: Making a frosted glass effect with CSS](/video-images/frost-effect.webp)
![Video cover image of video: How I Rebuild This Apple TV+ Page With Motion for React And TailwindCSS](/video-images/apple-tv-rebuild.webp)
![Video cover image of video: I Made my Own Picture-in-Picture player](/video-images/pip-player.webp)
![Video cover image of video: Rebuilding Opal's Amazing Scroll Animations With Modern CSS Techniques](/video-images/opal-tadpole-rebuild.webp)
![Video cover image of video: Recreating Vercel's Smooth Navigation Animation With CSS Only](/video-images/recreating-vercel-nav-animation.webp)
![Video cover image of video: What Google Does With ThreeJS, We Can Do With CSS ONLY!](/video-images/3d-card-animation.webp)
![Video cover image of video: Bending the Rules of CSS View Transitions - Animating a Mega Menu](/video-images/bending-the-rules-of-view-transitions.webp)
![Video cover image of video: The ONLY Proper Way to Make Article Layouts With CSS](/video-images/css-grid-article-layout.webp)
![Video cover image of video: Using CSS Perspective To Create a 3D Card Tilt Animation In Minutes](/video-images/css-perspective.webp)
![Video cover image of video: Awesome Storytelling By Animating Text With Motion for React](/video-images/staggered-text.webp)
![Video cover image of video: WHY is Radix Themes Build This Way.. CSS Cascade Layers to the rescue!](/video-images/radix-themes.webp)
![Video cover image of video: So !important to know — CSS Cascade Layers are awesome!](/video-images/css-cascade-layers.webp)
![Video cover image of video: CSS Scroll-Driven Animations — We Don't Need Any JS!](/video-images/css-scroll-driven-animations.webp)
![Video cover image of video: Building a Drag & Drop kanban board with view transitions](/video-images/kanban-board-view-transitions.webp)
![Video cover image of video: CSS Logical Properties: Forget About Left and Right](/video-images/css-logical-properties.webp)
![Video cover image of video: CSS Masks and Scroll Animations with Motion for React](/video-images/css-masks.webp)
![Video cover image of video: We can FINALLY animate gradients with CSS!](/video-images/animated-gradients-with-css.webp)
![Video cover image of video: CSS container queries — it was worth the long wait!](/video-images/css-container-queries.webp)
![Video cover image of video: A tooltip animation that's so simple, but SO satisfying](/video-images/animated-chart-tooltip.webp)
![Video cover image of video: Recreating Amie.so animations with Motion for React](/video-images/recreating-amie-so-animations-part2.webp)
![Video cover image of video: Don't waste your time building custom dialogs](/video-images/html-dialog-element.webp)
Motion for React Course
Learn everything about my secret weapon for smooth animations.
44+ lessons
6+ hours of content
16+ exercises
More soon
Crafting beautiful experiences with Motion for React
The right animations breathe life into web pages, while over-the-top ones can be a distraction. In this course, I will teach you the perfect balance, diving deep into the world of meaningful animations.
Frontend.FYI
PRO
Join PRO Today ![Frontend.FYI PRO](/_image?href=%2F_astro%2Fcourse-platform-2024.6heWqrS6.webp&w=3770&h=2748&f=avif)
![Frontend.FYI PRO](/_image?href=%2F_astro%2Fcourse-platform-playground.C_wF4F-O.webp&w=4050&h=2396&f=avif)
![Frontend.FYI PRO](/_image?href=%2F_astro%2Fdiscord-large.D7xkEKnu.png&w=1624&h=1056&f=avif)