Anzeige
Anzeige
Tool-Tipp
Artikel merken

CSS ist kompliziert? Mit diesen Spielen lernst du wichtige CSS-Features wie nebenbei

Am Rechner spielen und gleichzeitig neues Wissen über das Grid-Modul, CSS Flexbox oder die verschiedenen CSS-Selektoren erwerben – hört sich nach einem guten Plan an? Dann haben wir ein paar Spiele für euch.

3 Min. Lesezeit
Anzeige
Anzeige

(Foto: Shutterstock)

CSS steht für Cascading Style Sheets und ist eine der Kernsprachen des Webs. Die Programmiersprache zu beherrschen, die dafür sorgt, dass Websites über den Look von HTML hinaus gestaltet werden können, ist allerdings ein Thema für sich. Wir haben einige Spiele zusammengetragen, über die ihr den Umgang mit wichtigen CSS-Features spielerisch lernt.

Grid Garden

CSS-Grid-Garden im Einsatz

CSS Grid Garden im Einsatz. (Screenshot: Vladimir Simovic/t3n)

Anzeige
Anzeige

Das Grid-Layout-Modul von CSS3 ist eine wichtige Layout-Technik, die Frontend-Entwicklern das Layouten in CSS deutlich einfacher macht. Vor dessen Einführung mussten Entwicklerinnen zum Platzieren von Elementen auf eine CSS-Eigenschaft namens float zurückgreifen.

CSS3-Grids sind einfacher und leistungsfähiger

Dank des Grid-Moduls müssen Entwickler dabei jetzt nicht mehr ganz so sehr um die Ecke denken, wie das noch zu Zeiten der float-basierten Layouts war. Gegenüber dem Flexbox-Konzept haben CSS-Grids den klaren Vorteil, dass sie nicht nur linear, sondern zweidimensional wirken können. Mit dem CSS3-Grid-Modul kann man nämlich sowohl die Spalten als auch die Zeilen gezielt ansprechen. Somit sind anspruchsvolle Gestaltungsraster auf Basis von CSS möglich.

Anzeige
Anzeige

Obwohl das CSS Grid im Vergleich eine deutliche Usability-Verbesserung darstellt, werden Einsteiger von den vielen Möglichkeiten, die das Modul bietet, regelrecht erschlagen. CSS Grid Garden will euch das Lernen versüßen. In 28 Lektionen lässt euch das Browser-Spiel ein Beet mit Möhren bepflanzen, einzelne Parzellen davon bewässern oder von Unkraut befreien. Spielerisch lernt und festigt ihr so die Eigenschaften des Moduls und was sie einzeln oder in Kombination bewirken.

Anzeige
Anzeige

Flexbox Froggy

CSS Spiel

In Flexbox Froggy wollen niedliche Frösche auf ihre Seerosenblätter zurückgebracht werden. (Screenshot: Codepip/t3n)

Flexbox oder das Flexible Box Modul, wie das Layoutmodell ausgeschrieben heißt, ist ähnlich wie CSS Grid eine CSS-Methode, die die float-Eigenschaft weitestgehend abgelöst hat. Sie befähigt Web-Entwicklerinnen, die Platzverteilung zwischen Elementen und deren Ausrichtung entlang einer Schnittstelle festzulegen. Bei der Arbeit mit dem Modul müssen Entwickler in Achsen denken: der Hauptachse und der Querachse, anhand derer einzelne Elemente ausgerichtet werden können. Zu verinnerlichen, wie das funktioniert und wie die einzelnen Eigenschaften des Moduls dabei eingesetzt werden können, um eine bestimmte Platzierung zu erreichen, kann ganz schön Kopfzerbrechen bereiten. Flexbox Froggy bringt hier einen Gamification-Ansatz ein. Das kleine Browsergame dreht sich um niedliche Frösche, die über die Eingabe der richtigen Flexbox-Eigenschaften zurück auf ihre Seerosenblätter gebracht werden wollen. Das Beste daran: Wer nicht weiterkommt, findet auf Youtube zahlreiche Walkthroughs zum Schummeln. Ein anderes Spiel, das in eine ähnliche Kerbe schlägt, ist Flexbox Defense, ein Lernspiel, in dem ihr über die richtige Platzierung von Türmen eure Feinde davon abhalten müsst, euer Territorium zu stürmen.

Flexbox Zombies

CSS Zombie Spiel

Flexbox Zombies ist ein Adventure-Game, in dem ihr euch mithilfe von Flexbox-Properties gegen Zombies verteidigen müsst. (Screenshot: Mastery Games/t3n)

Flexbox Zombies erfordert im Unterschied zu den anderen Spielen eine Registrierung mit Nutzername, E-Mailadresse und Passwort, bietet dafür allerdings auch ein komplettes Adventure-Game, in dessen Verlauf ihr spielerisch lernt, mit dem Flexbox-Modul umzugehen. Es verfügt über eine richtige Story – es geht darum, dass ihr die Zombie-Apokalypse überleben müsst – und wird sogar von der passenden apokalyptischen Musik untermalt.

Anzeige
Anzeige

CSS Dinner

css diner spiel

Bei CSS Dinner müssen über Selektoren einzelne Gegenstände ausgewählt werden (Screenshot: Flukeout/t3n)

Bei CSS Dinner dreht sich alles um sogenannte CSS-Selektoren. In 32 Levels müssen Spielende mithilfe verschiedener Selektoren einzelne Elemente, die sich auf dem Esstisch befinden, auswählen – bei steigendem Schwierigkeitsgrad.

Mehr zu diesem Thema
CSS
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Ein Kommentar
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Keiner

Sehr hilfreich, vorallem der Gridgarden. Wenn jetzt noch der Browsersupport besser wäre

Antworten

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige