Apprendre CSS Grid avec un jeu de jardin virtuel

Présentation de Grid Garden

Qu’est-ce que Grid Garden ?

• Grid Garden est un jeu conçu pour apprendre la mise en page CSS Grid.
• L’utilisateur progresse dans le jeu en utilisant la propriété grid-column-start pour arroser la zone où se trouvent les carottes.

Explication du code d’exemple

• grid-column-start: 3; signifie qu’on arrose une zone qui commence à partir de la troisième ligne verticale de la grille.
• Chaque colonne et chaque ligne de la grille est configurée pour occuper 20%.

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {}

Ressources d’apprentissage supplémentaires

• Flexbox Froggy permet d’apprendre CSS Flexbox.

L’avis de GN⁺

• Valeur pédagogique : Grid Garden est un excellent outil pour apprendre la mise en page CSS Grid de manière ludique à travers le jeu.
• Importance de la pratique : ce type d’outil d’apprentissage interactif permet d’apprendre plus efficacement par la pratique que par la seule théorie.
• Évolutivité technique : CSS Grid et Flexbox sont des technologies importantes du design web moderne, il est donc essentiel de bien les comprendre.
• Autres outils recommandés : au-delà de CSS Grid, il est aussi recommandé d’utiliser d’autres outils d’apprentissage comme CSS Diner.
• Point d’attention : après avoir acquis les concepts de base grâce au jeu, il est également important d’apprendre à les appliquer dans de vrais projets.

[GN⁺]

Commentaires sur Hacker News

• La série de Rachel Andrews aide beaucoup, même les développeurs back-end, à créer des applications UI modernes.
• Une session de show-and-tell de 30 minutes a été organisée avec l’équipe, avec la participation de non-développeurs, et cela a été utile pour développer des bases en programmation.
• Le jeu est amusant, mais il pousse à se concentrer uniquement sur la résolution du problème, ce qui peut freiner une compréhension approfondie. Une pénalité sur le nombre de tentatives a été proposée comme solution.
• L’avantage du jeu est de pouvoir vérifier la réponse en consultant le positionnement absolu, et son inconvénient est d’envoyer des données à Google Analytics à chaque tentative.
• CSS Zen Garden a longtemps été une excellente ressource pour apprendre le CSS et trouver de l’inspiration en design.
• Ce jeu et Flexbox Froggy sont parfaits pour apprendre les layouts CSS de façon ludique.
• Après avoir joué aux 10 premiers niveaux, la frustration envers le CSS a augmenté.
• Un lien vers une grande discussion précédente a été partagé.
• Flexbox Froggy a été plus utile que Grid Garden. CSS Grid reste difficile à comprendre.
• Quelqu’un s’est demandé si Subgrid avait été ajouté récemment.