Creating a layered card with HTML & CSS

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

⌚ 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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[FlorinPop]

The CSS GOAT in action! 🎉

Glad to see you gave our platform a go!

We just started and have big plans to help developers learn in a fun way! 😁

[KevinPowell]

If you tried to sign up and got a rate limiting error, I've talked with Florin and they found the issue and looks like it's been solved, so you can try again now 🙂

[CirTap]

Using 'ex' and 'ch' for things like this pill /badge inline padding gives you nice typographic symmetry without guestimating 'rem' fractions or fiddling with .25 steps.
A simple start with `padding-inline:1ch` will always look good for any typeface in the element's context font size.

[tiloiam]

Excellent use of subgrid, would love to see more examples of it's use.

[sharakpl]

Grid was an overkill for this. Simple margin and padding would make this work perfectly.

[santicanog_]

90deg 🚀 I didn't know most of the content here, but the grid just seems to fits pretty well with any layout 💜

[mahadevovnl]

Bonus points for not using Tailwind! 💜

[stevecrabtree]

It was fun to see your workflow. You are the GOAT

[sergeplaski]

Subgrid not being supported by Edge is a bummer. Opera too, but that's not as important. Unfortunately, in real world we must stick to a universal solution. Otherwise, it is a great feature, just need to wait for a few years to begin using it in production environments🙂 Kevin, thanks a ton for the great content in the channel!

[lunapineapple]

Thanks for all the content Kevin! Been going through heaps of it and am falling in love with css! <3

[MdRasel-qbtx]

Lots of love sir for giving so much time to work We will get work like this again for our learning

[brucewayne]

Hey Kevin, for the start chatting div, why did you use grid over flex?

[Dorchwoods]

Awesome video, love hearing your thought process as you work through UIs. I had a question for you though, I noticed you always use rem values for padding, and even grid-template-column values. Isn't there issues with browser zoom and rem units on padding in particular? Zooming in causes those paddings to grow which can break page layouts. Curious to hear your thoughts on that. I've been taught to use rem on fonts only. Thanks for all the excellent content!!!

[GR_BackingTracks]

I do enjoy a "i haven't planned this out" demo...

[cheddadmohammed]

This tutorial makes me more aware of the usage of the grid. Thank you for sharing this. Can I use flex to make the div over float another div without using absolute and relative?

[ferbragga]

I like how the gradient from the challenge is the same gradient behind yourself 😅

[groovebird]

Keep it simple. I would use negative margins for the container at the bottom

[ambyehigimetor]

What i would want to know is how to achieve this same effect without using subgrid

[skkabetu]

seeing the avatar change every time was quite entertaining

[daviddiazfernandez]

Where can we find the assets used on the daily challenges? I just signed up and is painful to screenshot and upload somewhere the used images. It would be good to have the svgs or image url available.