Apprendre CSS Grid avec un jeu de jardin virtuel

 (cssgridgarden.com)
5 points par GN⁺ 2024-06-04 | 1 commentaires | Partager sur WhatsApp
  • Grid Garden est un outil d’apprentissage ludique dans lequel on écrit du code CSS pour arroser un jardin de carottes, afin de s’exercer pas à pas à la mise en page avec CSS Grid
  • La première étape consiste à définir la colonne de départ avec la propriété grid-column-start afin que l’eau n’atteigne que la zone où se trouvent les carottes
  • grid-column-start: 3; fait démarrer la zone d’arrosage à partir de la troisième ligne de grille verticale en partant de la gauche
  • Le jardin d’exemple est une grille 5x5 construite avec display: grid, grid-template-columns et grid-template-rows, où chaque ligne et chaque colonne occupe 20 %
  • L’ensemble comprend 28 niveaux et, pour aller plus loin en CSS, on peut enchaîner avec Flexbox Froggy et Anchoreum

Une manière d’apprendre CSS Grid à travers les règles d’un jeu

  • Grid Garden est un jeu dans lequel on fait pousser un jardin de carottes en saisissant du code CSS
  • Le joueur ajuste les propriétés de CSS Grid pour n’arroser que les zones où se trouvent les carottes
  • Dans le premier niveau, on utilise grid-column-start pour définir la position de la colonne où l’arrosage commence

Premier niveau : grid-column-start et un jardin 5x5

  • grid-column-start: 3; fait commencer la zone d’arrosage à partir de la troisième ligne de séparation verticale de la grille en partant de la gauche
  • Le #garden du code d’exemple est défini comme conteneur CSS Grid
    • display: grid;
    • grid-template-columns: 20% 20% 20% 20% 20%;
    • grid-template-rows: 20% 20% 20% 20% 20%;
  • Cette configuration crée une grille 5x5 dont les colonnes et les lignes sont chacune divisées en parts de 20 %

Structure des niveaux et autres jeux à essayer ensuite

  • L’écran affiche le niveau 1 sur un total de 28 niveaux
  • D’autres jeux pour approfondir le CSS sont également proposés : Flexbox Froggy et Anchoreum

À lire aussi

