A practical guide to responsive web design

🔗 Links

⌚ 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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[myartikool]

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.

[skillsvsdegree]

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]

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

[artibaraku]

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

[jmun]

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.

[DanteMishima]

"It is us who break the responsiveness of the web"

- Kevin Powell, Conquering Responsive Layouts

[Mynamewashere]

This video is solving my PTSD from trying to figure out responsive design while trying to finish my school project at the last minute. It's almost like you can see inside my head. Thank you.

[kevbonett]

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

[JimKernix]

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.

[GhostWithAHoodie]

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

[cseymour]

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!

[juwhankim]

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.

[suziewilliams]

I came across your channel recently. I must admit, your videos, knowledge and teaching skills are over the top. You know your advanced css, you teach what's needed. You don't teach unnecessary styling just for creating a video sake. Keep doing what you're doing.

Can you please create a guide or topics list for us to learn advanced CSS better please

[everythingold-school.]

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.

[_koh_]

Hello, Kevin!

I want to thank you for all your job (videos, tutorials, newsletters etc.)!

The last letter you’ve showed statictic of your YouTube 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! 👍

[meowthemmd]

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

[jcchaconjr]

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]

crazy how you came in clutch with this guide

[icarodlima]

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

[nathanm]

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.