Lesson 05 · HTML & CSS
HTML & CSS Fundamentals: Responsive Design & Mobile-First Layouts
The viewport meta tag, mobile-first reasoning, relative units and clamp(), media queries chosen by content rather than device names, responsive images with srcset, and the 320-pixel test that catches it all.
Prerequisites: HTML & CSS Fundamentals: Layout with Flexbox & Grid
Learning objectives
By the end of this lesson, you will be able to:
- Add the viewport meta tag and explain what breaks without it
- Convert pixel-based type and spacing to rem and %
- Size type and spacing fluidly with clamp()
- Choose breakpoints by watching the content, not device names
- Serve images at several widths with srcset and sizes