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.
Learn this popular React framework by building and deploying your own Work Journal.
Create a brand new Remix project and add tooling for TypeScript, Tailwind and Prettier.
Improve our form's UX with validations, default values, and a styled pending state.
Map and reduce our dynamic entries into weekly groups using the date-fns library.
Refactor our form component so it can be used to both create and edit entries.
Learn how progressive enhancement works in Remix by making a form to delete entries.
Let admins sign in by adding a login route that creates a session cookie.
Use an Error Boundary to provide better feedback to users when they encounter an exception.
Use the return value from our login action to show validation errors to the user.
Give our journal a facelift on smaller screens using Tailwind and some UI design best practices.
See how this exciting new primitive simplifies your data-fetching code.
Create a Client Component that re-renders the users table whenever a user types in the search field.
Refactor our URL logic to maintain all parameter values using URLSearchParams.
Use a custom Suspense boundary to instantly render the static parts of a page.
Use a React Transition to render a spinner while a Server Component is updating.
Add beautiful animations to your React apps using Framer Motion.
Learn Tailwind CSS from scratch by building a pixel-perfect Discord clone.
Get acquainted with Tailwind's utility-first approach by building a custom message component.
Use Tailwind's Flexbox utilities to make an application layout with fixed and flexible panels.
Choose which Flexbox panels should scroll when their contents overflow their container.
Learn best practices for overriding and extending Tailwind's default colors with your brand’s palette.
See how to maintain a utility-first workflow when styling icons by working with inline SVG elements.
See how a reusable component removes duplicate classes without the need for a CSS architecture.
Learn how to use spacing and group utilities to style a list of dynamic items.
Style a channel's unread state using a simple pattern to improve readability.
Use React state and Tailwind transitions to animate a collapsed category's icon.
Use the truncate utility to control which panel grows or shrinks based on the available space.
Learn how to work with @tailwindcss/forms to recreate Discord's search box.
Extract two versions of our component from Lesson 1 to render each channel's messages.
Round out the app by replacing the remaining static text and links with dynamic data.
See how to make truly reusable UI components with forwardRef and prop forwarding.
Learn how to use `react-hooks-global-state` to maintain ephemeral application state.
Watch us on
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!