Just spent my Sunday night binge-watching videos from @_buildui and dang, this is really top-quality stuff. Even if you have good understanding about some topics for sure you'll learn new tricks. 💯
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.
Over 3,000 developers have taken our courses
Our material is designed to empower and inspire – but don't take our word for it!
Saw @samselikoff and @ryantotweets launched a $149 lifetime pricing option for @_buildui and immediately grabbed myself an account 💪 Super underrated pricing model for content businesses in my opinion — going to do a whole podcast episode on it soon. buildui.com
oh wow buildui.com by @samselikoff looks pretty great, love the UI detail in the course screenshots
Saw @samselikoff and @ryantotweets launched a $149 lifetime pricing option for @_buildui and immediately grabbed myself an account 💪 Super underrated pricing model for content businesses in my opinion — going to do a whole podcast episode on it soon. buildui.com
Just spent my Sunday night binge-watching videos from @_buildui and dang, this is really top-quality stuff. Even if you have good understanding about some topics for sure you'll learn new tricks. 💯
oh wow buildui.com by @samselikoff looks pretty great, love the UI detail in the course screenshots
My friend @samselikoff is creating world-class UI videos at Build UI. If you're even remotely interested in highly polished, sweat-the-small-stuff frontends then you should check them out. 👍 No subscription - just one lifetime purchase. buildui.com
Just spent my Sunday night binge-watching videos from @_buildui and dang, this is really top-quality stuff. Even if you have good understanding about some topics for sure you'll learn new tricks. 💯
Saw @samselikoff and @ryantotweets launched a $149 lifetime pricing option for @_buildui and immediately grabbed myself an account 💪 Super underrated pricing model for content businesses in my opinion — going to do a whole podcast episode on it soon. buildui.com
oh wow buildui.com by @samselikoff looks pretty great, love the UI detail in the course screenshots
My friend @samselikoff is creating world-class UI videos at Build UI. If you're even remotely interested in highly polished, sweat-the-small-stuff frontends then you should check them out. 👍 No subscription - just one lifetime purchase. buildui.com
Dive deep into foundational topics
Our courses don't just tell you to copy and paste code. We focus on the why behind the code, showing you how to build apps like a seasoned developer.
Advanced Radix UI
Build rich UI components — without doing any of the boring work.
In this course you'll learn how to work with Radix's primitives by building four components with completely custom designs, interactions, and animations. You'll see how Radix stays out of the way of your styling code so that your components can match the design of your application down to the pixel, while ensuring they still support keyboard navigation, work on any device, and follow expected accessibility patterns.
Taught by
Sam Selikoff
Content
35 Chapters
Run time
2 hours 13 minutes
Ship an app with Remix
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.
Build the frontend form and define an action for our first user flow.
Set up Prisma and SQLite to persist our dynamic data.
Improve our form's UX with validations, default values, and a styled pending state.
Use our homepage's loader to render dynamic entries from our backend.
Map and reduce our dynamic entries into weekly groups using the date-fns library.
Define a new dynamic route that loads an entry based on the URL.
Build a form and action that lets users edit entries.
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.
Let admins sign out by creating a form that destroys the session.
Use the session to hide admin-only user flows from public guests.
Learn how to secure our backend data from unauthorized requests.
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 UI a facelift on smaller screens using Tailwind CSS and some digital design best practices.
Finish up our redesign by adapting the UI for larger screens.
Deploy your brand new Work Journal to Fly.io so you can share it with the world!
Data fetching with React Server Components
See how this exciting new primitive simplifies your data-fetching code.
Use Prisma to fetch data directly inside of a Server Component.
Use query params to paginate the list of users.
Use Prisma's count function to build out the pagination area.
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.
Render an instant loading screen while a Server Component fetches data.
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.
Wait until the user finishes typing before querying the database.
Learn the basics of state-based animation with Framer Motion.
Add animation to unmounting elements using the versatile AnimatePresence component.
Use scroll-based animation to smoothly grow and shrink a fixed header.
Add a fading nav and a blurred background effect by extracting a reusable Hook.
Learn how to use the `x` shorthand property to smoothly animate an image container.
Use an animated aspect ratio to create a navigation bar inspired by iOS Photos.
Use measured height to resize a panel with dynamic content.
Tailwind Mastery
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.
Override the default typeface used by Tailwind with an imported font.
See how to maintain a utility-first workflow when styling icons by working with inline SVG elements.
Generate a one-off corner transition using the Just-In-Time engine.
Conditionally apply classes to target different application states.
Use groups to style child elements based on an ancestor's pseudostate.
See how a reusable component removes duplicate classes without the need for a CSS architecture.
Customize Tailwind's shadows to recreate Discord's floating header.
Learn how to use spacing and group utilities to style a list of dynamic items.
Map over JSON data to dynamically build up the channel list.
Use nested router segments to build an active channel link.
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.
Use Tailwind's mobile-first responsive utilities to customize the interface on small screens.
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.
Use the screen width to seed some React state in a way that's robust to server-side rendering.
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!
Frontend First Podcast
Egghead
EmberMap
Sam's YouTube
Ryan's YouTube