Mini-projet : navbar responsive
Construis le CSS d'une navbar qui aligne, espace et replie correctement ses actions.
Objectifs de la leçon
- Transformer un brief en règles Flexbox
- Gérer les petits écrans sans masquer d'action
- Vérifier l'état clavier des boutons
Comprendre le principe
À la fin de cette leçon, tu sauras transformer un brief en règles Flexbox.
À la fin de cette leçon, tu sauras gérer les petits écrans sans masquer d'action.
À la fin de cette leçon, tu sauras vérifier l'état clavier des boutons.
Navbar résiliente
La disposition fonctionne sur une ligne et peut se replier lorsque l'espace manque.
Le parent porte display, align-items, justify-content, wrap et gap.
Les boutons reçoivent leur propre padding et leur forme.
Pourquoi éviter : Navbar figée
La largeur imposée ignore les petits écrans et le contenu variable.
Le mini-projet est maîtrisé lorsque la navbar reste claire, utilisable et sans débordement à toutes les largeurs.
Vocabulaire lié
- barre de navigation — Zone regroupant identité, destinations et actions.
- zone cliquable — Surface qui déclenche l'action d'un contrôle.
- critère d'acceptation — Condition vérifiable nécessaire pour valider le composant.
Validation
- Je peux expliquer : Le mini-projet est maîtrisé lorsque la navbar reste claire, utilisable et sans débordement à toutes les largeurs.
- Je peux transformer un brief en règles Flexbox.
- Je peux gérer les petits écrans sans masquer d'action.