Responsive mobile-first

Cette leçon fait partie du parcours annuel Code Academy Alfred. Objectif : comprendre mobile-first, media queries, viewport en conditions réelles de conception web / web mobile.

Mobile-first : styles de base = petit écran, puis min-width pour enrichir. C’est plus robuste que de « patcher » le desktop vers le bas.

Breakpoints pragmatiques : 640 / 768 / 1024 / 1280. Avec Tailwind : sm md lg xl.

Touch targets ≥ 44px, texte lisible sans zoom, pas de hover-only critique sur mobile.

Mets en pratique immédiatement : recrée l’exemple, puis modifie-le. La mémorisation vient de la répétition active, pas de la lecture passive.

Si tu bloques, utilise Cursor avec un prompt précis (contexte + objectif + contraintes), puis explique toi-même le diff généré.