1 commentaires

 
GN⁺ 2024-06-04
Avis sur Hacker News

  • J’ai toujours trouvé que cette série de Rachel Andrews était une excellente ressource d’apprentissage : https://www.smashingmagazine.com/2020/01/understanding-css-g...
    Même en venant du backend, elle m’a donné des bases solides pour créer des applis UI modernes légères et simples
    Je n’avais besoin ni de Bootstrap ni de Tailwind

    • Bootstrap abstrait le CSS pour permettre de faire des choses simples même sans bien connaître CSS, mais Tailwind ressemble plutôt à du CSS tokenisé
      On ne peut pas utiliser Tailwind sans connaître CSS, et on apprend CSS en l’utilisant
      Du coup, je le trouve au contraire assez léger et simple
    • Je recommande aussi la série de vidéos Layout Land de Jen Simmons : https://www.youtube.com/layoutland
    • Bootstrap sert plutôt, à la base, quand on ne veut pas se soucier de CSS Grid ou Flexbox
      Tailwind, en revanche, ne fait pas ça à votre place
      Si on ne connaît pas Grid ou Flexbox, Tailwind peut être aussi pénible que du CSS pur

  • Ce jeu est plutôt bon et amusant, mais il est très tentant d’expérimenter avec les valeurs dans tous les sens pour résoudre seulement le problème du moment, plutôt que de se concentrer sur « comment ça fonctionne réellement »
    Pour encourager une compréhension plus profonde, on pourrait laisser davantage de liberté pour résoudre les problèmes, mais appliquer une petite pénalité après 2 ou 3 tentatives

    • En tant que personne qui écrit du code frontend, surtout en CSS, c’est toujours une affaire d’essais et d’erreurs, et comme dit, c’est souvent proche de la force brute
      Il y a des moments où il faut réutiliser ce qu’on a appris en tâtonnant sur des problèmes similaires, et ajuster jusqu’à ce que ça marche
    • On ne peut pas rejeter un problème d’autodiscipline sur le jeu

  • Quelques notes en vrac :

    1. Point positif : la réponse est validée par la position absolue
      Donc si la réponse est valide, on peut passer le niveau même avec une méthode qui n’utilise pas la grille
    2. Point négatif : Google Analytics est appelé à chaque tentative
    • Pour le point 1, je pense que tout le monde sera d’accord pour dire que la solution robuste du premier exercice est position: relative; left: 31.4em;

  • Dans une ancienne boîte, on faisait chaque semaine environ 30 minutes de show and tell avec l’équipe, et une semaine j’ai apporté ça pour laisser les personnes qui ne codaient pas proposer des réponses
    C’était intéressant de voir jusqu’où elles pouvaient aller : certaines comprenaient immédiatement, d’autres avaient beaucoup plus de mal
    Globalement, tout le monde a apprécié, et je pense que c’était une bonne façon de donner des notions de base en programmation à des gens qui ne coderont jamais de leur vie
    Des années plus tard, des collègues me ressortaient encore des phrases du genre « c’est ça que tu fais toute la journée ? », ce qui me faisait rire parce qu’ils voyaient ça comme de la magie alors que c’est la partie la plus facile de mon travail
    Mais j’ai apprécié que le fait d’avoir essayé un peu leur ait donné plus de respect pour ce travail

  • Je pensais que Flexbox avait changé la donne pour CSS, puis Grid est arrivé, et c’était vraiment impressionnant et prévisible
    Désormais, la douleur restante en CSS, ce sont les cas bizarres du genre : « un composant doit occuper l’espace restant que ses éléments frères n’utilisent pas, et l’un de ses enfants doit lui aussi occuper tout ce que ses propres frères n’utilisent pas, puis devenir un overflow scrollable s’il n’y a plus assez d’espace »
    Il y a plusieurs cas où les interactions étranges entre Flexbox et Grid, ainsi que les priorités du calcul des tailles dans la mise en page, s’entremêlent, et je ne les comprends pas encore complètement
    C’est peut-être surtout mon problème, mais contrairement à Flexbox ou Grid eux-mêmes, cela me semble toujours peu intuitif

  • J’ai cru un instant qu’il s’agissait de https://csszengarden.com/pages/about/
    À l’époque, c’était une ressource incroyable pour apprendre CSS et trouver de l’inspiration design

    • Je considère encore cette époque comme l’âge d’or du développement web
      C’était le moment où les fruits du mouvement pour les standards du web commençaient à apparaître
      Malheureusement, React est arrivé ensuite, et les bonnes choses ont été jetées par la fenêtre
      Apparemment, même la soupe de balises devient mangeable quand elle est enterrée profondément dans node_modules

  • Quelques grandes discussions anciennes :
    2019 : https://news.ycombinator.com/item?id=21050501
    2018 : https://news.ycombinator.com/item?id=18753358
    2017 : https://news.ycombinator.com/item?id=14041367

  • Ce jeu et Flexbox Froggy sont de bonnes portes d’entrée amusantes vers la mise en page CSS

    • Le site web met bien un lien vers Flexbox Froggy, mais il passe par un lien qui demande de créer un compte
      Pour y accéder directement, allez sur https://flexboxfroggy.com/

  • J’espérais que cela m’aiderait à trouver une bonne solution pour un petit problème simple de frontend web sur lequel je travaillais
    Mais après les 10 premiers niveaux, je déteste encore plus CSS

  • Ce que je n’aime pas avec CSS Grid, c’est qu’il retire presque toute la structure sémantique du HTML
    Avec Flexbox, au moins, l’arbre HTML correspond à une certaine structure de la page, mais avec CSS Grid, on finit par voir des choses comme ça
    <-! quantité aléatoire de div sans noms de classe -->
    Du coup, pour comprendre ce qui se passe sur la page, il faut soudain comparer avec le CSS
    C’est très efficace, mais c’est laid

    • C’est un autre sujet, mais le problème pourrait être résolu par un IDE permettant de manipuler visuellement tout cela sans devoir comprendre toutes les relations entre HTML et CSS ni faire manuellement la correspondance entre les symboles