Kevin Powell - Community•3mo ago

How to Approach Responsive Web Design for Different Breakpoints?

Hey everyone! I have knowledge of CSS up to Flexbox and now I'm looking to dive deeper into responsive web design. When I receive a Figma design, what is the best way to plan and structure the layout for different breakpoints (e.g., mobile, tablet, desktop)? Also, I’d like to understand which CSS units are ideal for responsiveness, Could you suggest any resources or strategies to help me learn responsive design effectively? Thanks in advance!

12 Replies

ἔρως•3mo ago

well, it's time to learn grid and media queries and container queries

Jochem•3mo ago

I can recommend following Kevin's free course: https://courses.kevinpowell.co/conquering-responsive-layouts

Kevin Powell

Conquering Responsive Layouts

Are you ready to take the challenge and finally figure out responsive layouts? Click the button below and jump in!

Jochem•3mo ago

it doesn't really use grid at all, because support wasn't great when it came out, but it gives you a good baseline to start from

ἔρως•3mo ago

oh, yeah, completely forgot that that exists it's a good next step for you

theboyduddus•3mo ago

well I do have some suggestions and they all come from Kevin's amazing course in which he provides perfect explonations that I cannot surpass. https://courses.kevinpowell.co/conquering-responsive-layouts and before you ask, yes, this course is free.

Kevin Powell

Conquering Responsive Layouts

Are you ready to take the challenge and finally figure out responsive layouts? Click the button below and jump in!

ἔρως•3mo ago

you just repeated what jochem said

rebornay•3mo ago

What are container queries? I only know of media queries.