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.

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.

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😩

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

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

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

@andrewrea2799

Жыл бұрын

Would love to see better browser support for subgrid

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

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!

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

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

8 ай бұрын

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.

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

Thank you❤🔥🔥

seeing the avatar change every time was quite entertaining

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

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

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

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

11 ай бұрын

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

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

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.❤

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

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.

Do you use eye care monitors or the regular ones?

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

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

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!

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

I used position absolute

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

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

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

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

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!

What tool Kevin use for this video ??

Bro if we use flexbox then what happened?

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! :)

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

Oh hey

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

10 ай бұрын

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

Search history at 5:04 👀

your background color is almost the same :d

Subgrid isn't working on chrome

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 😅

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

Wow u viewed my project 2 times😁

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

5:03

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

The first comment

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

@KevinPowell

Жыл бұрын

Oh no 😅

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

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.

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