Flexbox Froggy

 (flexboxfroggy.com)
2 Punkte von GN⁺ 2023-10-01 | 1 Kommentare | Auf WhatsApp teilen
  • Ein interaktives Lernspiel, bei dem man CSS flexbox direkt eingibt, um Frösche zu Seerosen zu schicken, sodass sich die Wirkung von Ausrichtungseigenschaften sofort auf dem Bildschirm nachvollziehen lässt
  • Im ersten Level ist #pond bereits mit display: flex; gesetzt, und die horizontale Ausrichtung wird über justify-content verändert
  • justify-content steuert die Anordnung von Elementen im Container mit Werten wie flex-start, flex-end, center, space-between und space-around
  • Gibt man zum Beispiel justify-content: flex-end; ein, bewegt sich der Frosch zur rechten Seerose, wodurch sich Eigenschaft und Ergebnis direkt verknüpfen lassen
  • Insgesamt besteht das Spiel aus 24 Leveln und bietet mehrere Sprachen einschließlich Koreanisch sowie einen Modus zur Farbsehkorrektur

CSS flexbox spielerisch lernen

  • Flexbox Froggy ist ein Spiel, in dem man mit Froggy und seinen Freunden CSS flexbox lernt, indem man sie an die Zielposition bringt
  • Wenn man Eigenschaften im CSS-Bearbeitungsbereich für #pond eingibt, ändert sich die Position der Frösche
  • Im ersten Level besteht die Aufgabe darin, den Frosch mit justify-content zur rechten Seerose zu bewegen
  • Im Grundgerüst des Codes wird folgende Struktur angezeigt
    • #pond {
    • display: flex;
    • }

Horizontale Ausrichtung mit justify-content

  • justify-content ist eine Eigenschaft zur Ausrichtung von Elementen in horizontaler Richtung
  • Folgende Werte können verwendet werden
    • flex-start: richtet die Elemente links im Container aus
    • flex-end: richtet die Elemente rechts im Container aus
    • center: richtet die Elemente mittig im Container aus
    • space-between: setzt den gleichen Abstand zwischen die Elemente
    • space-around: setzt den gleichen Abstand um die Elemente herum
  • Mit justify-content: flex-end; bewegt sich der Frosch nach rechts, sodass sich Eigenschaftswert und Layout-Ergebnis direkt vergleichen lassen

