Défi : la galerie responsive

🎯 Objectif

Le grand final. La galerie du club photo, version pro — et le dernier exercice de toute la formation HTML/CSS. Pas d'exemple cette fois : tout est déjà dans ta tête.

📝 Consigne

Le HTML est figé, les couleurs sont posées. Il manque toute la mise en page. Dans l'onglet CSS, quatre étapes, dans cet ordre :

1. .page { } — deux déclarations du module 10 : un plafond de largeur à 900 pixels (max-width), et le centrage par les marges — rien en haut ni en bas, le mot-clé de partage automatique sur les côtés (margin)
2. .galerie { } — trois déclarations, celles des exercices 9.1 et 9.2 : le mode grille, la formule qui compte ses colonnes toute seule avec un plancher de 200 pixels et un plafond d'une part égale (repeat, auto-fill, minmax), et une gouttière de 16 pixels (gap)
3. .carte { } — quatre déclarations du module 8 : le mode de calcul qui compte bordure et padding dans la largeur (box-sizing), 16 pixels d'air intérieur (padding), un cadre de 2 pixels en trait continu couleur #d45e95 (border), et des coins arrondis de 12 pixels (border-radius)
4. tout en bas, un bloc conditionnel à partir de 768 pixels : une règle .entete dont l'air intérieur passe à 32 pixels — sobre sur téléphone, généreux sur grand écran

Vérifie l'aperçu après chaque étape. Quatre d'un coup, et tu ne sauras plus laquelle bloque. La checklist mesure ce qui ne dépend pas de la largeur ; le basculement, c'est toi qui le vérifies en élargissant — comme le ferait n'importe quel professionnel avant de livrer.

✅ Ce que tu sais faire, maintenant

Chaque règle de ce défi vient d'un module précis, et elles couvrent presque toute la formation :

Et garde le réflexe le plus élégant du lot : la grille n'a besoin d'aucune media query. La formule à trois étages s'occupe seule du nombre de colonnes, à toutes les largeurs ; le bloc conditionnel ne sert qu'à ce que la grille ne sait pas faire — ici, donner de l'air à l'en-tête. D'abord chercher si une propriété suffit, écrire une media query seulement s'il n'y a pas d'autre moyen.

Prends dix secondes, ça vaut la peine. Il y a neuf modules, tu ne savais pas ce qu'était une balise :

• Modules 1 à 3 — structurer une page : titres, listes, liens, images, tableaux, et le HTML sémantique que lisent les moteurs de recherche et les lecteurs d'écran
• Modules 4 et 5 — habiller : sélecteurs, couleurs, typographie, variables
• Module 8 — le modèle de boîte, celui qui explique enfin pourquoi ça déborde
• Module 9 — Flexbox, pour aligner en une dimension
• Module 10 — positionner, empiler, réagir au survol et au clavier
• Module 11 — la grille en deux dimensions et l'adaptation à chaque écran

Ce n'est pas une liste de propriétés apprises par cœur. C'est un métier : construire une page qui tient debout partout et dont personne n'est exclu. La page que tu viens d'écrire, tu pourrais la mettre en ligne demain.

💡 Tip de pro : garde ce fichier. Conteneur centré, grille auto-adaptative, cartes en border-box, un palier de media query — c'est le squelette de la moitié des sites du web. Tu ne l'as pas copié : tu l'as écrit ligne par ligne, en sachant pourquoi chacune est là. La prochaine étape s'appelle JavaScript, et elle rendra tout ça vivant.

♿ Un dernier réflexe, et c'est celui qui distingue un développeur d'un bricoleur. Cette page reste utilisable si on double la taille du texte, si on navigue au clavier, si on la lit sur un écran de 320 pixels — et le menu de l'exercice 11.5 t'a montré la barre des 44 pixels qu'une cible tactile ne descend jamais. Ce n'est pas un supplément qu'on ajoute à la fin : c'est ce que tu as fait, sans y penser, à chaque exercice de cette formation. Bravo — et à bientôt. 🎉