Create a horizontal media scroller with CSS

>> YOUR LINK HERE: ___ http://youtube.com/watch?v=3yfswsnD2sw

Horizontal scrolling components are becoming more and more common, so let's look at the CSS behind them! • 💻 The starting code: https://codepen.io/kevinpowell/pen/NW... • 💻 The finished version: https://codepen.io/kevinpowell/pen/Ex... • • 🔗 Links • ✅ Replay with Adam Argyle that I mentioned: / 1277849387 • ✅ Adam's GUI challenge media scroller: https://web.dev/building-a-media-scro... • ✅ Give Adam a follow on Twitter: / argyleink • ✅ Open Props: https://open-props.style/ • ✅ Lea Verou's article on locally scoped custom properties: https://lea.verou.me/2021/10/custom-p... • ✅ MDN on scroll snapping: https://developer.mozilla.org/en-US/d... • ✅ More info on flex vs grid: • Flexbox or grid - How to decide? • ✅ Customize the scrollbar: • Create custom scrollbars using CSS • • ⌚ Timestamps • 00:00 - Introduction • 01:25 - The HTML and what we're starting with • 02:51 - Creating the horizontal scrolling component • 08:42 - Styling the individual items • 12:09 - Improved locally scoped custom props • 15:21 - Adding scroll snapping • 20:43 - Making scroll groups • • #css • • -- • • Come hang out with other dev's in my Discord Community • 💬 / discord • • Keep up to date with everything I'm up to • ✉ https://www.kevinpowell.co/newsletter • • Come hang out with me live every Monday on Twitch! • 📺 / kevinpowellcss • • --- • • Help support my channel • 👨‍🎓 Get a course: https://www.kevinpowell.co/courses • 👕 Buy a shirt: https://teespring.com/stores/making-t... • 💖 Support me on Patreon: / kevinpowell • • --- • • My editor: VS Code - https://code.visualstudio.com/ • • --- • • I'm on some other places on the internet too! • • If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. • • Twitter: / kevinjpowell • Codepen: https://codepen.io/kevinpowell/ • Github: https://github.com/kevin-powell • • --- • • And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

#############################

New on site