A practical guide to responsive web design

Подписаться 910 тыс.

Просмотров 144 тыс.

50% 1

I have a FREE COURSE on conquering responsive layouts 👉 courses.kevinpowell.co/conque...
🔗 Links
✅ Width auto vs. 100%: • CSS width auto vs 100%...
✅ Responsive layout practice for beginners: • Responsive layout prac...
✅ Position absolute and responsive layouts: • Position absolute and ...
⌚ Timestamps
00:00 - Introduction
01:00 - Websites are responsive before you write any CSS
03:10 - Avoid fixed sizes for your layouts
08:40 - Avoid declaring things you don’t need
11:12 - Viewport units won’t solve most of your responsive issues
12:50 - Letting the browser do the heavy lifting
19:10 - There are times you will need media queries
#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 RU-vid 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!

Опубликовано:

23 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 147

@myartikool 4 месяца назад

I think this part of making websites is pretty easy and was quite intuitive for me. The difficulty starts when you need to preemptively think how everything would behave on different screen sizes before you even start doing CSS. This is probably gonna get easier only after lots of practice but so far I'm still straggling with it. Especially when pixel perfect is needed.

@benfrese3573 4 месяца назад

Yeah, and the graphical design aspect has become a lot more complex as well. Design *has* to work now, and a lot of my challenges in day to day work are from finding layout and interface solutions.

@ImperiumLibertas 4 месяца назад

One strategy to help alleviate some of the challenging parts is to develop for a mobile device first as there are more constraints for mobile views. Reverse engineering the desktop screens from the mobile views is typically easier.

@myartikool 4 месяца назад

@@ImperiumLibertas I've noticed that even when I do desktop-first I still end up refactoring media queries as if it was mobile first. It's just where I'm from desktop-first is the default approach.

@artibaraku4070 4 месяца назад

I wanted this video for a long time, but you made it as if you knew what we were missing. Thank you Kevin.

@webdevgaur 4 месяца назад

I love your content Kevin! I derive so much value from your videos. Just today I watched your video on css position property and it helped me solve a problem at work which was causing a big pain. Thank you brother man!

@kevbonett 4 месяца назад

Some really great (and simple) advice. Mainly around not declaring stuff until you need to, and letting the browser do what it does best!

@MyDpop 4 месяца назад

YESS! everything you do is to help us *fall in 💘 love* with CSS and be *a little bit less frustrated* by it! Thank you Kevin

@henrythomas7112 2 месяца назад

Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!

@GhostWithAHoodie 4 месяца назад

I just wanted to thank u mr Powell, i started to learn web development, and your content is amazing it helped me a lot.

@skillsvsdegree6139 3 месяца назад

You achieved your goal. I am new to frontend, only 2 months old, like I'm a baby. This video made me feel like CSS is a toy, not a boogeyman. I need CSS for my dream project I started to develop, and thanks to you to make me feel better with CSS. Hope most of the videos are like this, simple, straight to the point. subscribing.

@sentionmusic 3 месяца назад

I have seen so many dev videos and never know what they are talking about because they don't know how to explain things. THIS IS THE FIRST CHANNEL I CAN UNDERSTAND AND LOVE. thank you

@thanhninh2863 4 месяца назад

Thank you Kevin, I learned a lot in one video and u always have so much cool stuff to learn. Big respect for what u doing for the community now 💕💕

@nathanm2891 Месяц назад

I love your videos. I remember you talking about adding complexity as the screen grow a while back. It really changed my view on styling layouts.

@denoww9261 4 месяца назад

Great video! I'd love to see one about the differences in how you'd approach CSS for single-page webapps - for example, often they need to fill the full viewport height exactly, which is very different to how traditional websites work. Appreciate the content!

@jmun9561 2 месяца назад

I'm very new to basic coding, I would just like to say that while I'm doing this off my own back with no one teaching me. Watching and listening to your videos really helps. It's brilliant. Thank you for your time and sharing you knowledge.

@juwhankim6187 Месяц назад

I simply love the tone and accent of the voice. Again, I realize how much important tonal impression is, not only the content when it comes down to educational stuff.

@jcchaconjr 27 дней назад

