Un jeu interactif pour apprendre les sélecteurs CSS en sélectionnant des plats sur une table. 32 niveaux qui couvrent tous les sélecteurs, des plus simples aux plus avancés.
CSS Grid Garden
Un jeu interactif pour apprendre CSS Grid en arrosant des carottes. 28 niveaux progressifs qui couvrent toutes les propriétés essentielles de Grid Layout.
1 min de lecture
Apprentissage
CSS Grid Garden est probablement la façon la plus agréable d’apprendre Grid Layout. En 28 niveaux, tu passes de grid-column aux placements complexes sans jamais t’ennuyer.
Qu’est-ce que CSS Grid Garden ?
Un jeu éducatif dans le navigateur où tu dois arroser des carottes en écrivant du CSS Grid. Chaque niveau introduit une nouvelle propriété ou concept, du plus simple au plus avancé.
Propriétés couvertes : grid-column, grid-row, grid-area, grid-template, order…
Points forts
- Apprentissage par la pratique, feedback immédiat
- Progression pédagogique bien construite
- Disponible en plusieurs langues dont le français
- Aucune installation, fonctionne dans le navigateur
- Gratuit et open-source
Limites
- Ne couvre pas les aspects avancés comme
subgridouauto-fill - Pas de mode bac à sable pour expérimenter librement
Tarifs
Gratuit.
Alternatives
- Flexbox Froggy - le même principe pour Flexbox
- Grid by Example - référence complète sur Grid par Rachel Andrew
Catégories
Commentaires
Connexion via GitHub, gratuite et sans collecte de données par ce site.
Outils connexes
Un jeu interactif pour apprendre Flexbox en guidant des grenouilles vers leurs nénuphars. 24 niveaux progressifs qui couvrent toutes les propriétés Flexbox essentielles.
Des défis CSS où l’objectif est de reproduire une cible visuelle avec le moins de code possible. Un excellent terrain d’entraînement pour maîtriser CSS en profondeur.