Aufbau und verwandte Lernmaterialien

  • Das Spiel wird als Level 1 of 24 angezeigt, und in den Spracheinstellungen sind mehrere Sprachen einschließlich Koreanisch verfügbar
  • Als verwandte Spiele zum weiteren CSS-Lernen sind Grid Garden und Anchoreum verlinkt

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-10-01
Meinungen auf Hacker News

  • Es gibt auch andere spielerische Ressourcen, mit denen man CSS gut lernen kann
    https://cssgridgarden.com/ — kommt Froggy für Grid nahe
    https://cssbattle.dev/ — eine Plattform zum Lösen verschiedener Challenges, mit großer Community
    https://flukeout.github.io/ — lernt CSS-Selektoren
    https://css-animations.io/ — übt CSS-Animationen

  • Selbst wenn man jahrelang mit CSS arbeitet, sind Flex-Eigenschaften wie align-content und align-items jedes Mal wieder verwirrend
    Es fühlt sich an, als würde man ein USB-Kabel immer falsch herum einstecken; bei align und justify ist es genauso
    CSS Grid ist ebenfalls wirklich großartig. Inzwischen gibt es so viele hervorragende Layout-Optionen, dass wir ziemlich verwöhnt sind

    • Ich schreibe seit Mitte der 90er HTML und arbeite seit 10 Jahren als Webentwickler, und ich schlage häufig in den Flexbox-Guide und den Grid-Guide von CSS Tricks nach
      Ich habe mir beide Spickzettel ausgedruckt und auf den Schreibtisch gelegt; wirklich wertvolle Ressourcen
      [0] https://css-tricks.com/snippets/css/a-guide-to-flexbox/
      [1] https://css-tricks.com/snippets/css/complete-guide-grid/
    • Die Regel lautet: justify- bezieht sich auf die Hauptachse, align- auf die Querachse
      -content wird für Grid-Tracks oder Zeilen in einem flex-wrap-Container verwendet, -items für einzelne Kindelemente, also für Elemente innerhalb einer Zeile oder Grid-Zelle
      Trotzdem wären klarere Namen wünschenswert
    • Wahrscheinlich sollte das über flex-direction hinweg verallgemeinert werden. Deshalb hängt eine Eigenschaft wie flex-align von der Richtung des Elternelements ab
      In der Praxis ist es sehr selten, dass man durch das Ändern der Richtung einen großen Vorteil hat
      Ich weiß nicht, ob das der einzige Grund ist, daher würde ich nicht kategorisch sagen, dass es eine schlechte Entscheidung war, aber ich kann mir genauso wenig merken, welche Seite welche ist
      Bessere Namen, die die Achse direkt erkennen lassen, oder Eigenschaften, die unabhängig von der Richtung des Elternelements sind, wären schön gewesen; bis dahin muss man eben Spickzettel verwenden
    • Flexbox und Grid ziehen die ganze Aufmerksamkeit auf sich, aber man sollte auch den Nutzen von columns nicht vergessen: https://developer.mozilla.org/en-US/docs/Web/CSS/columns
    • flex-basis, flex-grow und flex-shrink bekomme ich einfach nicht richtig in den Kopf
      Allerdings muss ich mich nicht oft darum kümmern; vielleicht bleiben sie mir deshalb noch weniger im Gedächtnis

  • Mit solchen Spielen habe ich wirklich viel gelernt. Vim habe ich auch über https://vim-adventures.com/ gelernt, und inzwischen kann ich fast nicht mehr ohne Vim leben

  • Frühere HN-Beiträge:
    https://news.ycombinator.com/item?id=30251054 2022, 317 Punkte, 31 Kommentare
    https://news.ycombinator.com/item?id=22629903 2020, 27 Punkte, 2 Kommentare
    https://news.ycombinator.com/item?id=21796926 2019, 2 Punkte, 0 Kommentare
    https://news.ycombinator.com/item?id=18752031 2018, 3 Punkte, 0 Kommentare
    https://news.ycombinator.com/item?id=18731852 2018, 6 Punkte, 1 Kommentar
    https://news.ycombinator.com/item?id=15605783 2017, 4 Punkte, 0 Kommentare
    https://news.ycombinator.com/item?id=14349739 2017, 3 Punkte, 0 Kommentare
    https://news.ycombinator.com/item?id=10652909 2015, 315 Punkte, 69 Kommentare

  • Hervorragend. Ich habe es früher genutzt, als ich flexbox gelernt habe.
    Vom selben Entwickler gibt es auch https://codepip.com/games/grid-garden/; damit lernt man CSS Grid nach demselben Ansatz.

    • Spiele scheinen eine wirklich gute Methode zu sein, CSS zu lernen.
      Vermutlich, weil man Probleme, die dank des bereits Gelernten einfach wirken, nach und nach schwieriger löst und so ein sehr natürlicher Lernpfad entsteht.
      Früher habe ich dieses Spiel mit Spaß gespielt, um CSS-Selektoren zu lernen: https://flukeout.github.io/

  • Guess CSS hat ebenfalls einen Flexbox-Abschnitt, legt den Schwerpunkt aber eher auf das Lesen von CSS als auf das Schreiben: https://www.guess-css.app/

    • Bei CSS position habe ich ganz offensichtlich wirklich überhaupt nichts verstanden.
      Die anderen Aufgaben konnte ich immer wieder richtig lösen, aber bei position lag ich ständig falsch.

  • Sehr nützlich. Ich suche am Ende immer wieder nach der vertikalen Ausrichtung in flexbox.
    Damit man sein flexbox-Wissen in Eile schnell auffrischen kann, wäre eine Funktion schön, bei der man den Frosch per Drag-and-drop in ein 3x3-Raster zieht und der passende flexbox-CSS-Code ausgegeben wird.
    Trotzdem ist es ein sehr sorgfältig gemachtes Tutorial.
    Ich sage das, weil ich persönlich aufgegeben habe, mit neuen CSS-Funktionen ständig Schritt zu halten. Ich nutze CSS seit IE7-Zeiten immer mal wieder, und nachdem ich die Zeit erlebt habe, in der man Vendor-Prefixes von Hand geschrieben hat, sowie die neuen Features, die Chrome Canary vorangetrieben hat, habe ich keine Energie mehr, CSS-Tricks ständig im Kopf zu behalten.

    • Inzwischen gibt es kaum noch solche Tricks, und auch nicht mehr viel, mit dem man Schritt halten müsste. Flexbox und Grid sind im Grunde die Endstufe.
      Für die meisten UIs reicht flexbox völlig aus; im Grunde ist es ein Werkzeug, um Elemente vertikal und horizontal anzuordnen, wie stack/group oder vbox/hbox.
      Man muss flexbox lernen. Es ist das Nützlichste, was in CSS-Layout Einzug gehalten hat, und wirklich simpel. Abstände macht man mit gap, die Ausrichtung im Wesentlichen mit justify und align; 99 % sind damit erledigt.

  • Ich mag Flexbox Froggy. Man kann wohl sagen, dass eine ganze Entwicklergeneration auf dieser Seite flexbox gelernt hat. Ich auch.

    • Bei mir hat es dank Flexbox Froggy mit dem flexbox-Konzept endlich Klick gemacht.
      Zu dem Zeitpunkt hatte ich bereits 15 Jahre lang CSS verwendet.
      Ein erstaunliches Lernwerkzeug.

  • Auch Josh Comeaus interaktiver Guide zu flexbox ist sehenswert: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...

  • Gut. Eine Tailwind-Version wäre auch schön.