Kevin Powell | Creating a layered card with HTML & CSS @KevinPowell | Uploaded June 2023 | Updated October 2024, 40 seconds ago.
🔥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: 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: icodethis.com/?ref=kevin (affiliate link)
✅ Windows Power Toys: 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
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: patreon.com/kevinpowell
---
My editor: VS Code - 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: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
🔥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: 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: icodethis.com/?ref=kevin (affiliate link)
✅ Windows Power Toys: 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
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: patreon.com/kevinpowell
---
My editor: VS Code - 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: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: 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!
