Flexbox Froggy

 (flexboxfroggy.com)
2 points par GN⁺ 2023-10-01 | 1 commentaires | Partager sur WhatsApp
  • Article de présentation de Flexbox Froggy, un jeu qui aide à apprendre le code CSS
  • Un jeu où l’on guide une grenouille vers un nénuphar en utilisant la propriété justify-content
  • La propriété justify-content permet d’aligner horizontalement les éléments à l’intérieur d’un conteneur
  • La propriété accepte plusieurs valeurs, comme flex-start (aligne les éléments à gauche), flex-end (aligne les éléments à droite), center (aligne les éléments au centre), space-between (espacement identique entre les éléments) et space-around (espacement identique autour des éléments)
  • Un exemple montre que justify-content: flex-end; permet de déplacer la grenouille vers la droite
  • Le jeu Flexbox Froggy, créé par Codepip, propose aussi des liens vers GitHub et Twitter
  • L’article recommande également Grid Garden à celles et ceux qui veulent apprendre CSS Grid

À lire aussi

1 commentaires

 
GN⁺ 2023-10-01
Avis Hacker News
  • Un article sur « Flexbox Froggy », un jeu d’apprentissage du CSS
  • Les utilisateurs recommandent des jeux similaires pour apprendre le CSS : cssgridgarden.com, cssbattle.dev, flukeout.github.io, et css-animations.io
  • Des utilisateurs disent avoir du mal à retenir des propriétés flex comme align-content et align-items, en comparant cela au problème courant de brancher un câble USB dans le mauvais sens
  • Des utilisateurs font l’éloge de CSS Grid et des options de mise en page qu’il offre
  • Des utilisateurs partagent avoir beaucoup appris grâce à des jeux comme « Flexbox Froggy »
  • Une antisèche créée par un utilisateur pour ceux qui ont du mal à se souvenir de toutes les propriétés de flexbox : darekkay.com/flexbox-cheatsheet
  • Les utilisateurs trouvent « Flexbox Froggy » particulièrement utile pour se remettre à niveau sur flexbox
  • Un utilisateur propose une fonctionnalité permettant de faire glisser-déposer une grenouille sur une grille 3x3 pour obtenir en sortie le code CSS flexbox
  • Un autre jeu davantage centré sur la lecture du CSS, guess-css.app, est recommandé
  • Des utilisateurs discutent de leurs expériences avec flexbox : certains découvrent la propriété order, d’autres expriment leur confusion face à la différence de nomenclature entre justify-content et align-items
  • Un autre jeu recommandé comme manière amusante d’apprendre le CSS : flexboxzombies.com