This video was so insightful! I’ve only recently started doing some web coding for the first time in about 20 years (the bulk of my career has been working on native Windows apps). As I’m currently unemployed following a layoff, I’m in an HTML/CAS/JavaScript course as part of a larger curriculum, and the responsive design was killing me this week! As it is, I was able to get a better understanding of how all the flex options work, which allowed me to “stop fighting” the browser as you suggest, eliminating about 40 lines of CSS code in the process. My pages now behave, but your sections on grid design and the side bar might allow me to streamline my code even more. I only recently discovered your channel Kevin - thank you for the great content!

@zealest 4 месяца назад

crazy how you came in clutch with this guide

@Nawrotlearnscoding 4 месяца назад

Your take on media queries is a game-changer for me. From now on, I will try to use them more sparingly to avoid overcomplicating things. Thanks a lot, Kevin!

@DanteMishima 4 месяца назад

"It is us who break the responsiveness of the web" - Kevin Powell, Conquering Responsive Layouts

@dimkayilrit2606 3 месяца назад

Miss this for so Long 😎😎, this was what made me love this channel some years back

@Hamz-aa 4 месяца назад

A very thorough explanation of responsiveness. Really appreciate ❤

@meowthemmd 4 месяца назад

CSS just ends in Mr. Powell's channel we don't need anyone else teaching CSS; fascinating, THANKS.

@cseymour97 4 месяца назад

Viewport units are great. I love using them within a clamp on all my text sizes to make them fluid! Has worked well over the years!

@ilogbc3090 3 месяца назад

How do you do that? At the root?

@cseymour97 3 месяца назад

@@ilogbc3090 just when I'm defining text sizes. For example h1 could be something like h1{font-size: clamp(1.25rem, 2vw + 1rem, 2rem);} Doing that will define your min and max text sizes and then anything in between will be relative to the screen size.

@jensholm2586 Месяц назад

great video! very thankful for theese tips as a newbie to css. Lol i came here cause i built my website after my dekstop screen and set al width and heights to pixels and then when i went on my phone it all became crazy, now ill rebuild and do it right!

@zh1094 3 месяца назад

great video, i love this. I am not a frontend dev but seeing that some things related to responsiveness can be just done simply.

@everythingold-school.2512 4 месяца назад

When he said "Don't write CSS that you do not need" my mind was like, "You're busted boy!". Thank you, Kevin. The video helped me so much.

@JimKernix 4 месяца назад

Your free "Conquering Responsive Layouts" course mage responsive design super easy for me. I don't even have a problem with that since taking that course a few years ago.

@KevinPowell 4 месяца назад

So glad to hear that!

@danielekpenyong5930 10 дней назад

Great video and awesome lesson Kevin thanks for the detail you used in the video

@shamilrasheed6427 2 месяца назад

Your way of teaching is very nice. Really enjoyed and learnt something.

@_koh92_ 4 месяца назад

Hello, Kevin! I want to thank you for all your job (videos, tutorials, newsletters etc.)! The last letter you’ve showed statictic of your RU-vid channel, where mentioned Poland and his love of CSS. I’m your fan from Russia and I love CSS too! Could you tell about Russian # in your channel statistic? 🙂 Your content helps me: 1. Learn English 2. Level up my CSS skills 3. Teach my Frontend’s collegues of new CSS features! Keep up the good work! 👍

@KevinPowell 4 месяца назад

Glad that you're enjoying my content! In the last year, Russia is #13 :)

@ashokreddy2982 3 месяца назад

As a fresher when as a group we got this requirement we just scratch our heads regarding this mobile responsive these are really helpful tips thank you kevin 🙂 previously i thought maintaining our content inside grid tag will make our container mobile responsive 😂 but inner elements wont

@ishowspeed7191 4 месяца назад

Thank For this video sir i am looking this video for soo many days and this is the best video i got today

@yisuslalala 4 месяца назад

you're the best Kevin, thank you so much!

@hossamayman3587 4 месяца назад

Just the right content at the right time love it

@andersonlontsi299 3 месяца назад

Wow this is so well explained it's like I'm discovering the whole stuff again😅 Thank you sir 🙏

@samit4me 4 месяца назад

This is so good, fantastic video, thank you so much for this 🙌 Sorry, I feel bad for asking, what font/theme are you using in vscode? Looks super clean ✨, especially liking the syntax highlighting colors

@danielhalasz-szabo5143 4 месяца назад

