Flexbox Froggy

 (flexboxfroggy.com)
2 points par GN⁺ 2023-10-01 | 1 commentaires | Partager sur WhatsApp
  • Jeu d’apprentissage interactif où l’on saisit directement du CSS flexbox pour envoyer des grenouilles sur des nénuphars, ce qui permet de voir immédiatement à l’écran l’effet des propriétés d’alignement
  • Le premier niveau consiste à modifier l’alignement horizontal avec justify-content, alors que display: flex; est déjà défini sur #pond
  • justify-content ajuste la disposition des éléments dans le conteneur avec des valeurs comme flex-start, flex-end, center, space-between et space-around
  • Par exemple, si l’on saisit justify-content: flex-end;, la grenouille se déplace vers le nénuphar de droite, ce qui permet de relier la propriété à son résultat
  • L’ensemble comprend 24 niveaux et propose plusieurs langues, dont le coréen, ainsi qu’un mode de correction du daltonisme

Apprendre le CSS flexbox par le jeu

  • Flexbox Froggy est un jeu qui permet d’apprendre le CSS flexbox en envoyant Froggy et ses amis vers leur position cible
  • Lorsqu’on écrit des propriétés dans la zone d’édition du code CSS de #pond, la position des grenouilles change
  • Le premier niveau consiste à utiliser justify-content pour envoyer la grenouille vers le nénuphar de droite
  • Le code de base affiche la structure suivante
    • #pond {
    • display: flex;
    • }

Apprendre l’alignement horizontal avec justify-content

  • justify-content est une propriété qui aligne les éléments horizontalement
  • Les valeurs disponibles sont les suivantes
    • flex-start : aligne les éléments à gauche du conteneur
    • flex-end : aligne les éléments à droite du conteneur
    • center : aligne les éléments au centre du conteneur
    • space-between : place un espacement identique entre les éléments
    • space-around : place un espacement identique autour des éléments
  • Avec justify-content: flex-end;, la grenouille se déplace vers la droite, ce qui permet de comparer immédiatement la valeur de la propriété et le résultat de la disposition

Structure et ressources d’apprentissage associées

  • Le jeu est affiché comme Level 1 of 24, et les paramètres de langue incluent plusieurs langues, dont le coréen
  • Parmi les jeux liés pour approfondir le CSS figurent Grid Garden et Anchoreum

À lire aussi

