6 unterhaltsame Spiele zum einfachen Erlernen von CSS

6 jocuri distractive pentru a vă ajuta să învățați CSS cu ușurință
⏱️ 5 min read

CSS zu lernen kann eine frustrierende Erfahrung sein, aber es muss nicht langweilig sein! Eines der besten Dinge beim Erlernen des Codierens ist, dass Leute, die gut im Codieren sind, auch die Fähigkeiten haben, Spiele zu entwickeln, die anderen Leuten das Codieren beibringen. Es gibt keinen Ersatz für Übung und Experimentieren beim Erlernen von grundlegendem CSS, aber Spiele helfen definitiv, und neuere Layoutmodelle wie Grid und Flexbox profitieren besonders von einem praktischen Lernmodell.

Hier sind einige Spiele, mit denen Sie CSS in kürzester Zeit beherrschen können.

1. CSS Diner: CSS-Selektoren

Ziemlich einfach, oder? Elemente, Klassen, IDs auswählen … vielleicht Pseudoklassen? Was gibt es noch? Tatsächlich gibt es mehr Möglichkeiten, Elemente auszuwählen, als Sie vielleicht denken, und CSS Diner möchte Ihnen den Umgang mit ihnen beibringen, indem Sie aufgefordert werden, Lebensmittelstücke mit CSS auszuwählen. Einige der Herausforderungen können etwas verwirrend sein, aber das ist Codierung – es ist keine Schande, sie zu googeln.

2. Flexbox Zombies

Flexbox Zombies ist ein wahnsinnig gut entwickeltes Spiel / Kurs, der Ihnen den Umgang mit Flexbox mit einem intuitiven, ansprechenden und sich selbst verstärkenden Spiel beibringen soll, bei dem es hauptsächlich darum geht, Zombies mit Waffen zu schießen, die vom Flexbox-Code gesteuert werden. Es führt Sie von den Grundlagen bis zu den fortgeschrittenen Dingen in mehreren Levels, die mit einer Storyline, coolen Grafiken und Zombietötungsaktionen ausgestattet sind – vielleicht vergessen Sie sogar, dass Sie CSS lernen.

CSS-Spiele Flexbox Zombies

Flexbox selbst ist eine großartige Technologie, um Inhalte in einer Dimension reaktionsschnell zu organisieren. Wenn Sie mit der Front-End-Webentwicklung etwas anfangen, sind Sie es sich selbst schuldig, sie zu lernen. Unabhängig davon, ob Sie es verschoben haben oder nicht, Flexbox Zombies ist eine hervorragende Ausrede, um ein Spiel zu spielen, das Ihnen wirklich etwas beibringt. Wenn nur alle Bildung so sein könnte, oder?

Der gleiche Entwickler hat auch einen Spielkurs für CSS Grid mit dem Namen „Grid Critters. ” Es ist nicht kostenlos, aber wenn Sie Flexbox Zombies mögen, können Sie das Geld darauf fallen lassen.

3. Gittergarten

Persönlich denke ich, dass Flexbox in Ordnung ist, aber es scheint wirklich eindimensional (Reihe) oder Spalten-) Layouts. Bei größeren Projekten und Vorlagen sollten Sie sich daher dem Raster zuwenden (möglicherweise mit einigen Flexbox-Containern in den Rasterzellen). Sobald Sie es herausgefunden haben, ist es ordentlich und sauber und erstaunlich, aber es kann ein bisschen Lernkurve geben, wo Gittergarten (und die oben genannten Grid Critters) können helfen.

CSS Games Grid Garden

Grid Garden ist ein kostenloses Spiel, bei dem Sie einen Garten anlegen müssen, damit Ihre Karotten bewässert und das Unkraut vergiftet wird – und es stellt sich heraus, dass Grid perfekt für diese Aufgabe ist! Sie erhalten einen soliden Überblick über die grundlegende Rasterpositionierung, die Sie dann auf Ihre eigenen Site-Layouts anwenden können

4. Flexbox Defense

CSS-Spiele Flexbox

Sie kennen bereits die Grundlagen der Flexbox, können aber nicht ganz richtig „ausrichten“ und „ausrichten“? Flexbox Defense ist ein Flexbox-Tutorial, das als Tower-Defense-Spiel getarnt ist und sicherstellt, dass Sie sich daran erinnern, dass Sie sich an Ihren Rechtfertigungsinhalt erinnern und sich selbst ausrichten – oder sterben. Aber Sie können es einfach noch einmal versuchen. Wenn Sie noch nie ein Fan dieser Spiele waren, die nur eine richtige Antwort akzeptieren, wird Ihnen diese gefallen, da Sie die Türme so positionieren können, wo Sie möchten, und selbst erfolgreich sein oder scheitern können.

5. Flexbox Froggy

CSS-Spiele Flexbox Froggy

Sie könnten wahrscheinlich einen soliden Nachmittag verbringen, wenn Sie nur vorhandene Flexbox-Tutorials durchgehen, aber es ist wahrscheinlich besser, sie über ein paar Tage oder Wochen zu verteilen, um sicherzustellen, dass Sie viele Speicherauffrischungen erhalten. Flexbox Froggy ist perfekt dafür – es bringt dich nicht von Null aufwärts, aber wenn du jemals die Befehle vergisst, kannst du in wenigen Minuten durch dieses Spiel rennen, um dich wieder auf den neuesten Stand zu bringen.

6. CodePip-Spiele

CSS Games Codepip

Wenn Sie sich Grid Garden und Flexbox Froggy angesehen haben, haben Sie einige Beispiele dafür gesehen CodePips Arbeit bereits. Dies sind nur die beiden kostenlosen Spiele, die sie anbieten. Wenn Sie sich auf ihrer Website für ein Pro-Konto anmelden, gibt es auch Spiele, die von der allgemeinen CSS-Überprüfung bis hin zu JavaScript reichen.

Wie viel CSS wird mir das beibringen?

Das Durchlaufen dieser Spiele kann Ihnen dabei helfen, einige grundlegende Konzepte recht gut zu erlernen – insbesondere, wenn Sie Flexbox lernen möchten. Letztendlich können Spiele Ihnen jedoch nur beibringen, welche Wörter Sie eingeben müssen. Sie müssen sie in die Praxis umsetzen, wenn Sie wirklich herausfinden möchten, wie man sie verwendet. Holen Sie sich einen guten Code-Editor und einige Ideen, die Sie implementieren möchten, und fangen Sie an, herumzuspielen!

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Benutzerbild von Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

Das könnte dich auch interessieren …

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x