


Learn how to build
modern user interfaces
for the web
High-quality videos, a private Discord server, and enough reference code to help you make the web what you always dreamed it could be.
Welcome to Build UI.
Lesson 216:43
Add animation to unmounting elements using the versatile AnimatePresence component.
Lesson 318:54
Use scroll-based animation to smoothly grow and shrink a fixed header.
Lesson 417:08
Add a fading nav and a blurred background effect by extracting a reusable Hook.
Lesson 514:00
Learn how to use the `x` shorthand property to smoothly animate an image container.
Lesson 622:04
Use an animated aspect ratio to create a navigation bar inspired by iOS Photos.
Data fetching with React Server Components
See how this exciting new primitive simplifies your data-fetching code.
My first Remix app
Learn the essentials of this popular React framework by building a personal work journal app.
Lesson 112:31
Create a brand new Remix project and add tooling for TypeScript, Tailwind and Prettier.
Lesson 222:49
Build the frontend form and define an action for our first user flow.
Lesson 415:12
Improve our form's UX with validations, default values, and a styled pending state.
Lesson 624:09
Map and reduce our dynamic entries into weekly groups using the date-fns library.
Lesson 7
Editing entries
Create a reusable form component that can be used for both adding and editing entries.
Tailwind Mastery
Learn Tailwind CSS from scratch by building a pixel-perfect Discord clone.
Lesson 19:08
Get acquainted with Tailwind's utility-first approach by building a custom message component.
Lesson 27:47
Use Tailwind's Flexbox utilities to make an application layout with fixed and flexible panels.
Lesson 34:59
Choose which Flexbox panels should scroll when their contents overflow their container.
Lesson 43:32
Learn best practices for overriding and extending Tailwind's default colors with your brand’s palette.
Lesson 56:44
Override the default typeface used by Tailwind with an imported font.
Lesson 65:49
See how to maintain a utility-first workflow when styling icons by working with inline SVG elements.
Lesson 74:29
Generate a one-off corner transition using the Just-In-Time engine.
Lesson 911:23
Use groups to style child elements based on an ancestor's pseudostate.
Lesson 1010:05
See how a reusable component removes duplicate classes without the need for a CSS architecture.
Lesson 117:17
Customize Tailwind's shadows to recreate Discord's floating header.
Lesson 127:17
Learn how to use spacing and group utilities to style a list of dynamic items.
Lesson 1312:35
Map over JSON data to dynamically build up the channel list.
Lesson 157:28
Style a channel's unread state using a simple pattern to improve readability.
Lesson 164:55
Use React state and Tailwind transitions to animate a collapsed category's icon.
Lesson 178:25
Use the truncate utility to control which panel grows or shrinks based on the available space.
Lesson 186:01
Learn how to work with @tailwindcss/forms to recreate Discord's search box.
Lesson 197:03
Extract two versions of our component from Lesson 1 to render each channel's messages.
Lesson 203:21
Round out the app by replacing the remaining static text and links with dynamic data.
Lesson 217:07
Use Tailwind's mobile-first responsive utilities to customize the interface on small screens.
4 months ago15:47
See how to make truly reusable UI components with forwardRef and prop forwarding.
5 months ago16:37
Learn how to use `react-hooks-global-state` to maintain ephemeral application state.
5 months ago26:30
Use the screen width to seed some React state in a way that's robust to server-side rendering.
Watch us on



Buy a lifetime membership
Get all current and future premium Build UI courses, forever.
We create courses for developers obsessed with pixel-perfect details and modern user interface engineering.
If you've ever cracked open the devtools to inspect Stripe's hero section, implemented a live buffered timeline like Twitter, or recreated your favorite iOS animation in React, Build UI was made for you.
Watch everything, forever.
What you'll get when you join
Full access to all Build UI videos
Get full access to all of our current and future premium video content.
Private Discord
Ask questions and get answers from Sam, Ryan and other pro members.
Video summaries with code snippets
Easily reference videos with text summaries and copyable code snippets.
Source code
View the source code for every video right on GitHub.
Invoices and receipts
Get reimbursed from your employer for becoming a better coder!
Meet the team
Hey! We're Sam Selikoff and Ryan Toronto, and together we've been teaching frontend development for over eight years through our podcast, in-person trainings and conference talks, videos on Egghead and EmberMap, and more recently on our YouTube channels.
Check out our existing resources if you're hungry for more frontend content!


Frontend First Podcast
Egghead
EmberMap
Sam's YouTube
Ryan's YouTube

