flexboxfroggy

Flexbox Froggy est un jeu éducatif fonctionnant dans le navigateur, créé par Thomas Park pour enseigner la mise en page CSS flexbox de manière engageante et pratique. Le jeu propose 24 niveaux de difficulté progressive où les joueurs doivent écrire des propriétés CSS flexbox correctes — telles que flex-direction, justify-content, align-items, flex-wrap, align-content, flex-flow et order — pour placer des grenouilles sur leurs nénuphars correspondants. Chaque niveau introduit un nouveau concept flexbox avec une brève explication et un aperçu visuel. Les joueurs saisissent du code CSS dans un panneau d'édition et observent un retour immédiat tandis que les grenouilles se mettent en place. Le jeu fonctionne entièrement dans le navigateur sur flexboxfroggy.com, sans installation requise. Le projet est open source sous licence MIT (code) et Creative Commons BY 3.0 (images). Il a été traduit dans plus de 50 langues par des contributeurs de la communauté, dont le chinois (simplifié et traditionnel), le japonais, le coréen, l'espagnol, le français, l'allemand, le russe, l'arabe et bien d'autres. Les traductions sont gérées via le dépôt GitHub, où les contributeurs peuvent ajouter de nouvelles langues par le biais de pull requests. Flexbox Froggy est largement cité dans les tutoriels de développement frontend, les bootcamps de programmation et les ressources d'apprentissage du CSS comme point d'entrée accessible pour maîtriser la mise en page flexbox. Le code source est un site statique adapté à l'auto-hébergement ou à une utilisation hors ligne.