Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

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
Play Series

Series Episodes

  1. Stripe Follow-Along Menu (2)

    1. 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.

    2. 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.
  2. Image Pins (1)

    1. Image Pin While Scrolling

      In this next chapter, we'll take a look at a simple image pin effect while scrolling. We make use of position fixed as well as intersection observer to re-create this effect.
  3. Event List (2)

    1. 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.

Continue Learning

Frontend Mentor Challenge with Laravel thumbnail

Frontend Mentor Challenge with Laravel

With Simon Vrachliotis

In this series, we take a Frontend Mentor challenge and build it using Laravel and Tailwind CSS. Rather than chasing pixel-perfect replication, the focus is on pragmatic Laravel and backend logic. Along the way, we explore carts, session state, semantic markup, and UI polish.

  • 27 Episodes
Debugging Real-World Production Nightmares thumbnail

Debugging Real-World Production Nightmares

With Jeremy McPeak

Production bugs don't announce themselves politely. In this series, we confront ten nightmare scenarios using NightmareMart, an intentionally broken e-commerce app, demonstrating how to debug calmly and methodically when everything is on fire.

  • 10 Episodes
Motion For The Web thumbnail

Motion For The Web

With Simon Vrachliotis

Master the art of modern web animation, from subtle CSS transitions to full-blown JavaScript motion systems. This series starts with the fundamentals of smooth, accessible CSS motion, then builds through keyframes, scroll-linked animations, SVG techniques, and the Web Animations API, finishing with powerhouse libraries like Motion.dev, AnimeJS, and GSAP.

  • 43 Episodes
How to Build a Dev Team thumbnail

How to Build a Dev Team

With Matt Stauffer

Resources for learning to code are everywhere. The only hard part is choosing one. But when it comes to learning how to lead a development team, quality resources are incredibly scarce. This course fills that gap. It contains all of the lessons I learned while building the dev team at Tighten, a Laravel consultancy known for producing great work, but with an even better reputation as a fantastic place to work.

  • 12 Episodes
BaseCode Reloaded thumbnail

BaseCode Reloaded

With Jason McCreary

Years and years of hard-fought coding breakthroughs, distilled into sixteen essential lessons.In this course, I'll show you how to write code for humans, not just machines. Together, we’ll review powerful techniques, like naming, structuring, removing clutter, and spotting patterns. These aren’t abstract theories from a dusty book. They’re practical and proven habits that you can apply to your codebase right now. If you’ve ever opened an old file and struggled to understand your own code, this course was made just for you.

  • 16 Episodes