Responsive design

What you'll learn

• What mobile-first actually means in code
• Why the viewport meta tag is non-negotiable on phones
• Picking breakpoints from your content, not from device names
• Container queries — and when they replace a media query
• Fluid type and spacing with clamp(), min(), max()
• Responsive images: srcset, sizes, picture
• Wrap-friendly grids with auto-fit and auto-fill
• Print and reduced-data — the cases nobody thinks about until they ship

1. 01
   Why responsive is the default

   what mobile-first actually means, and why it's not just smaller.
   12 min
2. 02
   The viewport meta tag

   the one line of html that decides whether phones zoom out or render properly.
   10 min
3. 03
   Media queries

   min-width, max-width, and the user preferences your css can listen to.
   16 min
4. 04
   Container queries

   styling a component by its own width instead of the page's.
   17 min
5. 05
   Fluid type and space

   one scale that bends with the screen, using clamp, min, and max.
   15 min
6. 06
   Responsive images

   srcset, sizes, and picture — letting the browser pick the right file.
   15 min
7. 07
   Responsive layouts in practice

   auto-fit grids and flex-wrap. card lists that shrink without breaking.
   18 min
8. 08
   Print and reduced-data

   @media print and prefers-reduced-data. the cases every senior dev has shipped.
   12 min