Creating a layered card with HTML & CSS
46.7 هزار بار بازدید -
پارسال
-
🔥Sign up for iCodeThis for
🔥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/win...
⌚ 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: 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!
📺 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: 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: 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!
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/win...
⌚ 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: 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!
📺 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: 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: 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!
پارسال
در تاریخ 1402/03/25 منتشر شده
است.
46,712
بـار بازدید شده