CSS-Konzepte spielerisch lernen

in  Basics , , , ,

CSS-Konzepte spielerisch lernen

Die Cascading Style Sheets zum Gestalten von Internetseiten und Webanwendungen gibt es schon eine ganze Ewigkeit. Elementare Dinge ändern sich hier vergleichsweise selten.

Mit der Umstellung von Bootstrap 3 auf Bootstrap 4 kommt man jedoch nicht umhin, sich mit dem Flexbox-Konzept auseinander zu setzen. Hier kommt man mit den alten Floats nicht mehr weit. Am Anfang ist das ein ungewohntes Umdenken. Aber sobald man Flex einmal verstanden hat, möchte man auch nicht mehr ohne.

Für den ersten Einstieg gibt es mit Flexbox Froggy ein schönes interaktives Spiel. Hier kann man die Funktionen auf angenehme Weise erkunden und direkt sehen, wie sich die einzelnen Direktiven und ihre Kombination verhalten.

Für CSS-Grids existiert ebenfalls ein Spiel: Grid Garden. Die CSS-Grids werden zwar in Bootstrap noch nicht verwendet, aber einmal Anschauen schadet auch hier nicht.

Noch eine ganze Reihe ähnlicher Spiele bietet die Plattform Codepip - diese erfordern jedoch eine Anmeldung.

Weitere Beiträge in Kategorie Basics

Einfaches JS-Management mit ImportMaps in neuer Symfony AssetMapper-Komponente
- Im Symfony-Ökosystem werden Frontend-Komponenten seit einiger Zeit zunehmend über UX-Komponenten verarbeitet. Auch wenn hierdurch einige Anbelange vereinfacht werden, ist doch oftmals der Aufbau einer …
Symfony UX im Kontext von ModuleStudio
- Stimulus und Symfony UX Ein JavaScript-Ökosystem für Symfony wurde bereits Ende 2020 gestartet. Vereinfacht ausgedrückt wurde Symfony Flex erweitert, um auch JavaScript-Anteile in einem Bundle leicht …
Das Buch zu Symfony ist in einer neuen Version erschienen
- Bereits im Jahr 2020 haben wir das Buch “Symfony: The Fast Track” hier vorgestellt. Nun ist eine neue Auflage bereitgestellt worden, welche auf den Stand für Symfony 5.4 und 6.0 gebracht …
Symfony und API Platform starten offiziellen Docker-Support
- Seit knapp einem Monat steht eine umfangreiche Unterstützung zur Docker-basierten Arbeit mit Symfony bereit. Hierbei gibt es Neuerungen in mehreren zentralen Werkzeugen, die ineinander greifen und …
Optische Varianzen mit SCSS-Maps umsetzen
- In vielen Weblayouts ist es notwendig, unterschiedliche Ausprägungen einer bestimmten kosmetischen “Stellschraube” zu realisieren. So können etwa einzelne Akzentfarben je nach Unterseite, …