Reproduce Popular Web Components
This series is all about recreating the look and feel of popular or compelling web components that you might find around the web. From cool menu transitions, subtle UI interactions, or more complex animations, we'll break it all down and recreate it from scratch.
This should give you a solid understanding of how these effects and interactions work under the hood. Ready to get started?
Series episodes
Stripe Follow-Along Menu (2)
Setup the Menu and Transitions
19m 24sBuild a Stripe-style menu with smooth follow-along transitions using vanilla HTML, CSS, and JS—learn setup and animation basics step-by-step.
Implement the Follow-Along Effect
26m 18sCreate a smooth follow-along effect: start with width/height transitions, then refactor to transforms for more performant, fluid animations.
Event List (2)
Reproduce the Event Table Layout
18m 31sRecreate a clean, Quakecon-style event table with Vue and Tailwind, build an accessible, skimmable event list that helps users find events fast.
Modals and Tabs
24m 35sExtract event components and use Headless UI to build styled, accessible modals and tabs for clean, reusable UI.
