Learn Coding/Programming

★Alle Inhalte werden automatisch übersetzt.

Ich habe ein Spiel zum Erlernen von CSS Flexbox namens Flexbox Froggy gemacht. Das Ziel des Spiels ist es, dem Frosch durch das Schreiben von CSS-Code zu helfen, das Seerosenblatt zu erreichen. Sehen Sie, ob Sie alle Level schlagen können!

Flexbox Froggy ist inspiriert vom klassischen Arcade-Spiel Frogger und Spielen zur Internetkompetenz wie dem großartigen CSS Diner und Erase All Kittens, wo Sie etwas über CSS-Selektoren bzw. HTML-Markup lernen können.

Ich habe mich zum Teil für CSS Flexbox entschieden, weil seine Layout-Eigenschaften für eine gute Spielmechanik sorgen. Das Spielniveau ähnelt der Aktivität „Zombie-Positionierung“, die in der Mozilla Thimble-Lernarbeit erschienen ist, verwendet jedoch ein leistungsstarkes neues Flexbox-Modell anstelle der absoluten Positionierung.

Flexbox ist ein gutes Thema, weil auch Anfänger diese verbesserten Positionierungsmethoden auf Anhieb lernen können, aber viele erfahrene Webentwickler, die sich damit noch nicht auskennen, endlich damit umgehen können. Das bedeutete, dass ich selbst eine Weile lernen wollte. Zu diesem Zweck gibt es die besten Tutorials wie CSS Tricks, Codrops und Scotch.io, aber nur wenige haben interaktive Lernerfahrungen.