5 simple tips to making responsive layouts the easy way
VloĆŸit
- Äas pĆidĂĄn 12. 06. 2024
- đ FREE COURSE: Conquering Responsive Layouts courses.kevinpowell.co/conque...
đ Links
â min(), max(), and clamp() - âą min(), max(), and clam...
â Creating "squishy" padding with min() - âą Creating squishy paddi...
â The 100% correct way to do breakpoints: www.freecodecamp.org/news/the...
â Timestamps
00:00 - Introduction
01:42 - The right mindset
03:12 - Start with global styling
04:46 - Avoid fixed sizes
08:17 - Use media queries to add complexity
12:54 - Take advantage of modern CSS
#css
--
Come hang out with other dev's in my Discord Community
đŹ / discord
Keep up to date with everything I'm up to
â www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
đș / kevinpowellcss
---
Help support my channel
đšâđ Get a course: www.kevinpowell.co/courses
đ Buy a shirt: teespring.com/stores/making-t...
đ Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
"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 đ
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 đ
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 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.
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.
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.
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. đ€đ»
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! đđâ
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?
Been a developer for more than 7 years now and your videos still give me some good ideas most of the times. Thanks :)
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.
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 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 CZcams?
@@IvanOung check his website
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đ€©
Having a hard time with responsive designs. Will definitely sign up for the responsive design course. Thanks for the great video.
"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.
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.
so much of knowledge in a single video... Thanks
Currently doing my 3rd responsive website challenge and this has helped immensely.....plan on taking your course ASAP.....Love how clearly you explain things.......
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!!
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!
Kevin, Just a note to thank you a lot for the quality of your videos. I've learned so much from you.... Bless you...
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.
I am blown away by the things I learn on your channel Kevin. Thank you so much.đđŸ
I really appreciate the free course. It's teaching me a lot and solving a lot of frustrations I've had with css.
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!
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.
Thanks for this Kevin. Itâs always good to be reminded about this.
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
This was immensely helpful. I am terrible at CSS and this has taught me a lot and answered a lot of my questions. Thank you.
This is such a big help! Thank you and keep what you are doing! More power to your channel.
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 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.
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!
This is what I needed. Very well and precisely explained. Thanks a lot
This video made me understand CSS better than the last few months of tutorials have. Thank you so much for this
I needed this for a project I'm currently working on. Great video!
BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!
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.
Watching this before starting my final project in a web development course. Thank you for helping me get in the right mindset!
So simple and so useful tips. Thanks Kevin, great stuff đ
Awesome content. This is called as sharing your wisdom. Great video and explanation. Would love more videos like these. Best 15mins spent on YT.
Its like you read minds. I really needed a video like this and you made it! Thanks a lot Kevin
This video solved most of my problems with css, Thank you
Shoutout to all those who learned not to use fixed sizes the hard way.
We can be friends and share the pain :)
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
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 :)
Great video!, thanks I started with React and CSS about 3 months ago, and at this point I feel I have the hang of it, for a good part but watching you use CSS and how fast you can think of the way things will look is stunning! Thanks for the great info! đŻđŻ
More than the technical stuff, this is gold. Thanks
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!
Hello Kevin, thank you for sharing all your knowledge and experience!!!
You have helped me so much! Thank you
Thanks, really helpful to get in the right mindset.
Thank you for the free course about understanding the responsive layouts. Thank you for everything.
Wonderful. I am less overwhelmed. Many thanks.
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)
You are awesome brother. Thank you for helping!
Great tips. Glad watched it. Thanks a lot!
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 :)
Helpful tips! Saved me from fixing overlapping divs. Thanks kevin!
Great video as always! I wish I had known about your channel back when I was learning CSS.
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 đ
The clamp() property is a revelation for me! Iâm going to use this on a new project Iâm starting next week.
This is so helpful! Kevin Powell is getting me through my Uni assignments :)
Omg!!! This is SO helpful!!! Thank you
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.
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)
Conquering responsive layout is worth watching for beginners,
I got little confidence with css now
Thank you so much Kevin
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)
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.
You are a great teacher. It solved my problems
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
You're really great instructor. Thanks for all the videos.
Thankyou for this video. Just the day before, I was banging my head in making a page responsive. These tips really help.
Always a huge help!
I like the intro music of your free course and of course the content !!!
Hey Kevin! Thanks for another awesome and very helpful video! đ I will definitely give clamp() a shot. Also, I'm probably using too many breakpoints, so I was looking for the link to the article about breakpoints groupings you mention in the callout. Did I miss it somehow?
Kevin, thank you so much! This video is a lifesaver!
This is super. Very helpful and well presented - Thank you.
CRL helped me a lot! I encourage you taking it.
Kevin we love you, thanks a bunch for awesome content and great tips!
This is wonderful, thank you so much for sharing!
As usual, your videos are very helpful. Thanks
I extremely like the video, man. Very helpful and informative. Thank you very much. It is presented so well too. Great, positive work.
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!!
thank you so much for your top--tier content. So helpful
Amazing video! you really helped me with my struggles trying to build a web that is responsive.
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 âșïž
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!
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.
Thank you for your free course !!
God Bless you Kevin. Finally got what I've searching for
I love you so much Kevin! Keep up the great work â„.
Your responive design course was very insightful and awesome đ
Thanks, great suggestions!!
Amazing content Kevin, great tips for beginner Web Devs!
Thank you so much for this content! You just helped me fixing my code!
I cannot say enough, awesome video! Thank you so much!