All this time i thought you're opening was "hello my friend and friends". Which sounded odd but i assumed it was an Canadian jargon thing. First time i am realising it's "front-end friends". Hah!
Your last piece of feedback is absolutely the best tip out of all and it’s your sixth! In particular how you mention developers should approach reading and watching tutorials. I do often, on top of an actual full project, pick up a couple of new POCs I should try and I experiment at least with a couple everyday in an isolated project or env. Whether it’s a different language, a CSS trick, a JS trick… I’ll do it once, maybe twice, keep repeating if I liked it and then make it a library. I generally never use a library until I’ve made a small POC of it so I can understand what happens under the hood. Amazing video
Thanks for your good videos. I am learning web dev in germany and after 3 month of getting help from your videos for my work projects i feel really confident about css and yesterday i could help a much more experienced colleague with a css problem and could quickly find the issues and made the site not only look better but also responsive. Thanks a lot for your tutorials and sharing your love for css!
in the first tip, the console.log() of css, I think that there is an even clever way to solve it that is using the built-in layers feature in dev tools they're accessible on dev tools > three dots menu > more tools > layers there it shows a 3D representation of the layers (elements with z-index explicitly/implicitly defined) of your website
I adore the min function and the pattern you described was divisive. I see no downside. Logical property margin and min function cuts down from two declarations (max-width and width) to one. I also hadn't seen the 100% - padding before but I've been thinking about this issue when building with Bricks because I have the full width section and then a wrapper w max width but if I put padding on wrapper then ny content is not taking up all the available space , it's max-width minus padding. Bricks builder forum suggested putting padding on full width section but unless I need bg colour, all thst section is doing is providing padding. I love the pattern of 100% - padding *2!!
Minor tip: Prefix local CSS variables with an underscore (--_local-var) to distinguish them from global CSS variables (--global-var) This helps maintain organization and clarity in your code
I've learned what is possible from these small tips you do. I typically never actually copy the code. However I need to rebuild what the tutorial is teaching and fail. Failure is golden. If only we learned this when we are young!
2:00 on the css, if you are using vite, you can create an extra dev mode with css injection. "vite --css-inject ". then you dont have to re-edit your css every time.
For phone number submissions you can use the input type 'tel'. I'm not sure how well this validates as I tend to go a bit overkill with JS and server side validation, but it achieves the same look that you have with type 'text' and inputmode 'numeric'.
I like toggling `::before{content: attr(class);}` to expose the class of all objects on a page in a pseudo element which can be a helpful way to track down problematic elements in your design
I like the analogy of following a tutorial vs applying a tutorial to your own project is the same as following a GPS vs using road signs and reviewing a map. Following a GPS takes little attention. But following road signs and looking at a map requires strong attention and for you to transform information into action. When you're moving to a new location, you'll learn your way around a lot quicker if you use a GPS once or twice, then try to work it out. Same is true for tutorials. Watch a long one, understand the concepts. Then just start building.
Just now before watching this video I was checking your shorts 😂 and they are really best and some of them are mind blowing as a new learner of deep CSS..it's a great thing that you make this video so that they will aware about your shorts...
Tip #1 is neat, but I went further and made a browser extension for Chrome (I should really bring it to Firefox though). Stacker - Visualize markup structure quickly It does an inner shade, then 3d transforms with an animation so you can see nesting. You can toggle it on and off. Of course, if your own CSS involves 3d transforms, it's not gonna work properly. Once it was done, someone pointed out that Firefox used to have that feature and then I remembered I used it a ton so.... I guess I really missed it! And now you can use it too! On #4 I'm not even sure what the objective was, I think there's simpler ways to do what I think he wanted. Except for this one, the tips are great!
I am a backend developer, sometimes I like to venture into the frontend by creating screens, but I have some difficulty with responsive layout, I know techniques like media query and others, however my biggest challenge is adapting layouts for smaller screens more precisely in height, there are many old devices that have very low screens and sometimes we want to display the content completely in 100vh, if anyone knows of a technique or something like that to help me with this issue. Although it is rare today to find devices in use like iPhone SE, 6, 7, 8 and it is always good to think about the design as a whole, it is very difficult to adapt these layouts to multiple devices in a harmonious way.
I much prefer just using media queries instead of trying to find some advanced solution to changing to phone screens. -> I know this gets repeated a lot but usually the simple solution is the best.
I wanted to know what happens with React Native that it can adapt the screen according to the size of the device, The CSS could look something like this, I'm using Bootstrap, and its grid system
Whenever you're making code examples in your videos, is there a way to see the code somewhere, without needing to reverse engineer as much as one can gleen from your videos? Often i want to play around with what you're presenting and trying out other things. I know about your codepen (which isn't really searchable or sortable in correspondance to your videos) and github. If currently not, could you maybe provide something like that? Thank you.
Tbh im at a weird place where idk if im a junior developer or not, but currently i dont feel limited by css or javascript anymore, but there is one question that i have, when should one really use width? (specifically on content containers) do you perhaps have a video on it or something already?
I've watched a few shorts, but honestly TH-cam shorts has one of the worst UIs I've ever seen so I avoid them where possible. Thanks for putting this video together!
Different pattern doesn’t mean it’s wrong - to me is the prove that the programmer is actually thinking out of the box to solve issues in clever new ways. Love this logic actually!
Thanks for the great tips! Is anything speaking against using 100vw instead of 100% in the wrapper example? I am asking because I might want to use the same class for absolute or fixed elements that otherwise use its parent width.
I think the phrase you are looking for on that last point is “Understanding is not the same as doing.” I understand how to skateboard or play basketball but I suck at doing those things.
I don't watch all your shorts for the same reason I don't watch all your long-form videos - time. Unfortunately my Tardis is currently broken (which means I'm limited to the same 24hrs in a day as everyone else) and given the massive number of different subjects I like to dabble in I have to pick and choose which to watch. I do really enjoy your videos though and find your enthusiasm rather invigorating.
For the wrapper padding trick. Wouldn't it work as well with this? .wrapper { --wrapper-max-width: 926px; --wrapper-padding: 2rem; max-width: calc(var(--wrapper-max-width) + (2 * var(--wrapper-padding)); padding-inline: var(--wrapper-padding); margin-inline: auto; } This way you get the same result, but padding is actually expressed padding and not implicit padding
The favicon tip responds only to the OS-level dark mode, not to the browser-level setting or to themes. Any site using a flat icon ought to provide a background for it.
What if we can make an invisible line/box in the centre of the mobile screen that activates all the hover functions related to the specific element? Can we actually achieve that or is it tooo complex to achieve that..? I wanted to know your thoughts on this. (To deal with hover on mobile devices. Even for the ones that don't have cursor access)
I saw a comment about a single line of css to stop users downloading images. Tried it on dev site and realised that it broke the onclick actions for icons. As ever its better to try something and know what you have done so that you can take a step backwards.
Just a comment on the comments you got for the container / wrapper CSS, and how it wouldn't pass a Code Review. The point of the channel is to teach people CSS, how individual companies choose to implement that is up to them. But if it's valid CSS, you should absolutely be talking about it. ❤
When i ride skateboard and try to do a kickflip, i am the only one jumping up in the air. The skateboard remains on the ground and then i land on the skateboard again and then it's back to hospital again. I will never even try to ride skateboard again hahaha, i am terrible at this. But yeah, i agree with you to 100%. No matter how many tutorials you watch, you wont learn to do a kickflip just by watching a bunch of tutorials. Same goes for CSS
Hi man, very nice video as always. I'm a senior full stack developer and I would point a thing I didn't understand of your tips. It's about number inputs. Why on earth I should prefer to make a text input with pattern and with a dozen of javascript lines of code... instead of writing 2 lines of css, yes really 2 lines ("...a lot of CSS?") to disable the arrows. Consider that javascript is (almost) always heavier to process, instead of CSS, except for some types of animations.
It's not just about the scroll-wheels being potentially annoying, it's about intent, UX and accessibility. Most people will use `type="number"` even when the input it not strictly an incrementable number. A great, short article on this is technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/.
@@denoww9261 ...or you just let the validation do his job. 😅 Actually to me, the worst user experience I noticed is when users do something and they do not notice any sort of interaction in the site, like when is broken or frozen. That's where they spam buttons randomly because they expect something to happen. Try with your mom! 😅 This to say that if happens to write letters and the input returns the error that must be numbers, to me is not a big deal to be honest, instead of seeing nothing happening at all. Consider that firefox is like the 5% of user case anyway. Or maybe just use the input type "tel" with a pattern.
@@Nightrapture You have it backwards. If having zero feedback is bad, you definitely don't want to use type="number", since on Chrome/Chromium-based browsers it will silently drop the input if you type non-numbers.
At 3:51 it says DANK logo, just saying, btw you saved me with your grid expanding video, the one with breakout, fullwidth etc. My webpage is made based on that now, awesome content
Many thanks for this video and all others! As for min, of course thank you for all the information, like ability to drop "callc" inside, but in general here I don't agree with you. And it has nothing to do with CSS -- choosing between super-"smart", sophisticated one-liner and multiple lines code, boring one could say, I blindly choose the latter one. The principle here is you should always choose solution that is below you current writing skills. It is because right now you are focused on this particular problem, all warmed-up. When you get back to it, in 5 years, when you just switched from completely other topic (say uniqueness of NULL in given database) you will be in read mode (not write) and you will look at it like at Rosetta stone. What worse, when you finally decipher the meaning of your old code, you start wondering -- does it have only one meaning, or there is some tricky side effects you don't see it. Gosh, so long comment, so in short, do not plant tricks in your code 🙂 Trick should be the effect, not the cause.
they literally just need you to add a comment. This is when you should be using more comments on your code. So senior and junior developers know exactly what is going on. like /* this makes the width either 926px wide or gives the width 100% minus 2rem on each side so content fits properly */
All this time i thought you're opening was "hello my friend and friends". Which sounded odd but i assumed it was an Canadian jargon thing. First time i am realising it's "front-end friends". Hah!
Same!
Noobs
The *actual* most frequent comment!
That sounds like a mental thing. Which I do all the time.
I used to think it was "hello my frent and friends" and that makes zero sense.
My dear front end friends : if you have a 10 minutes per day to spend on mdn, you'll be surprised
Your last piece of feedback is absolutely the best tip out of all and it’s your sixth! In particular how you mention developers should approach reading and watching tutorials. I do often, on top of an actual full project, pick up a couple of new POCs I should try and I experiment at least with a couple everyday in an isolated project or env. Whether it’s a different language, a CSS trick, a JS trick… I’ll do it once, maybe twice, keep repeating if I liked it and then make it a library. I generally never use a library until I’ve made a small POC of it so I can understand what happens under the hood. Amazing video
Thanks for your good videos.
I am learning web dev in germany and after 3 month of getting help from your videos for my work projects i feel really confident about css and yesterday i could help a much more experienced colleague with a css problem and could quickly find the issues and made the site not only look better but also responsive.
Thanks a lot for your tutorials and sharing your love for css!
in the first tip, the console.log() of css, I think that there is an even clever way to solve it that is using the built-in layers feature in dev tools
they're accessible on dev tools > three dots menu > more tools > layers
there it shows a 3D representation of the layers (elements with z-index explicitly/implicitly defined) of your website
I adore the min function and the pattern you described was divisive. I see no downside.
Logical property margin and min function cuts down from two declarations (max-width and width) to one.
I also hadn't seen the 100% - padding before but I've been thinking about this issue when building with Bricks because I have the full width section and then a wrapper w max width but if I put padding on wrapper then ny content is not taking up all the available space , it's max-width minus padding.
Bricks builder forum suggested putting padding on full width section but unless I need bg colour, all thst section is doing is providing padding.
I love the pattern of 100% - padding *2!!
6:18 Always validate input on the backend. Someone can just edit the HTML in their own browser and send, for example, letters instead of numbers.
Incredibly helpful!!! Thank you for what you are doing for the dev community and for how much you’ve helped me on my journey!!!
Minor tip:
Prefix local CSS variables with an underscore (--_local-var) to distinguish them from global CSS variables (--global-var)
This helps maintain organization and clarity in your code
I've learned what is possible from these small tips you do. I typically never actually copy the code. However I need to rebuild what the tutorial is teaching and fail. Failure is golden. If only we learned this when we are young!
I watch sometimes the shorts, but this format is better for me to get more bites then 1 bite. Thank you very much for all your shared knowledge
The last tip is absolutely the best
Great stuff, Kevin! Re: wrappers, I am with you on that one. Totally makes sense. And I re-use this approach all the time now. Thanks to you, Sir.
2:00 on the css, if you are using vite, you can create an extra dev mode with css injection. "vite --css-inject ". then you dont have to re-edit your css every time.
Thank you so much! Incredible video, not just the technical part, but also the mentality - way to go! :D
I love this little layers visualization trick. Very useful !
Also input listener prevents paste if it has any non-number and not cleans it up (3rd tip)
Pesticide for outlining elements is so handy as browser extension - i can click a button on every website - not only my own.
Thank you for the tips, I found the section about the wrapper width very useful
For phone number submissions you can use the input type 'tel'. I'm not sure how well this validates as I tend to go a bit overkill with JS and server side validation, but it achieves the same look that you have with type 'text' and inputmode 'numeric'.
I beleive there's a new feature in Chrome 130 Dev tools which will highlight an element in the DOM tree if it's scroll overflowing.
Awesome Kevin, like always
You make learning so straightforward!
I like toggling `::before{content: attr(class);}` to expose the class of all objects on a page in a pseudo element which can be a helpful way to track down problematic elements in your design
Haha, I just tried that here on the TH-cam site on a * selector. What a mess! 😂
@@markuskopter what a riot! Maybe 'id' is a better choice
Kevin i am a big fan of your work . God bless you
your number one tip is your just for me thanks
Always looking up to you thanks man
Thank you sir for your tips and advice.
No no no! The wrapper-xl is actually what needs to become the standard... makes this well organized and easy to read 😉 keep on going sir! 😉
I like the analogy of following a tutorial vs applying a tutorial to your own project is the same as following a GPS vs using road signs and reviewing a map.
Following a GPS takes little attention. But following road signs and looking at a map requires strong attention and for you to transform information into action.
When you're moving to a new location, you'll learn your way around a lot quicker if you use a GPS once or twice, then try to work it out.
Same is true for tutorials. Watch a long one, understand the concepts. Then just start building.
You are getting close to a million subs!!! Exciting times. How are we going to celebrate?
Just now before watching this video I was checking your shorts 😂 and they are really best and some of them are mind blowing as a new learner of deep CSS..it's a great thing that you make this video so that they will aware about your shorts...
this man is a Legend in the making PEOPLE
Tip #1 is neat, but I went further and made a browser extension for Chrome (I should really bring it to Firefox though).
Stacker - Visualize markup structure quickly
It does an inner shade, then 3d transforms with an animation so you can see nesting. You can toggle it on and off.
Of course, if your own CSS involves 3d transforms, it's not gonna work properly.
Once it was done, someone pointed out that Firefox used to have that feature and then I remembered I used it a ton so.... I guess I really missed it!
And now you can use it too!
On #4 I'm not even sure what the objective was, I think there's simpler ways to do what I think he wanted. Except for this one, the tips are great!
I am a backend developer, sometimes I like to venture into the frontend by creating screens, but I have some difficulty with responsive layout, I know techniques like media query and others, however my biggest challenge is adapting layouts for smaller screens more precisely in height, there are many old devices that have very low screens and sometimes we want to display the content completely in 100vh, if anyone knows of a technique or something like that to help me with this issue. Although it is rare today to find devices in use like iPhone SE, 6, 7, 8 and it is always good to think about the design as a whole, it is very difficult to adapt these layouts to multiple devices in a harmonious way.
I much prefer just using media queries instead of trying to find some advanced solution to changing to phone screens.
-> I know this gets repeated a lot but usually the simple solution is the best.
I wanted to know what happens with React Native that it can adapt the screen according to the size of the device, The CSS could look something like this, I'm using Bootstrap, and its grid system
I love this format, thanks Kevin.
Side note, I actually learned how to ollie in a dream 😄 that was after weeks of being unable to get it, though
This is a good one, Kev! 😮
Good tips and learning suggestions!
Whenever you're making code examples in your videos, is there a way to see the code somewhere, without needing to reverse engineer as much as one can gleen from your videos? Often i want to play around with what you're presenting and trying out other things. I know about your codepen (which isn't really searchable or sortable in correspondance to your videos) and github. If currently not, could you maybe provide something like that? Thank you.
LOVED it!
Awesome insights Kevin :)
Tbh im at a weird place where idk if im a junior developer or not, but currently i dont feel limited by css or javascript anymore, but there is one question that i have, when should one really use width? (specifically on content containers) do you perhaps have a video on it or something already?
I mean i do usually figure it out, but it’s not something that is intuitive to me yet.
I like a lot 2nd tip. To me, it is very clear when you use it with - -var .
Great tips! Thanks
This guy really knows what he’s doing! TIL 😁🎉 Also: go watch his CSS Day talk, everyone! It was so good.
Thanks! I like your tip number 5 :)
Absolutely awesome thank you!!!
hello kevin! Have you ever thought about making 'i rate your designs / projects' series ? I think it would really intresting and fun to watch
the favicon tip got me!
I've watched a few shorts, but honestly TH-cam shorts has one of the worst UIs I've ever seen so I avoid them where possible. Thanks for putting this video together!
Different pattern doesn’t mean it’s wrong - to me is the prove that the programmer is actually thinking out of the box to solve issues in clever new ways. Love this logic actually!
Thanks for the great tips!
Is anything speaking against using 100vw instead of 100% in the wrapper example? I am asking because I might want to use the same class for absolute or fixed elements that otherwise use its parent width.
I do realize I don’t get you often in shorts so appreciate this reminder to subscribe!
I think the phrase you are looking for on that last point is “Understanding is not the same as doing.” I understand how to skateboard or play basketball but I suck at doing those things.
09:00 This js code is bad because it resets cursor position if user accidentally presses some wrong key.
In Chrome is fine, but for some reason is not working properly in Safari 🤔 Any idea?
I don't watch all your shorts for the same reason I don't watch all your long-form videos - time. Unfortunately my Tardis is currently broken (which means I'm limited to the same 24hrs in a day as everyone else) and given the massive number of different subjects I like to dabble in I have to pick and choose which to watch. I do really enjoy your videos though and find your enthusiasm rather invigorating.
For the wrapper padding trick. Wouldn't it work as well with this?
.wrapper {
--wrapper-max-width: 926px;
--wrapper-padding: 2rem;
max-width: calc(var(--wrapper-max-width) + (2 * var(--wrapper-padding));
padding-inline: var(--wrapper-padding);
margin-inline: auto;
}
This way you get the same result, but padding is actually expressed padding and not implicit padding
Background trick 1:45 reminds me of 3d view in firefox.
That has been such a cool feature! Too bad it's gone.
Hello Kevin, how to add support for decimal point in numeric hack you showed?
The favicon tip responds only to the OS-level dark mode, not to the browser-level setting or to themes. Any site using a flat icon ought to provide a background for it.
What if we can make an invisible line/box in the centre of the mobile screen that activates all the hover functions related to the specific element? Can we actually achieve that or is it tooo complex to achieve that..? I wanted to know your thoughts on this. (To deal with hover on mobile devices. Even for the ones that don't have cursor access)
Thank you
Always Loving your Tips 👌 my Online Mentor Ya'll ❤
Hmm, what a fantastic front end tip you have.
Thanks. FYI I rarely watch 'shorts' as I watch most YT on a TV with Chromecast and they don't let shorts play.
I saw a comment about a single line of css to stop users downloading images. Tried it on dev site and realised that it broke the onclick actions for icons.
As ever its better to try something and know what you have done so that you can take a step backwards.
Just a comment on the comments you got for the container / wrapper CSS, and how it wouldn't pass a Code Review.
The point of the channel is to teach people CSS, how individual companies choose to implement that is up to them. But if it's valid CSS, you should absolutely be talking about it. ❤
Css vs scss which one is best to build a website?
Thanks.
Is masonry out?
When i ride skateboard and try to do a kickflip, i am the only one jumping up in the air. The skateboard remains on the ground and then i land on the skateboard again and then it's back to hospital again. I will never even try to ride skateboard again hahaha, i am terrible at this. But yeah, i agree with you to 100%. No matter how many tutorials you watch, you wont learn to do a kickflip just by watching a bunch of tutorials. Same goes for CSS
Responsive favicons: Cleaner and smaller to keep the css inside the svg.
But Sandy SVG favicons aren't supported by Safari 😭
Hi man, very nice video as always. I'm a senior full stack developer and I would point a thing I didn't understand of your tips. It's about number inputs. Why on earth I should prefer to make a text input with pattern and with a dozen of javascript lines of code... instead of writing 2 lines of css, yes really 2 lines ("...a lot of CSS?") to disable the arrows. Consider that javascript is (almost) always heavier to process, instead of CSS, except for some types of animations.
I think the point was that on Firefox you would need that same javascript even with type="number".
It's not just about the scroll-wheels being potentially annoying, it's about intent, UX and accessibility. Most people will use `type="number"` even when the input it not strictly an incrementable number. A great, short article on this is technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/.
@@denoww9261 ...or you just let the validation do his job. 😅 Actually to me, the worst user experience I noticed is when users do something and they do not notice any sort of interaction in the site, like when is broken or frozen. That's where they spam buttons randomly because they expect something to happen. Try with your mom! 😅 This to say that if happens to write letters and the input returns the error that must be numbers, to me is not a big deal to be honest, instead of seeing nothing happening at all. Consider that firefox is like the 5% of user case anyway.
Or maybe just use the input type "tel" with a pattern.
@@Nightrapture You have it backwards. If having zero feedback is bad, you definitely don't want to use type="number", since on Chrome/Chromium-based browsers it will silently drop the input if you type non-numbers.
Maybe you should link to your Shorts within the video and/or the description, so people may watch them, too.
At 3:51 it says DANK logo, just saying, btw you saved me with your grid expanding video, the one with breakout, fullwidth etc. My webpage is made based on that now, awesome content
Many thanks for this video and all others! As for min, of course thank you for all the information, like ability to drop "callc" inside, but in general here I don't agree with you. And it has nothing to do with CSS -- choosing between super-"smart", sophisticated one-liner and multiple lines code, boring one could say, I blindly choose the latter one. The principle here is you should always choose solution that is below you current writing skills. It is because right now you are focused on this particular problem, all warmed-up. When you get back to it, in 5 years, when you just switched from completely other topic (say uniqueness of NULL in given database) you will be in read mode (not write) and you will look at it like at Rosetta stone. What worse, when you finally decipher the meaning of your old code, you start wondering -- does it have only one meaning, or there is some tricky side effects you don't see it. Gosh, so long comment, so in short, do not plant tricks in your code 🙂 Trick should be the effect, not the cause.
I second that: Inputs ARE annoying!
they literally just need you to add a comment. This is when you should be using more comments on your code. So senior and junior developers know exactly what is going on. like /* this makes the width either 926px wide or gives the width 100% minus 2rem on each side so content fits properly */
I just wish there was a Figma like dev mode inspect feature built in Chrome and Firefox.
11:50 😂
light mode developers rise up
The fact that chrome still to this day did not implement an overflow checker is kind of a joke.
Does Firefox have one?
I'd have to check it out if yes
for your second most popular short: why not just box-sizing: border-box?
I'll remove all the elements, put it in another file, insert in back one by one until the issue appear again.
I'm a BE dev.
My top 5 is to use AI tools.
Is that bed for a cat or a dog?
Guess how I found oot that you're Canadian.
how can i like 5 times
Гарна порада про навчаня!
I am from India
Hello my friend and friend
🇮🇳👫🇺🇸
please help
macbook late 2013 use for coding this time
16gb i7
Yeah... I don't and will never watch shorts. Actually have them disabled
Ha, "marginal improvement". I see what you did there... 🤓