Learn how to build
modern user interfaces
for the web

Lesson 125:15

Learn the basics of state-based animation with Framer Motion.

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.

Lesson 734:19

Use measured height to resize a panel with dynamic content.

Lesson 839:47

Animate an infinite monthly calendar using direction-aware dynamic variants.

Lesson 14:55

Use Prisma to fetch data directly inside of a server component.

Lesson 27:26

Use query params to paginate the list of users.

Lesson 316:17

Use Prisma's count function to build out the pagination area.

Lesson 4

Use a Client Component to respond to a user typing in the search field.

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 320:44

Set up Prisma and SQLite to persist our dynamic data.

Lesson 415:12

Improve our form's UX with validations, default values, and a styled pending state.

Lesson 58:22

Use our homepage's loader to render dynamic entries from our backend.

Lesson 624:09

Map and reduce our dynamic entries into weekly groups using the date-fns library.

Lesson 7

Create a reusable form component that can be used for both adding and editing entries.

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 85:08

Conditionally apply classes to target different application states.

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 149:01

Use nested router segments to build an active channel link.

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.