Top 10 Advanced CSS Responsive Design Concepts You Should Know

Responsive design in CSS is difficult to do well, especially if you only ever use media queries. In this video I share my top 10 responsive design tips that go beyond just using simple media queries.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:39 - Viewport Meta Tag
02:06 - Media Query Orientation
03:15 - Media Query Aspect Ratios
04:00 - Media Query Ranges
05:25 - Container Queries
09:27 - Custom Media Queries
11:09 - Different HTML
12:20 - CSS Grid
16:15 - Clamp
18:00 - Viewport Units

#ResponsiveDesign #WDS #CSS

[terencecluttey]

i'm been coding web for about 14 years. But i keep watching videos like this because you never know what you might learn... your font size clamp() is an amazing tip, thank you very much

[texxs]

I started building websites in 1995. We had HTML 1. CSS didn't exist yet etc. I was one of the pioneers of what is now called "responsive web design" in the CSS 2 era. We called it "Fluid Design" and we used tables and parts of tables etc with sizes in percentages of screen width, and some used tons of "simple" (if you called 30000 characters of javascript to detect a screen size simple). to detect screensizes and re-sized elements in the DOM and/or serve different layouts to different devices.

Thank goodness it's not like that still. But it was cool being able to do what "couldn't" be done.

[carmonverrall]

You are frikken brilliant! Everything is always overly complicated when its actually straight forward. Thank you!!

[carlosginer]

Happy new year to yall developers out there

[karlybyrd]

Thank you for including the bit about the meta tag, nobody else seems to mention that and it wasn't working for me until I put that in !!

[dollabill]

Thanks for helping me change my life. I watch your videos every day and I wouldn't be anywhere near where I'm at right now, as basic as that is, if it wasn't for you. Happy New year and best wishes

[jimb]

Great video, thanks for this! I've been battling mentally what is the best approach to mobile responsiveness - seems you answered my questions!

[wabism]

Happy new year, Kyle! Excited to see what 2023 has for us! ❤

[bndissanayaka]

This is great. I found this just on-time when I was asked to convert the web site I'm working on to mobile friendly. Thank you. 🙂🙂

[creativemask]

grabe, ibang klase ka tlaga mag explain kyle.. magaling ka talaga.. maraming salamat

[jana]

This chan has become my favorite waterhole for the daily brushup on CSS and HTML, super cool !

[codechick]

Your content is teaching me a lot, on point and well done. I do want to mention that although you later added a note to correct the "siderbar" typo, your tutorial was displaying the red and purple boxes incorrectly. I wrestled with this and could not figure it out until I walked away and later it came to me that your display wasn't matching mine because I didn't have the "siderbar" typo. Without the "siderbar" typo, only the red box displays over 600px because it is in a separate div on the html page. Thanks...; )

[kirksurber]

Loved the grid and the font-size clamp()! This just saved me a lot of time.

[LuciferHesperus]

Very helpful. Clear presentation style. Simplifying the complex. Good job.

[praveenellaiyan]

Another good concept and great explanation. One topic we're interested in is on designing flexible layout which works with ads and content.

[TomasMisura]

thanks a lot for this very useful video, it's absolutely incredible how CSS has been changing...

[johanneskingma]

As always a great video with tons of new(er) stuff. BTW is there a reason you don't use <main> and <aside> tags in the container section?

[nadeemakramansari]

Every video of yours is on another level. hats off to you bro..

[rotteneffekt]

Thanks for the vid. When writing stylesheets SASS is still king when it comes to simplifying css. @container is something I've prayed for for years.

[m-create]

Really awesome approach. I will use it when the support is there for it!