Lernen Sie CSS Flexbox mit dem Flexbox Froggy Game
In der Vergangenheit haben wir die Flexbox und ihre Grundlagen überarbeitet. Die Anwendung von Flexbox auf Ihren Workflow kann jedoch eine Herausforderung darstellen, da dies eine komplizierte Ergänzung der CSS-Spezifikation ist.
Mit Flexbox Froggy können Sie lerne alle Grundlagen von flexbox mit einem lustigen Spiel mit Fröschen und Lilypads. Ich weiß, es klingt verrückt, aber das ist wirklich eine großartige Webapp.
Sie beginnen mit Stufe 1 und Arbeite dich langsam durch 24 verschiedene Level Vermittlung der vielen Aspekte der Flexbox-Orientierung. Die ersten Level beginnen leicht, wenn Sie dazu aufgefordert werden Richten Sie einen oder zwei Frösche an einem einzigen Behälter aus. Frühe Lektionen enthalten auch Tipps und Vorschläge, die Sie auf Ihrem Weg unterstützen.
Aber wenn Sie erst einmal an Lektion 10 vorbeigekommen sind, wird es wirklich heiß. Sie müssen lernen, wie man re ist-Artikel in einem Container organisieren, wie man organisieren Inhalt vertikal, und wie man erstellt äquidistanter Abstand zwischen verschiedenen Zeilen unterschiedlichen Inhalts.
Die niedlichen kleinen Frösche locken Sie vielleicht, aber seien Sie sich sicher, dass dies ein hartes Spiel ist.
jedoch, vom kompletten Anfänger bis zum erfahrenen Webentwickler, das spiel ist für alle ebenen gemacht. Die ersten Lektionen sind ein Kinderspiel, und die späteren Lektionen können Sie mit geblähten Haaren an der Seite über den Bildschirm ziehen lassen.
Der vollständige Quellcode des Spiels ist kostenlos auf GitHub verfügbar, sodass Sie ihn herunterladen und lokal abspielen können, wenn Sie möchten.
Außerdem ist die Webapp mehrsprachig 20 Sprachen anbieten einschließlich Englisch, Französisch, Deutsch, Italienisch, Chinesisch, Japanisch und Russisch (und viele andere).
Das gebe ich zu Das Umstellen von Fröschen macht Sie nicht sofort zum Meister von flexbox. Aber diese Lektionen sind dazu gedacht Machen Sie sich mit der Flexbox-Syntax vertraut So können Sie sich beim Arbeiten in realen Szenarien wohler fühlen.
Wenn du ein bist Webentwickler jeder Könnensstufe Sie sollten sich Flexbox Froggy auf jeden Fall ansehen. Es ist völlig kostenlos, ziemlich lustig und überraschend lehrreich.
