How do you make a web page responsive for mobile, tablet and desktop?

What the interviewer wants to hear

• Viewport meta tag
• Mobile-first CSS with media queries
• Flexible layouts with Flexbox and Grid, relative units
• Responsive images with srcset and sizes
• Test on real devices and DevTools device mode

Model answer

First I make sure the page has the viewport meta tag so mobile browsers do not zoom out. I write CSS mobile-first: base styles for small screens, then min-width media queries to add layout for larger screens. For layout I use Flexbox and Grid with flexible units like percentages, fr, rem and clamp for font sizes, instead of fixed pixel widths. Container queries help when a component must adapt to its own space rather than the whole screen. For images I use srcset and sizes so phones download smaller files, and I make sure tap targets are large enough. Finally I test in DevTools device mode and on at least one real Android phone and iPhone.

More easy Frontend Developer questions

• Explain the CSS box model. What is the difference between content-box and border-box?
• What is the difference between var, let and const in JavaScript?
• What is semantic HTML and why does it matter?
• In React, what is the difference between props and state?
• What is the difference between Flexbox and CSS Grid, and when would you use each?
• What is a closure in JavaScript? Give a practical example of where you use one.
• How do you make a form accessible?
• A button on a page does not work when clicked. How would you use browser DevTools to find the problem?
• What is a Promise, and how does async/await relate to it?