Flexbox Froggy

 (flexboxfroggy.com)
2 Punkte von GN⁺ 2023-10-01 | 1 Kommentare | Auf WhatsApp teilen
  • Artikel zur Vorstellung des Spiels „Flexbox Froggy“, das beim Erlernen von CSS-Code hilft
  • Ein Spiel, bei dem man Frösche mithilfe der Eigenschaft justify-content zu Seerosenblättern führt
  • Die Eigenschaft justify-content richtet Elemente innerhalb eines Containers horizontal aus
  • Die Eigenschaft erlaubt verschiedene Werte wie flex-start (richtet Elemente links aus), flex-end (richtet Elemente rechts aus), center (richtet Elemente zentriert aus), space-between (gleicher Abstand zwischen den Elementen) und space-around (gleicher Abstand um die Elemente herum)
  • Es wird ein Beispiel gezeigt, bei dem justify-content: flex-end; den Frosch nach rechts bewegt
  • Das Spiel „Flexbox Froggy“ wurde von Codepip entwickelt; Links zu GitHub und Twitter sind vorhanden
  • Für alle, die CSS Grid lernen möchten, empfiehlt der Artikel „Grid Garden“

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-10-01
Hacker-News-Kommentare
  • Artikel über "Flexbox Froggy", ein Lernspiel für CSS
  • Von Nutzern empfohlene ähnliche Spiele zum Lernen von CSS: cssgridgarden.com, cssbattle.dev, flukeout.github.io und css-animations.io
  • Nutzer äußern, dass sie sich Flex-Eigenschaften wie align-content und align-items nur schwer merken können, und vergleichen das mit dem häufigen Problem, ein USB-Kabel falsch herum einzustecken
  • Nutzer loben CSS Grid und die Layout-Optionen, die es bietet
  • Nutzer berichten, dass sie durch Spiele wie "Flexbox Froggy" viel gelernt haben
  • Von einem Nutzer erstelltes Cheat Sheet für Menschen, denen es schwerfällt, sich alle Flexbox-Eigenschaften zu merken: darekkay.com/flexbox-cheatsheet
  • Nutzer finden "Flexbox Froggy" besonders nützlich, um ihr Wissen über Flexbox aufzufrischen
  • Ein Nutzer schlägt eine Funktion vor, bei der man Frösche per Drag-and-Drop in ein 3x3-Raster zieht und als Ausgabe den passenden Flexbox-CSS-Code erhält
  • Ein weiteres Spiel mit stärkerem Fokus auf das Lesen von CSS wird empfohlen: guess-css.app
  • Nutzer diskutieren ihre Erfahrungen mit Flexbox; einige lernten dabei die Eigenschaft order kennen, andere äußern Verwirrung über die Unterschiede in der Benennung von justify-content und align-items
  • Ein weiteres Spiel, das als unterhaltsame Möglichkeit empfohlen wird, CSS zu lernen: flexboxzombies.com