🎓 FREE COURSE: Conquering Responsive Layouts https://courses.kevinpowell.co/conquering-responsive-layouts

🔗 Links
✅ min(), max(), and clamp() – https://youtu.be/U9VF-4euyRo
✅ Creating “squishy” padding with min() – https://youtu.be/7khSaA91e04
✅ The 100% correct way to do breakpoints: https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/

⌚ 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
💬 https://discord.gg/nTYCvrK

Keep up to date with everything I’m up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss

—

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: https://www.patreon.com/kevinpowell

—

My editor: VS Code – https://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: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://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!

source

49 Comments

  3. Kevin, you are much too kind and considerate ! You are wasting a lot of valuable time struggling to make stuff work on "portrait" displays. All you need do is provide a simple notice that displays only in "portrait" orientations. That notice is a polite message to say that the viewer should kindly hold his smartphone horizontally. To those unwilling to do this, then TOUGH .

  9. Hey do you have a portfolio site full of examples of sites you have made? I keep thinking you must have made some pretty amazing sites with just HTML/CSS/JS and it would be cool to see them.

  23. 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.

  25. 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 🙂

  26. Hey Kevin, your video is Great! Please, help me with this question. Do you start working on @media query responsive after you finish a whole page or you are more like starting @media query right after the header is finished?

  31. How on earth do you find those newer css stuff ? When i get stuck a google things all i get is solutions that combine the basic css properties . Like that font property (just wait until a random video pops on youtube to learn about those ?)

  32. Remember when we all decided that it was okay to move past 780px to something closer to 1000px? Although I do miss the heck out of nested tables… they were an absolute godsend.

  33. Thank you awesome vid I’m really pushing myself to learn web dev right now and as a robotics guy it’s less than enjoyable… 😂 but this definitely helps a lot of the css headaches

  47. 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 🙂

Leave A Reply

Please enter your comment!
Please enter your name here