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.
Flexbox Froggy
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.
1 min de lecture
Apprentissage
Flexbox Froggy c’est le point d’entrée idéal pour apprendre Flexbox. En 24 niveaux ludiques, les concepts de justify-content, align-items et flex-wrap deviennent naturels.
Qu’est-ce que Flexbox Froggy ?
Un jeu éducatif où tu guides des grenouilles vers leurs nénuphars en écrivant du CSS Flexbox. Chaque niveau introduit une propriété ou une valeur, du plus basique au plus subtil.
Propriétés couvertes : justify-content, align-items, flex-direction, flex-wrap, align-content, order, align-self…
Points forts
- Pédagogie progressive, bien dosée
- Feedback visuel immédiat
- Disponible en français et dans une trentaine de langues
- Aucune installation, tout dans le navigateur
- Gratuit et open-source
Limites
- S’arrête aux propriétés de base, pas de
flex-growouflex-shrink - Pas de bac à sable libre après les niveaux
Tarifs
Gratuit.
Alternatives
- CSS Grid Garden - le même principe pour CSS Grid
- Flexbox Defense - même concept, format tower defense
Catégories
Commentaires
Connexion via GitHub, gratuite et sans collecte de données par ce site.
Outils connexes
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.
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.