Thx. I bookmarked this video as an everlasting reminder.

@TrxsTer 4 месяца назад

Damn just when I was having hard time with responsiveness, you posted a video on it, amazing 🤩 and thanks haha

@arturmoreira9716 Месяц назад

Amazing video brother. Thanks!!!

@apradaglez 3 месяца назад

That’s a pity that I couldn’t understand all that you explain. I follow you and always learn something. Thanks master

@Tiger__Man 3 месяца назад

I used to follow avoid using fixed width and height and it worked perfectly

@icarodlima 16 дней назад

Every time I decided to quit the video because I had “learned enough” I saw something mind-blowing and ended up watching until the end

@Wadih-bc Месяц назад

Very much appreciated! Thanks.

@anton9410 4 месяца назад

Thank you for the video! I noticed in tailwind we need to understand where the break points are, but this css only approach makes things much easier. Kevin, do you ever use tailwind or 3rd parties for css?

@solo-yl8uc 2 месяца назад

Thank you so much, it's so helpful.

@D7460N 4 месяца назад

Thanks again for this timesheet video. Keep up the great work! What are your thoughts on leveraging custom HTML elements, vice DIVs and classes, as a way to convey intuitive syntax with (usually) less code? I have found that it enhances fellow developers' experience (DX).

@D7460N 4 месяца назад

Well said, sir. HTML is responsive by default. It's not CSS' fault that things are not responsive. It's our fault for writing CSS or using a lib or framework that cause things NOT to be responsive. Set width/height as a last resort for intrinsic design. Less is more.

@hiddensinger2630 4 месяца назад

Very helpful video Kevin

@Smile__007 Месяц назад

Thanks for this ❤

@web_alchemist_ 4 месяца назад

Loving grids the more I learn about it ⚡

@nguyenhuynh3792 4 месяца назад

Hi kevin, thanks for making this amazing tutorial. However, what if I want to create a grid of cards that have same width and height, should I use fixed width and height?

@lenerignacio 3 месяца назад

Hi Kevin, thank you for all the knowledge you share across the videos and explanations. Recently, I've been seeing a "new type of responsive" known as fluid web design. Do you know about it? Is it different from the responsive? Or what should be some good concepts to have in mind for a fluid web?

@luciferevil9o908 4 месяца назад

It's very helpful thank you ❤

@dev-suresh 3 месяца назад

Thank you for making CSS easy for me :)

@ArtyomStouch 4 месяца назад

Thanks mr.Kevin, need more repeat .

@edsHTML 4 месяца назад

Thanks! This video is very helpful😀😀

@HBCGAMING 2 месяца назад

I am doing all wrong stuffs as mentioned in above video fixed size layouts always which carry me overflow problem of elements Now i avoid those problems. ❤

@oat1000 4 месяца назад

Could you make a video about the background when playing videos on youtube? It's a super cool tri-axis blur effect (x, y, time). It not only is a gaussian blur, but also blends into the future frames of the video.

@mrd.j.2303 23 дня назад

Great video! Sidenote, can you please tell me how you make your video shift to the bottom of the screen so smoothly whenever it’s in the way?

@tetsuorulin9009 4 месяца назад

beautiful video, thanks my G

@TOONSSTATION 2 месяца назад

Thanks. I'm stuck with responsiveness hope this will help

@tonybowen455 4 месяца назад

I just got done fighting a grid layout with media queries. Literally everything you talked about in this video I've been doing wrong for years.

@borisgomiunik7960 Месяц назад

Thank you. You're explaining it better than the ones that made it :)

@remox8894 4 месяца назад

Just thank you Kevin.

@Skeptomenos 4 месяца назад

How would you style svg background images? I have so many problems with them zooming in or not staying on that position where they should be. As well as positioning them correctly outside of any sections or inside any section by causing overflow. I actually don't know how to position them. I'm talking especially about colored svg section transitions like minimalistic waves or something. I don't know if it even would make a difference with other svgs.

@salamAlshingali 2 месяца назад

Very cool and very helpful

@ratstrat1984 2 месяца назад

This is me in a nutshell. I start declaring and just declare myself right into a headache. Then I dump my CSS and start all over.

@TurpoChargedGaming 4 месяца назад

I agree VH/VW are iffy. But with the rise of container queries, would you use CQB/CQI or still no?

