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.
@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
@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
@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.
@clevermissfox9 ай бұрын
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_11 ай бұрын
90deg 🚀 I didn't know most of the content here, but the grid just seems to fits pretty well with any layout 💜
@stevecrabtree9141 Жыл бұрын
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!
@GR_BackingTracks Жыл бұрын
I do enjoy a "i haven't planned this out" demo...
@MdRasel-qb4tx Жыл бұрын
Lots of love sir for giving so much time to work We will get work like this again for our learning
@ferbragga Жыл бұрын
I like how the gradient from the challenge is the same gradient behind yourself 😅
@skkabetu Жыл бұрын
seeing the avatar change every time was quite entertaining
@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.❤
@groovebird812 Жыл бұрын
Keep it simple. I would use negative margins for the container at the bottom
@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
@brucewayne4357 Жыл бұрын
Hey Kevin, for the start chatting div, why did you use grid over flex?
@ambyehigimetor1667 Жыл бұрын
What i would want to know is how to achieve this same effect without using subgrid
@KendrickSimphao Жыл бұрын
I used position absolute
@tomaszgora4353 Жыл бұрын
Me: This is a fun tutorial to follow. Also me: Just looked up browser support for subgrid....
@UnknownPlayersRo Жыл бұрын
Nice Video Kevin, can you make a video explaining the oklch color space? ❤
@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
@kayodesamsonadelola7688 Жыл бұрын
Thank you❤🔥🔥
@ZigaKrasovec Жыл бұрын
Search history at 5:04 👀
@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! :)
@zdenekopolzer822 Жыл бұрын
It will be cool if you make a video about html email template
@GalaxCFX Жыл бұрын
Is there a site like this for more beginner type people? Asking for a friend..
@bodepeter2309 Жыл бұрын
Subgrid isn't working on chrome
@gfxbh1715 Жыл бұрын
Css is now support for nested elements like sass, make a video on this topic
@outplay3759 Жыл бұрын
your background color is almost the same :d
@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 😅
@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!
@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.
@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
@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?
@rajaulislamratul4736 Жыл бұрын
Do you use eye care monitors or the regular ones?
@Lets_Code25 Жыл бұрын
Wow u viewed my project 2 times😁
@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; }
@dibel366910 ай бұрын
@@arturosan007some things in this code are not supported by Edge, you will have more luck viewing the site in chrome.
@metcaelfe Жыл бұрын
Oh hey
@ciuf_ciuf Жыл бұрын
5:03
@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
@raphaelsanchez1235 Жыл бұрын
What tool Kevin use for this video ??
@Jackie815 Жыл бұрын
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
@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
@kennethguinto4862 Жыл бұрын
i kid you not someone watching this be like How can i make this more complicated with React or Vue or Sverlte lol .
@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.
@ModifiedMusicYT Жыл бұрын
I think Kevin broke the site, all I get when trying to sign up is `Email rate limit exceeded`
@KevinPowell Жыл бұрын
Oh no 😅
@agilkerimov Жыл бұрын
The first comment
@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
@justingallant1560 Жыл бұрын
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