Create a Horizontal Media Scroller With CSS

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Learn how to create a horizontal media scroller using CSS in this 26-minute tutorial video. Explore techniques for implementing horizontal scrolling components, styling individual items, and utilizing locally scoped custom properties. Master the art of adding scroll snapping and creating scroll groups to enhance user experience. Follow along with provided code examples and gain insights from related resources on media scroller components, custom properties, and scroll snapping. Dive into advanced CSS concepts and improve your web design skills with practical guidance on building this increasingly common UI element.

Syllabus

- Introduction
- The HTML and what we're starting with
- Creating the horizontal scrolling component
- Styling the individual items
- Improved locally scoped custom props
- Adding scroll snapping
- Making scroll groups