@huncyrus 4 месяца назад

Would be interesting to see Kevin talking about responsive design with auto-sizing font size where it scale up when u watch on 50"' and 4k (readable and ain't stuck on 14 font size) and also good on phone. If anyone know any good article or video about it, would be nice to share with me.

@chukwubuikemonwuchuruba815 3 месяца назад

Thank you very much!

@james_horan 8 дней назад

Thank you!

@nathanmiddleton1478 4 месяца назад

You always have such beautiful cleanroom examples, thank you for that. There used to be a time it was easier to go open up the source of a site and maybe learn a thing or two, but anymore it seems like everything is hidden behind javscript code. Recently I visited a site and everything was generated by Javascript; the CSS, the HTML, EVERYTHING! I really feel like this is a step backwards. Like you lament in this video about keeping it simple. Whatever did happen to the KISS rule?

@krystofsevcik8569 4 месяца назад

Great video 💯

@mahadevovnl 4 месяца назад

A completely separate question: In CSS, we can set: `color-scheme: light dark;` And that's fine, we can use media queries to detect a system preference: `@media (prefers-color-scheme: light) {}` But does CSS also allow the user to override the system preference? Right now I'm doing that with JavaScript and it feels so clunky. I sometimes wonder if we need a new browser API, something like `UserPreferences` to set, reset, and update certain user preferences that would override certain media queries.

@seanplynch 4 месяца назад

Fantastic video

@xreed8 4 месяца назад

Could you do a vid on improving performance? I built my second personal portfolio website but it for some reason loads a little slower than your normal website, making it look a little less professional than it should be

@kraigochieng6395 2 месяца назад

thanks so much

@not_amanullah 2 месяца назад

Thanks ❤

@outpost31737 4 месяца назад

Less is most certainly more and I no longer use position absolute for complex overlapping layouts, there are better alternatives out there in the CSS universe! :)

@torynothing4719 3 месяца назад

Nice vid!

@DaBigin 4 месяца назад

Ever look into Penpot? I'd love to see you do a video of your thoughts about it.

@caspgin 3 месяца назад

Do you have a css and animation series that goes from scratch to smoke?

@chrisicotec7652 4 месяца назад

i always recommend avoiding heights unless its essential to the element, just using padding... anyone else open codepen or their ide and follow along with these tutorials? and seeing what you can do

@M1a2n3o43 4 месяца назад

Does someone have a good css reset? I have been using tailwind for a long time and havent been using vanilla css for a long time, so wanted to try it out again but kinda forgot how to write a good css reset since tailwind handles that by itself. Does kevin have a github repo or video about it?

@Tiger__Man 3 месяца назад

hello kevin .. i have a banner i want the height to be 20rem and i want if the screen get wider the height will be taller to be fitting the width what should i i add to acheive that

@ExodusVFX 4 месяца назад

God bless you in the name of Jesus

@LUKA-wt4ki 4 месяца назад

can you show us how to work with figma? (if you gonna use boostrap it would be better)

@user-rk5kd5sg6v Месяц назад

Like this approach, but on your products, when one drops to the line below (minmax 250px, 1fr lesson) and it doesn't have a partner to share the space with, it moves to the left of the screen and has space to the side. Any way to fix this and centre it?

@88navan 3 месяца назад

Thanks!

@KevinPowell 3 месяца назад

Thanks so much!

@hassansyed6087 3 месяца назад

I'm definitely struggling with the responsive aspect of website creation. Like everything needs it's own dedicated space and then it needs to look uniform and if one div shifts over, the text is all over the place. It's a mess. Any idea on how to use Grid and Flexbox preemptively so that we don't counter such problems when we get to the media query section?

@abdelrahmanmohamed4990 4 месяца назад

How are you coding and getting the result at the Same time in responsive mode. I know about live server tho, but it does not work in responsive mode.

@saiful929 4 месяца назад

Hello Kevin ! I am learning Css and basically learnt all/almost the basics , but when I do real life projects it sounds really difficult though I understand the codes. How long will it take me to become normal at this?

@KevinPowell 4 месяца назад

It can take some time for sure! Practice, practice, practice. Keep doing the projects, and try not to follow tutorials when possible, just turn to them to solve something you might be stuck with, then keep going on your own.

@saiful929 4 месяца назад

@@KevinPowell thanks you so much