Apprendre CSS Grid Layout (The Fun Way) avec Grid Garden

La plupart des développeurs Web connaissent le jeu Flexbox Froggy vous apprend les bases de la flexbox à partir de rien. Ce jeu gratuit est devenu viral et il est toujours extrêmement utile pour apprendre aux gens à coder avec flexbox.

Eh bien, le même développeur qui a fait ce jeu a un tout nouveau jeu appelé Grid Garden.

Ce jeu fonctionne de manière similaire mais vous apprend comment coder les grilles CSS. C'est une fonctionnalité relativement nouvelle mais c'est attraper vite et Grid Garden est facilement le meilleur moyen d'apprendre.

Tout dans Grid Garden suit un style d'enseignement similaire comme Flexbox Froggy. Il a été créé par le même développeur, Thomas Park. Vous pouvez donc vous attendre à un niveau de difficulté et de convivialité similaire..

Par défaut, vous commencez au niveau un avec un total de 28 niveaux du début à la fin. Tu peux toujours sauter des niveaux si vous pensez que certaines d'entre elles sont trop difficiles, mais je trouve qu'il est toujours bon de les traverser toutes comme une mise à jour..

Si vous ne savez pas comment fonctionnent les propriétés liées à la grille, vous vous retrouverez à googler beaucoup de mots. La disposition de la grille CSS est un module totalement nouveau avec sa propre syntaxe et ses fonctionnalités.

Je recommande fortement de jouer avec Grid Garden chaque fois que vous en avez l'occasion. C'est pratiquement un Terrain de jeu du développeur CSS pour apprendre et étudier toutes les propriétés de la grille.

Je ne peux pas dire que ce jeu fera de vous un expert des grilles CSS. Seuls des projets de construction et beaucoup de pratique peuvent vous amener à un niveau d'expert. Mais Grid Garden est un moyen amusant de se lancer sans tout le stress habituel lié à l'apprentissage de nouvelles connaissances..

L'ensemble du projet est totalement gratuit et en libre accès sur GitHub si vous souhaitez le télécharger localement pour l'étudier ou le développer. Vous pouvez également partager vos pensées avec le créateur sur Twitter @thomashpark.