Apprenez vous-même CSS Flexbox avec le jeu Flexbox Froggy

Dans le passé, nous avons passé en revue la flexbox et les bases de son fonctionnement. Cependant, l’application de flexbox à votre flux de travail peut s'avérer difficile, car il s’agit d’un ajout compliqué à la spécification CSS..

Avec Flexbox Froggy, vous pouvez Apprenez toutes les bases de la flexbox avec un jeu en ligne amusant comprenant des grenouilles et des lilypads. Je sais que ça a l'air fou, mais c'est vraiment une webapp géniale.

Vous commencez au niveau 1 et avancez lentement dans 24 niveaux différents enseigner les nombreux aspects de l’orientation de la flexbox. Les premiers niveaux commencent facilement en vous demandant de aligner une ou deux grenouilles le long d'un même conteneur. Les premières leçons incluent également des conseils et des suggestions pour vous aider tout au long du parcours..

Mais une fois que vous avez passé la leçon 10, les choses se réchauffent vraiment. Vous aurez besoin d'apprendre comment-organiser les articles dans un conteneur, comment organiser contenu verticalement, et comment créer espacement équidistant entre différentes lignes de contenu différent.

Les petites grenouilles mignonnes peuvent vous attirer, mais rassurez-vous, c'est un jeu difficile.

toutefois, des novices complets aux développeurs Web plus expérimentés, le jeu est fait pour tous les niveaux. Les premières leçons sont un jeu d'enfant et les leçons ultérieures peuvent vous laisser penché sur l'écran avec des touffes de cheveux à vos côtés.

Le code source complet du jeu est disponible gratuitement sur GitHub. Vous pouvez donc le télécharger et le jouer localement si vous le souhaitez..

De plus, la webapp est multilingue offrant 20 langues comprenant l'anglais, le français, l'allemand, l'italien, le chinois, le japonais et le russe (plus beaucoup d'autres).

Je vais admettre que réarranger les grenouilles ne vous fera pas immédiatement un maître de flexbox. Mais ces leçons sont destinées à vous familiariser avec la syntaxe flexbox afin que vous puissiez vous sentir plus à l'aise dans des scénarios du monde réel.

Si vous êtes un développeur web de tout niveau de compétence vous devriez certainement vérifier Flexbox Froggy. C'est totalement gratuit, assez amusant à jouer et étonnamment éducatif.