I have a FREE COURSE on conquering responsive layouts π https://courses.kevinpowell.co/conquering-responsive-layouts
π Links
β
Width auto vs. 100%: https://youtu.be/-st14lUQD3U
β
Responsive layout practice for beginners: https://youtu.be/JFbxl_VmIx0
β
Position absolute and responsive layouts: https://youtu.be/H04P5YXVssE
β 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
π¬ 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
Very much appreciated! Thanks.
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.
Thank you. You're explaining it better than the ones that made it π
Thanks for this β€
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.
Amazing video brother. Thanks!!!
Vous Γͺtes gΓ©nial
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?
Im strugling with font sizes and how to make it responsive since the design i chose didnt have a smaller screen size
A diamond in the rough,
Media queries crying in the corner.. π
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.
Very cool and very helpful
Thank you so much, it's so helpful.
thanks so much
Your way of teaching is very nice. Really enjoyed and learnt something.
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.
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.
β€
Thanks. I'm stuck with responsiveness hope this will help
Thanks β€
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!
Nice vid!
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?
"I Have a ugly website but
it's atleast working in all screen size "
-frustrated css devs
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
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?
Please, I wanted to ask if you still have a community for coders