1 commentaires

 
GN⁺ 2023-10-01
Avis sur Hacker News

  • Il existe aussi d’autres ressources ludiques pour apprendre le CSS
    https://cssgridgarden.com/ — proche de Froggy pour Grid
    https://cssbattle.dev/ — une plateforme pour résoudre divers défis, avec une grande communauté
    https://flukeout.github.io/ — pour apprendre les sélecteurs CSS
    https://css-animations.io/ — pour s’exercer aux animations CSS

  • Même après plusieurs années à manipuler du CSS, les propriétés liées à flex comme align-content et align-items me mélangent toujours les pinceaux
    C’est comme brancher systématiquement un câble USB à l’envers, et c’est pareil avec align et justify
    CSS Grid est vraiment formidable aussi. Nous avons désormais tellement d’excellentes options de mise en page que nous sommes plutôt gâtés

    • J’écris du HTML depuis le milieu des années 90 et je travaille comme développeur web depuis 10 ans, mais je consulte souvent le guide flexbox et le guide grid de CSS Tricks
      J’ai aussi imprimé leurs aide-mémoire et je les garde tous les deux sur mon bureau ; ce sont des ressources vraiment précieuses
      [0] https://css-tricks.com/snippets/css/a-guide-to-flexbox/
      [1] https://css-tricks.com/snippets/css/complete-guide-grid/
    • La règle est la suivante : justify- correspond à l’axe principal, align- à l’axe transversal
      -content s’utilise pour les pistes de grid ou les lignes d’un conteneur flex-wrap, tandis que -items s’applique aux enfants individuels, c’est-à-dire aux éléments dans une ligne ou une cellule de grid
      Cela dit, j’aimerais quand même que les noms soient plus explicites
    • Je pense qu’ils ont probablement voulu généraliser le tout à flex-direction. Du coup, une propriété comme flex-align dépend de la direction du parent
      En pratique, les cas où changer la direction apporte un gros bénéfice sont très rares
      Je ne sais pas si c’est la seule raison, donc je ne dirais pas catégoriquement que c’était un mauvais choix, mais moi aussi je n’arrive jamais à retenir quel côté correspond à quoi
      De meilleurs noms indiquant directement l’axe, ou des propriétés indépendantes de la direction du parent, auraient été préférables ; en attendant, il faut utiliser une cheat sheet
    • Flexbox et Grid captent toute l’attention, mais il ne faut pas oublier l’utilité de columns : https://developer.mozilla.org/en-US/docs/Web/CSS/columns
    • Je n’arrive vraiment pas à bien mémoriser flex-basis, flex-grow et flex-shrink
      Cela dit, je n’ai pas souvent besoin de m’en préoccuper, ce qui explique peut-être aussi pourquoi ça ne reste pas en tête

  • J’ai énormément appris grâce à ce genre de jeux. J’ai aussi appris Vim avec https://vim-adventures.com/, et aujourd’hui je peux à peine m’en passer

  • Anciens posts HN :
    https://news.ycombinator.com/item?id=30251054 2022, 317 points, 31 commentaires
    https://news.ycombinator.com/item?id=22629903 2020, 27 points, 2 commentaires
    https://news.ycombinator.com/item?id=21796926 2019, 2 points, 0 commentaire
    https://news.ycombinator.com/item?id=18752031 2018, 3 points, 0 commentaire
    https://news.ycombinator.com/item?id=18731852 2018, 6 points, 1 commentaire
    https://news.ycombinator.com/item?id=15605783 2017, 4 points, 0 commentaire
    https://news.ycombinator.com/item?id=14349739 2017, 3 points, 0 commentaire
    https://news.ycombinator.com/item?id=10652909 2015, 315 points, 69 commentaires

  • Excellent. Je l’ai utilisé autrefois pour apprendre flexbox
    Il existe aussi https://codepip.com/games/grid-garden/, créé par le même auteur, qui permet d’apprendre CSS Grid avec la même approche

    • Les jeux me semblent être une très bonne façon d’apprendre le CSS
      Sans doute parce qu’en résolvant des problèmes qui paraissent faciles grâce à ce qu’on a déjà appris, puis qui deviennent progressivement plus difficiles, cela crée un parcours d’apprentissage très naturel
      J’avais pris plaisir à faire ce jeu pour apprendre les sélecteurs CSS : https://flukeout.github.io/

  • Guess CSS a aussi une section Flexbox, mais elle est davantage axée sur la lecture du CSS que sur son écriture : https://www.guess-css.app/

    • Pour CSS position, il est clair que je ne comprends vraiment rien
      J’arrivais à trouver les autres exercices, mais pour position, je me trompais sans arrêt

  • Très utile. Je finis toujours par chercher l’alignement vertical en flexbox
    Pour aider à se remettre rapidement en tête flexbox quand on est pressé, ce serait bien d’avoir une fonctionnalité où l’on glisse-dépose la grenouille dans une grille 3x3, et qui affiche le code CSS flexbox correspondant
    Cela reste un tutoriel très soigné
    Si je dis ça, c’est parce que j’ai personnellement renoncé à suivre en continu les nouvelles fonctionnalités CSS. J’utilise CSS par intermittence depuis l’époque d’IE7, et après avoir connu l’époque où l’on écrivait les vendor prefixes à la main et les nouveautés que Chrome Canary poussait, je n’ai plus l’énergie de garder toutes ces astuces CSS en tête

    • Il n’y a presque plus d’astuces maintenant, et pas grand-chose à suivre. Flexbox et Grid sont en quelque sorte l’étape finale
      Pour la plupart des UI, flexbox suffit, et c’est essentiellement un outil pour disposer les éléments verticalement et horizontalement, comme stack/group ou vbox/hbox
      Il suffit d’apprendre flexbox. C’est ce qui est arrivé de plus utile au layout CSS, et c’est vraiment simple. Pour l’espacement, gap; pour la disposition, essentiellement justify et align, et dans 99 % des cas ça s’arrête là

  • J’aime Flexbox Froggy. On pourrait dire qu’une génération entière de développeurs a appris flexbox avec ce site. Moi aussi

    • Dans mon cas, grâce à Flexbox Froggy, le concept de flexbox a enfin fait tilt dans ma tête
      À ce moment-là, j’utilisais déjà CSS depuis 15 ans
      C’est un outil pédagogique remarquable

  • Le guide interactif sur flexbox de Josh Comeau vaut aussi le détour : https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...

  • Bien. Ce serait bien d’avoir aussi une version Tailwind