Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Spielerisch CSS Flexbox lernen: Mit diesem Game hast du die neue Spezifikation in Nullkommanix drauf

CSS-Lernspiel. (Screenshot: Flexbox Froggy)

Flexbox Froggy ist ein unterhaltsames Online-Game, das euch die Funktionsweise von CSS flexbox näherbringt. Wir verraten euch, wie das funktioniert.

Flexbox Froggy: Bewegt den Frosch mit CSS

Flexbox ist ein CSS-Layoutmodus, mit dem ihr Elemente innerhalb eines Containers passend für unterschiedliche Bildschirmgrößen anordnen könnt. Mit Flexbox Froggy gibt es jetzt ein lustiges Online-Game, das euch den Umgang mit dem Layoutmodus näherbringen will. Ziel des Spiels ist es, die auf der rechten Seite des Screens angezeigten Frösche auf die jeweiligen Seerosenblätter zu bewegen.

Flexbox Froggy ist ein spaßiges CSS-Lernspiel. (Screenshot: Flexbox Froggy)
Flexbox Froggy ist ein spaßiges CSS-Lernspiel. (Screenshot: Flexbox Froggy)

Statt per Tastatur oder Gamepad steuert ihr die Frösche in Flexbox Froggy allerdings per CSS-Code. Aber keine Angst, das Spiel richtet sich natürlich an Einsteiger, die sich mit Flexbox noch nicht auskennen. Daher werden euch auch Tipps angezeigt, sodass ihr nicht nur zum jeweils nächsten Level kommt, sondern auch lernt, wie das Layouten mit Flexbox funktioniert.

CSS-Flexbox: Weiterführende Video-Tutorials

Wer sich zwar für den Layoutmodus interessiert, aber eher keine Spielernatur ist, sollte sich unseren t3n-Video-Workshop zum Thema Flexbox anschauen. Und wer noch tiefer in die Materie eintauchen will, kann sich diesen 20-teiligen Videokurs zu Gemüte führen.

via www.webdesignernews.com

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.