Apprendre le CSS en s'amusant : Flexbox Froggy et Grid Garden

Commencez par Flexbox Froggy pour vous entraîner à l'alignement sur un axe, puis utilisez Grid Garden pour vous exercer à placer un élément entre les lignes de la grille. Après chaque exercice, reproduisez le concept dans une petite page de votre choix. L'objectif est de pouvoir expliquer le fonctionnement d'une déclaration CSS lorsque la mise en page change, plutôt que de simplement mémoriser la réponse d'un niveau particulier.

Apprendre le CSS en jouant, puis l'appliquer

Ce parcours combine deux jeux et trois exercices originaux. Il convient aux personnes capables de lire une règle CSS simple et qui souhaitent un retour visuel. Il ne s'agit pas d'un cours complet de développement web : les interfaces réelles nécessitent également un contenu lisible, un comportement adaptatif, une accessibilité au clavier et des tests avec différentes quantités de texte.

Choisissez l'exercice correspondant à votre question

Les jeux sont développés par Codepip. Cozcade renvoie chaque jeu hébergé à son guide correspondant : Flexbox Froggy et son guide ; Grid Garden et son guide. Les pages originales Froggy et Grid Garden proposent les versions des auteurs. Utilisez un clavier pour suivre les exercices de programmation.

Tout d'abord, nommez l'axe avant de choisir une propriété.

Flexbox possède un axe principal et un axe transversal. flex-direction définit la direction principale ; justify-content positionne les éléments le long de cet axe principal, tandis que align-items concerne l'axe transversal. Dans une rangée classique de gauche à droite, l'axe principal est horizontal. Si vous modifiez la direction pour une colonne, il devient vertical. Ces définitions sont expliquées dans MDN, l'introduction à Flexbox.

Avant d'essayer des déclarations dans Froggy, indiquez la direction de déplacement des éléments. Nommez ensuite cette direction par rapport à l'axe principal actuel. Cela transforme une réponse incorrecte en une question précise : avez-vous choisi la mauvaise propriété, la mauvaise valeur ou le mauvais axe ?

Exercice 1 : Déplacer un groupe vers la fin

Créez trois petits objets dans un conteneur. Il s’agit d’un exercice original, et non d’un niveau de jeu copié ou d’un corrigé.

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

Votre objectif est de déplacer les trois objets ensemble vers le bord droit sans modifier leur ordre ni ajouter de marge à chaque objet. Prédisez le résultat, puis ajoutez justify-content: flex-end au conteneur.

Comparez maintenant avec justify-content: space-between. La première option déplace le groupe ; la seconde répartit l’espace disponible entre les objets. Essayez avec un conteneur étroit et un conteneur large. Expliquez quelle version vous choisiriez pour trois boutons qui doivent rester proches les uns des autres. Le résultat visuel est plus important que la mémorisation d’une valeur.

Exercice 2 : Conservez la même instruction, mais modifiez l’axe.

Réutilisez ce conteneur, ajoutez flex-direction: column, définissez height: 12rem et conservez justify-content: flex-end. Les éléments se regroupent désormais vers le bas. Votre déclaration n’est pas devenue une commande de « déplacement vers la droite » : elle fonctionne toujours le long de l’axe principal, que vous avez modifié.

Ensuite, ajoutez align-items: flex-start. Comparez la disposition avant et après cet ajout. Avec la direction gauche-droite spécifiée, les éléments s’alignent vers la gauche sur l’axe transversal. Supprimez la déclaration et observez à nouveau le comportement d’étirement par défaut.

Rédigez une brève explication des deux modifications sans utiliser l’expression « ça fonctionne tout simplement ». Par exemple, identifiez l’axe, l’espace libre et le groupe positionné. Si vous ne pouvez pas expliquer un résultat, réduisez l’exemple à deux éléments et ne modifiez qu’une seule déclaration à la fois. Voici l'habitude à prendre en main.

Ensuite, distinguez une piste de la grille de sa limite.

Le placement sur la grille utilise des lignes entourant les lignes et les colonnes. Cinq colonnes ont chacune six lignes de limite. Un élément placé entre la ligne 3 et la ligne 5 s'étend sur deux colonnes, et non trois. Consultez l'introduction à la grille de MDN pour comprendre la différence entre pistes, cellules et lignes.

Dans Grid Garden, lisez les limites de début et de fin avant de placer un élément. Sur votre page, dessinez ou nommez les limites si le comptage des cases est difficile.

Exercice 3 : Placer une carte entre deux lignes

Créez un plateau à cinq colonnes et ajoutez-y une carte :

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

Prédisez l’emplacement de la carte avant d’ouvrir la page. Ensuite, faites-la occuper tout le plateau en modifiant uniquement son placement en colonne. Avec les cinq colonnes définies ci-dessus, grid-column: 1 / 6 s’étend de la première à la dernière limite.

Enfin, allongez considérablement le texte et réduisez la largeur de la fenêtre du navigateur. La règle de placement reste correcte, même si la hauteur fixe de la carte devient inadaptée à son contenu. Résoudre un exercice ludique permet d’apprendre une partie de la mise en page ; la création d’une page utilisable nécessite également de vérifier le contenu.

Utilisez la progression du jeu comme un retour d’information, et non comme une preuve de maîtrise.

Après avoir réussi un exercice, modifiez une hypothèse : la direction, le nombre d’éléments, la largeur disponible ou la longueur du texte. Prédisez le résultat avant de le consulter. Si vous parvenez à adapter l'idée et à expliquer le changement, vous aurez acquis bien plus qu'une simple réponse de niveau.

Lorsque vous reprenez un jeu, assurez-vous d'utiliser la même version et le même navigateur. Les favoris de votre compte Cozcade vous permettent d'identifier les jeux auxquels vous souhaitez rejouer ; ils ne garantissent cependant pas le transfert de votre progression entre appareils. Évitez de supprimer les données enregistrées sur le site pendant que vous consultez votre progression et n'utilisez la fonction d'exportation que si le jeu le propose.

Continuez avec le guide d'association.

Utilisez le guide Froggy pour vous entraîner aux axes et à l'alignement, et le guide Grid Garden pour les questions de placement. Si vous souhaitez vous entraîner autrement, consultez les jeux éducatifs.

Les exercices ci-dessus ont été conçus pour cet article. Les pages de référence ont été vérifiées le 11 octobre 2026. Nos tests de gameplay enregistrés couvrent un nombre limité d'interactions sur ordinateur, et non la réalisation de tous les niveaux ou d'un parcours complet sur mobile. Cet article propose une séquence d'entraînement ; il ne constitue pas une certification et ne remplace pas le test de vos propres interfaces.

Jeux disponibles sur Cozcade

Flexbox FroggyGrid Garden