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?
Progress
Series Info
- Episodes
- 5
- Run Time
- 1h 54m
- Difficulty
- Intermediate
- Last Updated
- Aug 25, 2021
- Version
- Latest
Series Episodes
- Stripe Follow-Along Menu (2)
Setup the Menu and Transitions
To get started, we'll take a look at recreating the Stripe menu effect with its slick follow-along effect. We'll begin by building a standard menu with transitions in vanilla HTML, CSS and JS.Implement the Follow-Along Effect
Let’s continue on and implement the follow-along effect. We'll begin with width and height transitions, but later in the video, we'll refactor to exclusively make use of transforms.
- Image Pins (1)
- Event List (2)
Reproduce the Event Table Layout
Let's now figure out how to re-create the event list that is similar to the one found on the Quakecon website. Their table layout is very easy to scan which enables the user to quickly find the events they are interested in. We'll use both Vue and Tailwind to accomplish this effect.Modals and Tabs
To finish up, we'll next extract our events to their own components. Then we'll leverage Headless UI to implement the modals and tabs and give them their own unique style.
