YES! “Before you write a single line of CSS, your website is responsive”. This is so important to know and start every page with. Then the next step - in the case that things aren’t how you want - write the minimum amount of code it takes to make it how you want.
I don't know how I ended up on this channel being a back-end developer but man I love your content and the simplified explanation on layouts and displaying things. I guess I will give another shot to my forgotten UI projects.
Avoid fixed Sizes.... THANK YOU!! The other day I was having a discussion with a friend who is also a frontender and he was saying... don't be affraid of fixed sizes. This began because I said... Inside my head, I feel I have to move as away as possible from fixed things. Cause I feel an app or web is an organic thing that needs to move, shrink and flow.
I totally recommend Kevin's responsive design course. It was a huge help for me and helped me create my first responsive layout independently. It is ridiculously well explained and easy to follow. Thank you Kevin for all you do!
I've been watching more and more of your videos. I'm a senior full stack developer with a history that pre-dates the www. Your videos and insights are just mind blowingly excellent. The joy of working from home is that I get to watch you do your magic on my lunch breaks and I'll admit it's the highlight of my day. Thank you so much for sharing your awesomeness with us. 🤘🏻
Hi Kevin, thank you so much for your great work. Every time I had a bad day at work, I watch one of your videos in the evening and I'm in a good mood again. It's not just the content of your tutorials but your whole uplifting personality. Please keep up the good work.
This was very, very helpful, especially because I’m currently (again) struggling with responsive layouts. From now on, I’ll try not to use device-specific media queries. Thanks Kevin!
I've been a web developer for 20 years, and consider myself a heavyweight, and I was totally blown away by the final point, with the clamp() function on the font-size. Mind blown. Sometimes it's hard to keep up with this stuff! I will be using that for sure :)
@@LilRumi Hah thank you! I'm fortunate to be able to pick and choose the jobs I take on, but I did move out of the city into a regional area so the pay isn't as good as a metro-based job. I run my own company now anyway and have been able to take advantage of a better lifestyle and work/life balance.
@@scott-richardson 🤯 Whoa! And you're welcome! I was going to ask why not find a better paying job, but you run a company?!👏👏👏 That must be difficult. Congratulations though! I could never run one, hahah. I hope it does well 😄
I just posted a video about the Top 10 CSS Features you should know and use in 2023 => if you want to discover even more useful tricks ... 😉 (I'm pretty sure you don't know all of them)
My best advice, always develop for mobile first. Make sure the default html / css looks and works the way you want on a small device. As you make your screen bigger, start adding media queries for the small stuff that needs adjustments. Trust me, if you do a big size first then you end up going down and make way more media query blocks and modify more css properties. Small to big gives the least amount of code.
Should you develop mobile first if you are making a site that has a niche audience and your stats reliably show 81% of visitors are using a large desktop screen and only 19% are using mobile?
@@keaton718 Do you want to include those 19%? Are you converting enough users with those 81% to justify not making your website responsive, if yes then dont bother. It is also a question of how "bad" the readability is for a mobile user. Some websites can still be "read" even though they dont resize that well. However, unless you have very complex elements in your design and are going to / in the process of rebuilding your website, then i would always go mobile first. Its not alot of extra effort for the added satisfaction from your customer base. Mobile is always the most simplest form of your website.
@@MrBa143 I always assumed mobile first was done because most websites visits are done on mobile devices these days. When designing desktop first I assume people are doing it with “mobile in mind” at least. I can’t actually think of a niche group that would use desktop more than mobile, maybe some B2B websites? So mobile first should almost always be best practice in any case just because it’s what most people use when visiting a website.
Great video!! I love how you explain the issue so clearly with the solution. I'll be keeping this video as a ref so when I begin a site, I'll have it handy to remind me what I need to do and not do. I'm not a novice, but I don't do pages very often. Great ref tool!! Thanks Kevin! 👍👏✔
This is a golden video. Responsiveness is the reason I had to write extra css code and now this video removed so much of that hassle. Thank you so much Kevin.
Love evergreen videos like this. Thank you so much. I have been working on becoming more proficient in building better mobile responsiveness elements at my job and this video came in my crosshairs at the right time. Also, you can wrap your code in VSCode by pressing Alt + Z on Windows or Option + Z on Mac.
This was a great lecture. Most of youtubers are like "And now I'm gonna do that..." and doesn't explain why they're doing that, which is just watching him coding. That doesn't happen here, this guy knows his stuff :)
Kevin you're amazing! I just checked your course, I am on the second video. It' s just wooow and it's absolutely free. You can't imagine how much you help people who study and cannot afford bootcamp or subscriptions, and I am also from Russia, I can't pay with mastercard or visa anymore. You're a hero, thaaaaank you!!!! I
Your solution at 8:40 was what I've been looking for for a long time, that's so simple and I've seen such over-engineered solutions elsewhere! Thank you!!
When you said look at your website to determine which breakpoints you should use, that just opened my eyes, never taught of it that way, I was always looking for industry best based breakpoints standards
This video absolutely changed my perspective. Before I wrote css for desktop and then at the end I was like oh wait what about mobile. NOW I know how to approach it. Thank you Kevin!
All your videos are so helpful and have made me view frontendtotallt differently; I can't imagine how much I'd get from a fully planned out course thank you so much🤩
I have been looking for clamp for what feels like YEARS now! Having a margin that shrinks proportionately as the device width shrinks has been driving me crazy, thank you so much for sharing this!
I'd definitely recommend the Conquering Responsive Layouts course, I'm working on that right now and it's been a lifesaver. Thank you Kevin for all that you do, the tutorials are much appreciated.
You are my fav person on youtube for CSS content. Thank you. If others here are reading comments and this is the only video of Kevin's you've seen, highly recommend checking out all of his CSS stuff :)
Currently doing my 3rd responsive website challenge and this has helped immensely.....plan on taking your course ASAP.....Love how clearly you explain things.......
The part about using media queries to add complexity fixed my problem. I was beating my head against the wall because I wasn't understanding how to use media queries correctly, and then being confused as to why the page wasn't coming out the way I pictured it. But thank you so much for helping me to change my understanding of how to use them!!
Lots of good advice here. Conceptually though I take the opposite approach: I start by visualizing a multi-column landscape view for the desktop and then collapse that into either a single column or a double, then single column, with either one or two breakpoints. Once I visualize how I want the columns to collapse I try to come up with a flexbox or grid or some combination that will do the trick.
Dude! You are a freakin' Genius! I'm a novice with 25 years of experience building my own website about 12 iterations over that time plus one website for a dive-bar back around 2002 that earned me 80 beers a month! Anyways I've always thought "Isn't there an easier more elegant way to render elements aesthetically w/o volumes of code and using the important tag so much?" I know that IDK much, but have come to think that a lot of "gurus" are overcomplicating things. Give me simplistic beautiful code that functions efficiently is what I say, and you just delivered that probably saving me a hundred hours or more in my attempt to make my basic website responsive. The "templates" that W3 provide look insanely over-complicated for my needs. Thanks for a great video. I subscribed, liked, and commented and now I'll go sign up for the free course.
I just posted a video about the Top 10 CSS Features you should know and use in 2023 => if you want to discover even more useful tricks ... 😉 (I'm pretty sure you don't know all of them)
Your point of using min,max height and width instead of just height and width; made a big difference. By this way I also got to know that browser tries to adjust itself when we have min and max instead of just height, width.
Kevin, I've been using CSS for a few years, but I still have a lot to learn. I've recently started a new job with an agency that uses Bootstrap and I've been adapting to it, however I don't like it nor understand its necessity. It's fascinating, and a bit inspiring, to me that extraneous tools, like Bootstrap, were not mentioned in this video. It appears to me that I should just KISS.
With time and experience you will create your own framework. Bootstrap is good yes, but often you will need to overwrite things and end up with a custom version of it.
Thank You Kevin! I've been following you for a while, but I sure wish I had seen THIS video a few months ago. I pretty much did the opposite of what you recommend. Can't wait to go back and correct.
I loved this video, I loved the part of "talk with the designer", the one I work with tells me things like: -Put that 38 pixels We put it and all looks perfect, I look at him and I say -Dude how you do that? And he simply laughs :D
🎯 Key Takeaways for quick navigation: 00:29 *🔧 Embrace modern CSS solutions for responsive layouts to ease frustration.* 02:22 *🧠 Before writing CSS, understand that your website is inherently responsive; it should adapt to different screen sizes without losing functionality.* 03:47 *🎨 Prioritize global styles such as typography, colors, and backgrounds before tackling layout, ensuring a solid foundation for responsive design.* 04:57 *📏 Avoid using fixed sizes for elements like width and height to prevent layout issues across different screen sizes.* 08:12 *🖥️ Use media queries judiciously to add complexity to your layout as needed, preferably using min-width queries for a mobile-first approach.* 11:00 *📱 Choose breakpoints strategically based on where layouts begin to break, aiming for fewer breakpoints to simplify maintenance.* 13:06 *🌐 Consider adopting more modern CSS approaches like `clamp()` to minimize the need for traditional breakpoints and enhance layout flexibility.*
small tip that I remember from another Kevin's video - use outline instead of border for debugging' CSS. Because adding border affect's the element's size, while outline doesn't
Or you can set box-sizing: border-box; (which I do by default anyway with every sheet I write) and any border will adapt to its container's width value without adding to it.
@@Danachew maybe, but then the border will affect the element's content, so the element still doesn't have the exact same proportions as when there is no border
Oh man, I have to see this video. I struggle so much with responsive layouts despite I’m good enough at CSS. I don’t have time right now, but I’ll watch it later for sure!
I just posted a video about the Top 10 CSS Features you should know and use in 2023 => if you want to discover even more useful tricks ... 😉 (I'm pretty sure you don't know all of them)
Maybe you will not read this comment,but I wanted to leave him here to thank you, I'm starting and your videos have been helping me a lot. thank you very much greetings from Brazil
I just posted a video about the Top 10 CSS Features you should know and use in 2023 => if you want to discover even more useful tricks ... 😉 (I'm pretty sure you don't know all of them)
sounds really great, then i got a message from client, it's not working on their browser, and their client using IE the layout broken etc. This is mainly the problem i have with modern css. The compatibility. Sound really great but i don't get much use of it because of compatibility.
@@mazagoez7190 if IE11 you can impliment a media query as a fallback. Remember css skips properties it doesnt understand so if you have a fall back it will naturally use that. Gotta take advantage of the 'cascade' in css!
@@KyleMerl i know. i use that as well, but still it's really a pain, meaning i have to use double work, both modern and conventional css. and client sometimes complain why in this browser looks good like that but in mine looks different.
@@mazagoez7190 in this particular case you're really only adding one additional line of code. And then you're keeping up on all the new css stuff! Backwards compatibility is important (altho not always necessary) but it's also important to keep up on learning and incorporating modern css too.
@@mazagoez7190 It sounds like your problem might also be educating your client on websites changing in appearance based on the device, browser, user settings etc.
Sitting here listening to you go on and I'm thinking: "Meh... I know all this!". And then you mention clamp()... WOW! How have I never heard of this before?!
This video is so good. I am taking a web dev class this summer (final exam next week) and your videos are helping so much. I just want to go and make a website every time I learn something new from you!
great tips. love this concept of getting in the mindset of responsiveness. gotta remember that max-width, min-height, and especially the clamp with a calculated value as the preferred. gold.
Iam literally wondering this excellent video is free for us. I used to have some very basic knowledge in responsive but after this i just really improved a lot
I missed this type of content :). Short & informative videos are useful but I enjoy watching this "project" setups and the logic behind it. Keep up the good work KP!
Ooo shucks back in the day I made a sweet sass mixin for responsive typography then clamp comes out and does it in one line! Thank you for the excellent guide; truly some great practices you packed in here!
You are a gem Kevin. Oh btw, I'm a Scrimba graduate working professionally as a frontend dev now. Please create a course on Design Systems if you can find the time.
This video and your earlier video about making a responsive layout really fixed one of my problems. It will be great if you make a video about cross browser :)
Very helpful, Kevin. Again, hitting on points that are very relevant. For me, it was the min height thing that helped. Also, I didn't know about "Clamp" yet so I guess we know where I'm at in my learning, lol. Thank you.
WoW!!!!! AWESOME video!!!! I'm literally about to start on re-design #3 of a website I maintain for a friend of mine and some of the issues you raised, in this video, are at the forefront of my mind. So, I'm ABSOLUTELY going to take the class. I understand the "mobile first" approach, but I tend to hate that term. I tend to think of things more from a 'mobile appropriate' perspective. :) lol Anyway, some of the tips you showed really give me great food for thought for thinking of creating new pages differently. You, Sir, are brilliant!!!! THANK YOU!!!!
I've used all this modern CSS, like clamp, gap, padding/margin-inline/block, but at some places based on the browser's version they don't support fully yet. So better to have an eye on the versions while using modern CSS.
"It is us who breaks the responsiveness of the web"
- Kevin Powell, Conquering Responsive Layouts
This sentence changed my way of thinking about responsive design. Thanks Mr. Powell!
YES! “Before you write a single line of CSS, your website is responsive”.
This is so important to know and start every page with. Then the next step - in the case that things aren’t how you want - write the minimum amount of code it takes to make it how you want.
that is where he talked about mindset correct ?
i don't understand can you explain?
@@patfoiloofficial2154 sorry for the late reply - yes that’s the section 😊
I don't know how I ended up on this channel being a back-end developer but man I love your content and the simplified explanation on layouts and displaying things. I guess I will give another shot to my forgotten UI projects.
Avoid fixed Sizes.... THANK YOU!! The other day I was having a discussion with a friend who is also a frontender and he was saying... don't be affraid of fixed sizes. This began because I said... Inside my head, I feel I have to move as away as possible from fixed things. Cause I feel an app or web is an organic thing that needs to move, shrink and flow.
As a new web developer, this really helps a lot in starting in the correct path. Amazing content!
It's been 11 months since you wrote this comment ,, where are you now in web development? Are you good at it now?
@@z3ro-0th42 its been 1 month since you wrote this comment, did you get better?
@@earnAndElevate Its been 11 days, what about u?
@Theodore Lexus Its been 1day how it's going with web dev?
@@klemenhorvat-novak2056 how much better have you gotten in the last 9hours?
I totally recommend Kevin's responsive design course. It was a huge help for me and helped me create my first responsive layout independently. It is ridiculously well explained and easy to follow. Thank you Kevin for all you do!
Where can I find that course? Is that on TH-cam?
@@IvanOung check his website
Been a developer for more than 7 years now and your videos still give me some good ideas most of the times. Thanks :)
Okay, the clamp function really dropped my jaw. Like WHAT why am I not using this?!
Thanks for the amazing content! :-)
Seriously! What a great little bit of code!
That's the tip that will change my life.
this advice solves 40% of css problems on the discord lol
Ikr
What problems? Can you be more specific?
@@mode2317 specifically 40% of problems
@@Rust_Rust_Rust XD
Exactly 😂
I've been watching more and more of your videos. I'm a senior full stack developer with a history that pre-dates the www. Your videos and insights are just mind blowingly excellent. The joy of working from home is that I get to watch you do your magic on my lunch breaks and I'll admit it's the highlight of my day. Thank you so much for sharing your awesomeness with us. 🤘🏻
Hi Kevin,
thank you so much for your great work. Every time I had a bad day at work, I watch one of your videos in the evening and I'm in a good mood again. It's not just the content of your tutorials but your whole uplifting personality. Please keep up the good work.
This was very, very helpful, especially because I’m currently (again) struggling with responsive layouts. From now on, I’ll try not to use device-specific media queries.
Thanks Kevin!
Having a hard time with responsive designs. Will definitely sign up for the responsive design course. Thanks for the great video.
I've been a web developer for 20 years, and consider myself a heavyweight, and I was totally blown away by the final point, with the clamp() function on the font-size. Mind blown. Sometimes it's hard to keep up with this stuff! I will be using that for sure :)
Really shows how anyone can learn something new even if they're super skilled! 🤯 I hope you get paid enough for all 20 years! That's a long time!
@@LilRumi Hah thank you! I'm fortunate to be able to pick and choose the jobs I take on, but I did move out of the city into a regional area so the pay isn't as good as a metro-based job. I run my own company now anyway and have been able to take advantage of a better lifestyle and work/life balance.
@@scott-richardson 🤯 Whoa! And you're welcome!
I was going to ask why not find a better paying job, but you run a company?!👏👏👏 That must be difficult. Congratulations though! I could never run one, hahah. I hope it does well 😄
I just posted a video about the Top 10 CSS Features you should know and use in 2023 => if you want to discover even more useful tricks ... 😉
(I'm pretty sure you don't know all of them)
"NO BODY HAS A PHONE THAT HAS A 270 WIDTH"
Galaxy Fold - Am I a joke to you?
Exactly what I was thinking
🤣🤣🤣
You mean the gigantic smartphone? Isn't that double the size of a regular smartphone? Wtf?
Yes... Yes you are
@@Victor_Marius I believe he meant the Samsung Galaxy Z Flip.
My best advice, always develop for mobile first. Make sure the default html / css looks and works the way you want on a small device. As you make your screen bigger, start adding media queries for the small stuff that needs adjustments. Trust me, if you do a big size first then you end up going down and make way more media query blocks and modify more css properties. Small to big gives the least amount of code.
nice
Thanks a lot :)
Should you develop mobile first if you are making a site that has a niche audience and your stats reliably show 81% of visitors are using a large desktop screen and only 19% are using mobile?
@@keaton718 Do you want to include those 19%? Are you converting enough users with those 81% to justify not making your website responsive, if yes then dont bother. It is also a question of how "bad" the readability is for a mobile user. Some websites can still be "read" even though they dont resize that well.
However, unless you have very complex elements in your design and are going to / in the process of rebuilding your website, then i would always go mobile first. Its not alot of extra effort for the added satisfaction from your customer base. Mobile is always the most simplest form of your website.
@@MrBa143 I always assumed mobile first was done because most websites visits are done on mobile devices these days. When designing desktop first I assume people are doing it with “mobile in mind” at least. I can’t actually think of a niche group that would use desktop more than mobile, maybe some B2B websites? So mobile first should almost always be best practice in any case just because it’s what most people use when visiting a website.
Great video!! I love how you explain the issue so clearly with the solution. I'll be keeping this video as a ref so when I begin a site, I'll have it handy to remind me what I need to do and not do. I'm not a novice, but I don't do pages very often. Great ref tool!! Thanks Kevin! 👍👏✔
This is a golden video. Responsiveness is the reason I had to write extra css code and now this video removed so much of that hassle. Thank you so much Kevin.
Love evergreen videos like this. Thank you so much. I have been working on becoming more proficient in building better mobile responsiveness elements at my job and this video came in my crosshairs at the right time. Also, you can wrap your code in VSCode by pressing Alt + Z on Windows or Option + Z on Mac.
This was a great lecture. Most of youtubers are like "And now I'm gonna do that..." and doesn't explain why they're doing that, which is just watching him coding. That doesn't happen here, this guy knows his stuff :)
Kevin you're amazing! I just checked your course, I am on the second video. It' s just wooow and it's absolutely free. You can't imagine how much you help people who study and cannot afford bootcamp or subscriptions, and I am also from Russia, I can't pay with mastercard or visa anymore. You're a hero, thaaaaank you!!!! I
Your solution at 8:40 was what I've been looking for for a long time, that's so simple and I've seen such over-engineered solutions elsewhere! Thank you!!
When you said look at your website to determine which breakpoints you should use, that just opened my eyes, never taught of it that way, I was always looking for industry best based breakpoints standards
This video absolutely changed my perspective. Before I wrote css for desktop and then at the end I was like oh wait what about mobile. NOW I know how to approach it. Thank you Kevin!
Thanks!
Thanks so much David!
so much of knowledge in a single video... Thanks
All your videos are so helpful and have made me view frontendtotallt differently; I can't imagine how much I'd get from a fully planned out course thank you so much🤩
I have been looking for clamp for what feels like YEARS now! Having a margin that shrinks proportionately as the device width shrinks has been driving me crazy, thank you so much for sharing this!
I'd definitely recommend the Conquering Responsive Layouts course, I'm working on that right now and it's been a lifesaver.
Thank you Kevin for all that you do, the tutorials are much appreciated.
You are my fav person on youtube for CSS content. Thank you. If others here are reading comments and this is the only video of Kevin's you've seen, highly recommend checking out all of his CSS stuff :)
Currently doing my 3rd responsive website challenge and this has helped immensely.....plan on taking your course ASAP.....Love how clearly you explain things.......
The part about using media queries to add complexity fixed my problem. I was beating my head against the wall because I wasn't understanding how to use media queries correctly, and then being confused as to why the page wasn't coming out the way I pictured it. But thank you so much for helping me to change my understanding of how to use them!!
Kevin, Just a note to thank you a lot for the quality of your videos. I've learned so much from you.... Bless you...
Damn, I just realized that I know nothing about CSS / responsive web design. Really thankyou for providing your course for free!!!!!!!!
Lots of good advice here. Conceptually though I take the opposite approach: I start by visualizing a multi-column landscape view for the desktop and then collapse that into either a single column or a double, then single column, with either one or two breakpoints. Once I visualize how I want the columns to collapse I try to come up with a flexbox or grid or some combination that will do the trick.
Dude! You are a freakin' Genius! I'm a novice with 25 years of experience building my own website about 12 iterations over that time plus one website for a dive-bar back around 2002 that earned me 80 beers a month! Anyways I've always thought "Isn't there an easier more elegant way to render elements aesthetically w/o volumes of code and using the important tag so much?" I know that IDK much, but have come to think that a lot of "gurus" are overcomplicating things. Give me simplistic beautiful code that functions efficiently is what I say, and you just delivered that probably saving me a hundred hours or more in my attempt to make my basic website responsive. The "templates" that W3 provide look insanely over-complicated for my needs. Thanks for a great video. I subscribed, liked, and commented and now I'll go sign up for the free course.
So glad you enjoyed the video Andy, and hope you enjoy the course even more ☺️
Thank you always, Kevin. The clamp() is awesome.
I just posted a video about the Top 10 CSS Features you should know and use in 2023 => if you want to discover even more useful tricks ... 😉
(I'm pretty sure you don't know all of them)
Your point of using min,max height and width instead of just height and width; made a big difference.
By this way I also got to know that browser tries to adjust itself when we have min and max instead of just height, width.
Kevin, I've been using CSS for a few years, but I still have a lot to learn. I've recently started a new job with an agency that uses Bootstrap and I've been adapting to it, however I don't like it nor understand its necessity. It's fascinating, and a bit inspiring, to me that extraneous tools, like Bootstrap, were not mentioned in this video. It appears to me that I should just KISS.
With time and experience you will create your own framework. Bootstrap is good yes, but often you will need to overwrite things and end up with a custom version of it.
Conquering responsive layout is worth watching for beginners,
I got little confidence with css now
Thank you so much Kevin
Its like you read minds. I really needed a video like this and you made it! Thanks a lot Kevin
This video made me understand CSS better than the last few months of tutorials have. Thank you so much for this
Bruh this guy is amazing.....your advice worked like magic
Thank You Kevin! I've been following you for a while, but I sure wish I had seen THIS video a few months ago. I pretty much did the opposite of what you recommend. Can't wait to go back and correct.
I now conquer them like a pro now thanks Kevin won't stop giving you my gratitude because i now love css and what i can do with it.
I loved this video, I loved the part of "talk with the designer", the one I work with tells me things like:
-Put that 38 pixels
We put it and all looks perfect, I look at him and I say
-Dude how you do that?
And he simply laughs :D
best teacher ever , i have learnt full css java and html in HOME
Watching this before starting my final project in a web development course. Thank you for helping me get in the right mindset!
I just love how easy you make it look like for beginners. I'm definitely subscribing and taking the course. Keep up the good work my man!
i love clamp. i didnt know if it was bad practice to use it. good to see that its got Kevin's vote of approval. but i'm sure it must not be abused.
The clamp() property is a revelation for me! I’m going to use this on a new project I’m starting next week.
Wow, am I glad I found you. I just started to learn UI design and was very frustrated at how unresponsive it was. Fixed heights abound- ugh!
🎯 Key Takeaways for quick navigation:
00:29 *🔧 Embrace modern CSS solutions for responsive layouts to ease frustration.*
02:22 *🧠 Before writing CSS, understand that your website is inherently responsive; it should adapt to different screen sizes without losing functionality.*
03:47 *🎨 Prioritize global styles such as typography, colors, and backgrounds before tackling layout, ensuring a solid foundation for responsive design.*
04:57 *📏 Avoid using fixed sizes for elements like width and height to prevent layout issues across different screen sizes.*
08:12 *🖥️ Use media queries judiciously to add complexity to your layout as needed, preferably using min-width queries for a mobile-first approach.*
11:00 *📱 Choose breakpoints strategically based on where layouts begin to break, aiming for fewer breakpoints to simplify maintenance.*
13:06 *🌐 Consider adopting more modern CSS approaches like `clamp()` to minimize the need for traditional breakpoints and enhance layout flexibility.*
oh man, u just saved my ass, Thanks for the content and free course
small tip that I remember from another Kevin's video - use outline instead of border for debugging' CSS. Because adding border affect's the element's size, while outline doesn't
Or you can set box-sizing: border-box; (which I do by default anyway with every sheet I write) and any border will adapt to its container's width value without adding to it.
@@Danachew maybe, but then the border will affect the element's content, so the element still doesn't have the exact same proportions as when there is no border
Oh man, I have to see this video. I struggle so much with responsive layouts despite I’m good enough at CSS. I don’t have time right now, but I’ll watch it later for sure!
Thank you for the clamp function, it really is a time saver ! Love your content ❤
I just posted a video about the Top 10 CSS Features you should know and use in 2023 => if you want to discover even more useful tricks ... 😉
(I'm pretty sure you don't know all of them)
Maybe you will not read this comment,but I wanted to leave him here to thank you,
I'm starting and your videos have been helping me a lot. thank you very much greetings from Brazil
I am blown away by the things I learn on your channel Kevin. Thank you so much.🙏🏾
That clamp is awesome tip 🤩 thank You 👍
I just posted a video about the Top 10 CSS Features you should know and use in 2023 => if you want to discover even more useful tricks ... 😉
(I'm pretty sure you don't know all of them)
Thanks for this Kevin. It’s always good to be reminded about this.
That clamp trick is awesome! No more adjusting H1's in media queries for me!
sounds really great, then i got a message from client, it's not working on their browser, and their client using IE the layout broken etc. This is mainly the problem i have with modern css. The compatibility. Sound really great but i don't get much use of it because of compatibility.
@@mazagoez7190 if IE11 you can impliment a media query as a fallback. Remember css skips properties it doesnt understand so if you have a fall back it will naturally use that. Gotta take advantage of the 'cascade' in css!
@@KyleMerl i know. i use that as well, but still it's really a pain, meaning i have to use double work, both modern and conventional css. and client sometimes complain why in this browser looks good like that but in mine looks different.
@@mazagoez7190 in this particular case you're really only adding one additional line of code. And then you're keeping up on all the new css stuff! Backwards compatibility is important (altho not always necessary) but it's also important to keep up on learning and incorporating modern css too.
@@mazagoez7190 It sounds like your problem might also be educating your client on websites changing in appearance based on the device, browser, user settings etc.
Sitting here listening to you go on and I'm thinking: "Meh... I know all this!". And then you mention clamp()... WOW! How have I never heard of this before?!
Thank you so much for focusing on responsive design; it used to be a step that I dread everytime :'
This video is so good. I am taking a web dev class this summer (final exam next week) and your videos are helping so much. I just want to go and make a website every time I learn something new from you!
I really appreciate the free course. It's teaching me a lot and solving a lot of frustrations I've had with css.
This video solved most of my problems with css, Thank you
I love Html,Css and JavaScript I learned it in lockdown and I loved it
great tips. love this concept of getting in the mindset of responsiveness. gotta remember that max-width, min-height, and especially the clamp with a calculated value as the preferred. gold.
Iam literally wondering this excellent video is free for us. I used to have some very basic knowledge in responsive but after this i just really improved a lot
Thankyou for this video. Just the day before, I was banging my head in making a page responsive. These tips really help.
I missed this type of content :). Short & informative videos are useful but I enjoy watching this "project" setups and the logic behind it. Keep up the good work KP!
Ooo shucks back in the day I made a sweet sass mixin for responsive typography then clamp comes out and does it in one line! Thank you for the excellent guide; truly some great practices you packed in here!
Thank you for the free course about understanding the responsive layouts. Thank you for everything.
I'm still struggling with responsive design, but I learned new stuff thank you Kevin
Hello Kevin, thank you for sharing all your knowledge and experience!!!
This is what I needed. Very well and precisely explained. Thanks a lot
I needed this for a project I'm currently working on. Great video!
You are a gem Kevin. Oh btw, I'm a Scrimba graduate working professionally as a frontend dev now. Please create a course on Design Systems if you can find the time.
Awesome content. This is called as sharing your wisdom. Great video and explanation. Would love more videos like these. Best 15mins spent on YT.
This is such a big help! Thank you and keep what you are doing! More power to your channel.
This video and your earlier video about making a responsive layout really fixed one of my problems. It will be great if you make a video about cross browser :)
man you are GOT, always I recurred to your chanel and this time you save me a lot of time, in the future i will buy all of your courses ! thanks 🙏
Helpful tips! Saved me from fixing overlapping divs. Thanks kevin!
the kind of channel where you give the like before watching the video. thanks Kevin!
BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!
This is so helpful! Kevin Powell is getting me through my Uni assignments :)
Wonderful. I am less overwhelmed. Many thanks.
Amazing content Kevin, great tips for beginner Web Devs!
Awesome lecture. I'm really greatful for this video. I'm stuck with the issue of responsivness in my project. I know I can solve now.
Very helpful, Kevin. Again, hitting on points that are very relevant. For me, it was the min height thing that helped. Also, I didn't know about "Clamp" yet so I guess we know where I'm at in my learning, lol. Thank you.
Everyone : liking video after watching
Le me : liked just after starting 😂
Cause I trust Kevin
God Bless you Kevin. Finally got what I've searching for
Great video! I just realized I don't use min & max with /height enough. All the tips were really useful at least for me! Thanks
WoW!!!!! AWESOME video!!!! I'm literally about to start on re-design #3 of a website I maintain for a friend of mine and some of the issues you raised, in this video, are at the forefront of my mind. So, I'm ABSOLUTELY going to take the class. I understand the "mobile first" approach, but I tend to hate that term. I tend to think of things more from a 'mobile appropriate' perspective. :) lol Anyway, some of the tips you showed really give me great food for thought for thinking of creating new pages differently. You, Sir, are brilliant!!!! THANK YOU!!!!
So simple and so useful tips. Thanks Kevin, great stuff 😊
Many thanks to the CSS Wizard Mr Kevin Powell, thank you for the tips sir, much appreciated!
Amazing video! you really helped me with my struggles trying to build a web that is responsive.
I've used all this modern CSS, like clamp, gap, padding/margin-inline/block, but at some places based on the browser's version they don't support fully yet. So better to have an eye on the versions while using modern CSS.
I'm so used to the old school css that this solves my life; I used to use media queries for phones, tablets and PC, then I just got a burnout lol