A practical guide to responsive web design

154,242
0
Published 2024-01-16
I have a FREE COURSE on conquering responsive layouts šŸ‘‰ courses.kevinpowell.co/conquering-responsive-layouā€¦

šŸ”— Links
āœ… Width auto vs. 100%: Ā Ā Ā ā€¢Ā CSSĀ widthĀ autoĀ vsĀ 100%Ā |Ā What'sĀ theĀ d...Ā Ā 
āœ… Responsive layout practice for beginners: Ā Ā Ā ā€¢Ā ResponsiveĀ layoutĀ practiceĀ forĀ beginnersĀ Ā 
āœ… Position absolute and responsive layouts: Ā Ā Ā ā€¢Ā PositionĀ absoluteĀ andĀ responsiveĀ layoutsĀ Ā 

āŒš 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.gg/nTYCvrK

Keep up to date with everything I'm up to
āœ‰ www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
šŸ“ŗ www.twitch.tv/kevinpowellcss

---

Help support my channel
šŸ‘Øā€šŸŽ“ Get a course: www.kevinpowell.co/courses
šŸ‘• Buy a shirt: teespring.com/stores/making-t...
šŸ’– Support me on Patreon: www.patreon.com/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 YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter: twitter.com/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

All Comments (21)
  • @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.
  • @DanteMishima
    "It is us who break the responsiveness of the web" - Kevin Powell, Conquering Responsive Layouts
  • @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
  • 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.
  • @artibaraku4070
    I wanted this video for a long time, but you made it as if you knew what we were missing. Thank you Kevin.
  • @jmun9561
    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.
  • @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!
  • @webdevgaur
    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!
  • @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.
  • @henrythomas7112
    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!
  • I've just started your course on responsive layouts. Thanks for sharing your knowledge freely.
  • @MyDpop
    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
  • @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.
  • @thanhninh2863
    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 šŸ’•šŸ’•
  • @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
    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
  • 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
  • @dimkayilrit2606
    Miss this for so Long šŸ˜ŽšŸ˜Ž, this was what made me love this channel some years back