Mobile-first responsive

This lesson is part of the year-long Code Academy Alfred path. Goal: understand mobile-first, media queries, viewport in real web / mobile-web design conditions.

Mobile-first: base styles = small screen, then min-width to enhance. More robust than patching desktop downward.

Pragmatic breakpoints: 640 / 768 / 1024 / 1280. With Tailwind: sm md lg xl.

Touch targets ≥ 44px, readable text without zoom, no critical hover-only actions on mobile.

Practice immediately: rebuild the example, then change it. Memory comes from active repetition, not passive reading.

If you get stuck, use Cursor with a precise prompt (context + goal + constraints), then explain the generated diff yourself.