🔥Sign up for iCodeThis for free daily challenges, or go for the full shebang and use the coupon code KEVIN (valid until the end of the June) for an extra 10% off their current early-bird pricing: https://icodethis.com/?ref=kevin (affiliate link, so if you do go for a PRO account, you also help support this channel 🙂) My friend Florin Pop recently launched a new site with daily UI challenges for you to practice your HTML, CSS, and JavaScript and I thought it would be fun to take on one of the challenges, plus it was a good excuse to play around a little bit with subgrid, which I hadn’t used in awhile. 🔗 Links ✅ iCodeThis: https://icodethis.com/?ref=kevin (affiliate link) ✅ Windows Power Toys: https://learn.microsoft.com/en-us/windows/powertoys/ ⌚ Timestamps 00:00 - Introduction 00:28 - The challenge that I’m going to be trying 02:00 - Writing the HTML 07:00 - Generic CSS to set the stage 07:40 - Setting up the main grid 10:30 - Using subgrid for the overlap 13:30 - Styling things up to match the challenge 26:46 - Styling the status 35:50 - Styling the button 38:45 - Finishing touches 39:30 - More info about iCodeThis #css -- Come hang out with other dev's in my Discord Community 💬 https://discord.gg/nTYCvrK 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! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: null 💖 Support me on Patreon: https://www.patreon.com/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: https://twitter.com/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!