Weblösungen am Puls der Zeit, innovativ und massgeschneidert.

#Blog

CMS UX-Design

vor 9 Monaten

Markus Chiarot

Flexbox

Web-Standards und Programmmiersprachen sind vielseitig und stetigen Änderungen unterworfen. Entwickler*innen sind deshalb gefordert viele Bereiche zu kennen und ihr Wissen immer auf dem neusten Stand zu halten. Dies kann wie gewohnt über Bücher, Websites oder Webinars gemacht werden. Aber es gibt auch Alternativen. Aufbauend auf dem Gedanken, dass insbesondere kreative Menschen spielerisch am besten lernen, ist die neueste Kategorie der Lernmittel das Lernspiel. Ein Testbericht.

Spielend Flexbox lernen

Flexbox Zombies

Flexbox Zombies ist ein Lernspiel von Dave Geddes. In diesem 2D Spiel lernt man ein Flexbox Grid so auszurichten, dass der Charakter mit der Armbrust die Zombies in besagtem Grid anvisieren und treffen kann. Dies wird per CSS Script in einer dafür angelegten Konsole gemacht. Unterstützt wird man dabei von Erklärungen und Tipps eines virtuellen Mentors. Sollte man mit der gestellten Aufgabe nicht weiterkommen, kann man, sozusagen als letzte Instanz, einen Tipp aktivieren. Vorkenntnisse sind für dieses Lernspiel, abgesehen von Basis CSS Syntax Kenntnissen, keine notwendig.

Ich konnte das Spiel testen und bin von dessen Wirkung vollends überzeugt. Durch die spannend gestalteten Infos und abwechslungsreichen Aufgaben konnte ich mir die sonst eher uninteressanten Programmstücke auf eine spielerische Art sehr gut merken. Als Frontend Entwickler gilt es unendlich viele verschiedene Technologien und Anwendungsmöglichkeiten im Auge zu behalten. Dabei den Überblick zu bewahren ist nahezu unmöglich, was wiederum dazu führt Dinge immer wieder nachzuschlagen. Insbesondere Dinge, welche weniger oft verwendet werden. Flexbox Zombies half mir jedoch dabei diese Technologie zu meistern und immer wieder effektiv und effizient abzurufen und einzusetzen. Die spielerische und visuelle Umsetzung hatte dabei einen signifikanten positiven Lerneffekt für mich.

Das Spiel ist kostenfrei und in englischer Sprache verfügbar unter:
https://mastery.games/p/flexbox-zombies

 

Was ist Flexbox?

Flexbox ist der aktuelle Standard in der Webentwicklung um mehrspaltige, dynamische und responsive Layouts zu entwerfen. Weiter vereinfacht Flexbox die Umsetzung von einigen kleineren Features, wie zum Beispiel vertikal zentrale Ausrichtung. Dabei ist Browserkompatibilität bis zu Internet Explorer 10 gewährleistet, entgegen dem noch mächtigeren und moderneren CSS Grid, welches leider noch keine ausreichende Browserkompatibilität geniesst.

Mit Flexbox kann man folgende Dinge ermöglichen:

  • Horizontale und vertikale Positionierung
  • Dynamische Änderung von Breiten oder Höhen (shrink/grow)
  • Maximale/Minimale Höhe oder Breite
  • Dynamisches Neu-Anordnen von Elementen

Weitere Infos zu Flexbox gibt es z.B. auf CSS-Tricks:
https://css-tricks.com/snippets/css/a-guide-to-flexbox