Creating a layered card with HTML & CSS

[@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! 😁

[@CirTap]

...and make a little money on the go with the freemium model 😂 So altruistic.

[@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 🙂

[@FlorinPop]

All fixed! Everyone can signup now, hehe 😁

[@jh1154244]

​@@FlorinPopquestion....is 24 hours all you get? I ask because I work, and it wouldn't be enough time for me😩

[@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.

[@andrewrea2799]

Would love to see better browser support for subgrid

[@stevecrabtree9141]

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

[@sharakpl]

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

[@sideshowlol]

Yup. I think this a good example of how to over-complicate a straightforward column layout. I think KP should go this again and leave his grid shoes at the door.

[@clevermissfox]

He did say at the beginning he’s been wanting to play with subgrid. Of course it could have been done several different ways but choosing to use grid was a direct result of wanting to work with subgrid.

[@santicanog_]

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

[@lunapineapple]

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

[@mahadevovnl]

Bonus points for not using Tailwind! 💜

[@mahadevovnl]

​@@jeymen It isn't. It's one big anti-pattern and breaks all good conventions when it comes to DRY (don't repeat yourself), and having reviewed thousands of portfolios and job applicants (including for FAANG companies), I've noticed a trend: 1. Tailwind-lovers tend to not understand CSS. "But it maps to CSS 1:1!!" you might say, sure. Then since I know fuel goes boom, rocket goes weeeeee, now I'm a rocket scientist? TW-lovers don't know CSS, otherwise they would use CSS. 2. Tailwind-lovers tend to spam `div` and not much else far more often than others. 3. Tailwind-lovers tend to not know or understand accessibility and why it matters. 4. Tailwind-lovers tend to also be good software developers, but for some reason are perfectly fine spamming 20+ or even 40+ utility classes onto a SINGLE line of code. Great way to confuse git when you change one utility class. 5. You forego specificity and the "C" part of CSS entirely. 6. You have to use weird-as-hell syntax for grouped pseudo selectors (like :hover). And there's so much more. Tailwind is used by people because they don't understand CSS, and then they claim "but it's practically CSS", not knowing that... they really don't know what they're talking about.

[@shahaed]

Yes but general tutorials should be basic css. It should translate to tailwind seamlessly

[@parkourbee2]

​@@shahaed To be fair, translating from tailwind to css is just as easy as translating from css to tailwind.

[@krazak2863]

@@parkourbee2 the point is learning how to do it in pure css is much more valuable in terms of learning. Development and efficiency wise, then you can use tailwind and others. But if you’re trying to learn, pure css is the way to go.

[@shahaed]

@@parkourbee2 doesn’t make sense to learn tailwind first since it’s a subset of css. Plus there’s many properties not available in tailwind and using arbitrary values would be confusing in a video like this if you didn’t understand that actually css

[@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!

[@MdRasel-qb4tx]

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

[@GR_BackingTracks]

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

[@cheddadmohammed7861]

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?

[@bn5055]

You could use transform:translate to move the lower card up over the upper one yes.

[@cheddadmohammed7861]

Thank you, I'll try it when I am on my laptop.❤

[@skkabetu]

seeing the avatar change every time was quite entertaining

[@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!!!

[@KevinPowell]

Any unit will grow when the page is zoomed in, other than viewport units, and to me, that's a bigger problem

[@groovebird812]

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

[@brucewayne4357]

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

[@KendrickSimphao]

I used position absolute

[@ferbragga]

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

[@ambyehigimetor1667]

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

[@UnknownPlayersRo]

Nice Video Kevin, can you make a video explaining the oklch color space? ❤

[@code_with_rasta]

Thank you❤🔥🔥

[@mahmoudkhamis7381]

Hi Kevin, Great tutorial as usual ♥ is there another solution without using (grid-template-row: subgrid) it works only with Safari 😕

[@ripcorddesign]

Yes, you can just create two boxes (divs), then slide the 2nd box up on top using translate. Give the 2nd box a negative margin bottom to bring up the space left below.

[@arturosan007]

THANK YOU! I thought I was losing my mind. I was following along and got stuck at 11:15 because my code below (using subgrid) wasn't working: .welcome { background: lightblue; grid-column: 1 / -1; grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; grid-template-columns: subgrid; }

[@mahmoudkhamis7381]

@@arturosan007 never mind bro, you can always check if your browser support this feature or not by in 2 ways 1- in CSS use @support( prop : value ) 2- can I use website

[@ZigaKrasovec]

Search history at 5:04 👀

[@tomaszgora4353]

Me: This is a fun tutorial to follow. Also me: Just looked up browser support for subgrid....

[@zdenekopolzer822]

It will be cool if you make a video about html email template

[@gfxbh1715]

Css is now support for nested elements like sass, make a video on this topic

[@snoowwe]

hi Kevin, is there a specific reason why you prefer to do grid-column: 2/3 instead of grid-column: 2? Same thing for grid-row 2/4, why not do grid-row: 2 span 2? I'm super rusty on display: grid since I tend to default to flexbox so this was a great video for me

[@KevinPowell]

Just preference and being more specific, no real benefit compared to the examples you gave

[@GalaxCFX]

Is there a site like this for more beginner type people? Asking for a friend..

[@professionalshahbaz8655]

CSS nesting is here. Please make a video on pure CSS nesting

[@KevinPowell]

Was going to say I'm waiting for better browser support, but with it in the lastest version of Safari I guess it is time 🙂

[@modernkennnern]

@@KevinPowell Just checked caniuse, and FF115 has support behind a flag supposedly as well! :)

[@TheThirdWorldCitizen]

Pseudo element for the status content is clever, but it’s not useful in the real world. What happens if you want to localize your project? You’ll have to go back and change the code. Great content!

[@raphaelsanchez1235]

What tool Kevin use for this video ??

[@rajaulislamratul4736]

Do you use eye care monitors or the regular ones?

[@bodepeter2309]

Subgrid isn't working on chrome

[@daviddiazfernandez637]

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.

[@Innodeals]

What should I write in JavaScript when I want my website to be in desktop mode automatically when I open my website in a mobile phone?

[@KevinPowell]

You could just leave out the I guess... not sure why you'd want to do that though!

[@mukleshossen751]

Bro if we use flexbox then what happened?

[@Jackie_Chan-w2m]

What vs code theme are you using? 🤤

[@KevinPowell]

-Atom One Dark- Edit: I use that in VS Code... This has it's own editor and I have no idea what it is, lol

[@jaspreetmaan121]

​@@KevinPowelllooks like cobalt 2

[@stevelam1315]

For simplicity, instead of subgrid, why can't I create an empty div between .welcome and .start-chatting divs?

[@KevinPowell]

I'd much rather a pseudo element than an empty div, of you want to go that route. If it's a one-off for fun, it doesn't matter obviously, but if I was going to have a card like this on a site, using an empty div becomes a pattern you'd very quickly regret.

[@stevelam1315]

@@KevinPowell I can add a class name as "blank-empty" and attributes as aria-hidden='true', data-status='important!' to the empty div. Will it cover up all the downfalls of using empty divs in HTML body?

[@arturosan007]

@@KevinPowell I was following along with a codesandbox but I got stuck at 11:15 because my code didn't achieve the same results/behavior as yours. I'm using Edge as my browser to code within codesandbox. Could that be why it wasn't working? .welcome { background: lightblue; grid-column: 1 / -1; grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; grid-template-columns: subgrid; }

[@dibel3669]

​@@arturosan007some things in this code are not supported by Edge, you will have more luck viewing the site in chrome.

[@Tony.Nguyen137]

I cant find some older videos of you??

[@KevinPowell]

They should all be there. Which ones are you looking for?

[@Tony.Nguyen137]

@@KevinPowell the one with hover box shadow trick from tobiasahlin, and a front end challenge with the bank card

[@Way_Of_The_Light]

If anyone needs some front end challenges that would be used in a SAAS app let me know. I could use some front end help for my website and I don’t have money to hire someone 😅

[@ciuf_ciuf]

5:03

[@metcaelfe]

Oh hey

[@outplay3759]

your background color is almost the same :d

[@Lets_Code25]

Wow u viewed my project 2 times😁

[@Take-the-Ticket]

Plot twist: iCodeThis is an AI corporations can rent, that learns from user input. The corporation sends in a picture of what they want, the user trains the AI, and pretty soon POOF bye bye Kevin 🤣 And poof all of us...

[@FlorinPop]

How did you know? 🤣🤣🤣

[@tanmaypanadi1414]

someone should take this up with the ai overlords

[@kennethguinto4862]

i kid you not someone watching this be like How can i make this more complicated with React or Vue or Sverlte lol .

[@ModifiedMusicYT]

I think Kevin broke the site, all I get when trying to sign up is `Email rate limit exceeded`

[@KevinPowell]

Oh no 😅

[@mahmoud-bakheet]

subgrid 😂

[@KevinPowell]

What's wrong with subgrid? Chrome just announced intent to ship, and it's already in FF and Safari

[@alexpanteli3651]

​@@KevinPowell it's enough to start experimenting with it but not using it on a production site yet

[@agilkerimov]

The first comment

[@ApprendreSansNecessite]

I felt genuinely depressed when I saw this. I hate grid and what people do with it. I know you did this because you wanted a use case for sub-grid but this is so complex and over-engineered for what it is! You just need to have a padding-bottom on .welcome and a negative margin-top on .start-chatting to make the two overlap. It is that simple. The rest is just using variables to keep the white spaces consistent. End of the story.

[@justingallant1988]

I am a beginner and I am always looking for ways to improve and I have learned some helpful things from you...but in the interest of full transparency, this video actually made me very discouraged. Such a simple design seems so involved with so many lines of code. To a seasoned developer and for someone who loves this, a tutorial like this might be exciting and rich. But after watching this, it had the exact opposite of what you seem to aim for in your opening statements; to reduce stress. I understand that some layouts cannot avoid complexity, but I found myself saying, if this is what it takes to achieve this basic layout, I dont think this is for me. I am not looking for encouragement or anything like that. Just wanted to provide some feedback.

[@Lernschau]

granted, this might not have been the simplest solution to the problem, but if this already puts you off, then you will probably never make it thru coding a full blown website with literally hundreds of these "simple little designs" that all need to fit together to not blow up. Plus coding interactivity and form handling. That's also what separates pixel pushers and print design from screen and interaction design.

[@chrisstucker1813]

Don’t worry about it. The reason you’re feeling so discouraged is because this example was so overkill and unnecessary. To make things overlap you can just add padding to the bottom of the top box and negative margin to the top of the bottom box. It’s that simple