Kostenlose Tutorials für Anfänger

Appearance

Kapitel 17: Lernressourcen ​

17.1 Offizielle Dokumentation (CSS Flexbox-Spezifikation, optional) ​

MDN Web Docs (Empfohlen!) ​

Link: https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout

Vorteile:

  • ✅ Sehr guter, verständlicher Stil
  • ✅ Viele Beispiele
  • ✅ Browser-Kompatibilitätstabellen
  • ✅ Deutsch verfügbar

Wichtigste Seiten:

  1. "Grundkonzepte von Flexbox": https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Grundkonzepte_von_Flexbox
  2. "Beziehung von Flexbox zu anderen Layout-Methoden": https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Beziehung_von_Flexbox_zu_anderen_Layout-Methoden
  3. "Alle Eigenschaften auf einen Blick": https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox_Verwaltung_von_Flex-Elementen

W3C Spezifikation (Fortgeschrittene) ​

Link: https://www.w3.org/TR/css-flexbox-1/

Inhalt:

  • Offizielle technische Spezifikation
  • Für Browser-Entwickler und sehr tiefes Verständnis
  • Nicht für Anfänger empfohlen

17.2 Anfängerfreundliche Online-Übungswerkzeuge (Visualisierung von Flexbox) ​

1. Flexbox Froggy (Spielerisch lernen!) ​

Link: https://flexboxfroggy.com/#de

Beschreibung:

  • 🐸 Ein Spiel, in dem du Frösche mit Hilfe von Flexbox auf Seerosen platzierst
  • Sehr gut für Anfänger geeignet
  • Deutsche Version verfügbar
  • Macht Spaß und man merkt sich die Eigenschaften schneller

Lernziele:

  • ✅ justify-content
  • ✅ align-items
  • ✅ flex-direction
  • ✅ order
  • ✅ align-self

Empfehlung:

Mache alle 24 Level! Das dauert ca. 1-2 Stunden und du verstehst Flexbox danach intuitiv.

2. Flexbox Defense (Tower Defense Spiel) ​

Link: http://www.flexboxdefense.com/

Beschreibung:

  • 🏰 Ein Tower-Defense-Spiel, bei dem du Kanonen mit Flexbox ausrichten musst
  • Etwas fortgeschrittener als Flexbox Froggy
  • Auf Englisch

Lernziele:

  • ✅ justify-content
  • ✅ align-items
  • ✅ align-self

3. Flexbox Zombies (Interaktiv + Video) ​

Link: https://flexboxzombies.com/

Beschreibung:

  • 🧟 Interaktives Spiel mit Video-Tutorials
  • Du beschießt Zombies mit Flexbox-Eigenschaften
  • Sehr unterhaltsam und lehrreich
  • Auf Englisch

Lernziele:

  • ✅ Alle Flexbox-Eigenschaften
  • ✅ Komplexe Szenarien

4. CSS Tricks: A Complete Guide to Flexbox (Nachschlagewerk) ​

Link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Beschreibung:

  • 📚 Das ultimative Nachschlagewerk für Flexbox
  • Alle Eigenschaften mit Grafiken erklärt
  • Auf Englisch

Inhalt:

  • Container-Eigenschaften
  • Element-Eigenschaften
  • Visualisierungen
  • Häufige Fallen

Empfehlung:

Bookmarke diese Seite! Du wirst sie immer wieder als Nachschlagewerk verwenden.

5. Wes Bos: Flexbox.io (Video-Kurs) ​

Link: https://flexbox.io/

Beschreibung:

  • 🎥 Kostenloser Video-Kurs von Wes Bos
  • 20 kurze Videos (je 5-10 Minuten)
  • Auf Englisch

Lernziele:

  • ✅ Flexbox von Grund auf
  • ✅ Praxisbeispiele
  • ✅ Responsive Design

17.3 Hochwertige Lernvideos, Bild-Tutorials (Fokus auf Anfänger) ​

YouTube-Kanäle (Deutsch) ​

1. Webdesign Masterkurs (Flexbox)

  • Suchbegriff: "Flexbox Tutorial Deutsch"
  • Viele deutsche Tutorials verfügbar

2. Programmieren lernen (Flexbox)

  • Suchbegriff: "CSS Flexbox German"

YouTube-Kanäle (Englisch - Aber sehr gut!) ​

1. Kevin Powell (Hervorragend für CSS!)

2. Web Dev Simplified

3. Traversy Media

Bild-Tutorials (Deutsch) ​

1. MDN (Bereits erwähnt, aber so gut!)

2. SelfHTML

17.4 Praxis-Layout-Beispiele (Code direkt kopieren & üben) ​

1. Codepen (Code-Schnipsel sammeln) ​

Link: https://codepen.io/

Wie verwenden?

  1. Suche nach "Flexbox Navigation"
  2. Suche nach "Flexbox Card Layout"
  3. Suche nach "Flexbox Center"
  4. Kopiere den Code und experimentiere damit!

Beispiele:

2. Frontend Mentor (Praxisprojekte) ​

Link: https://www.frontendmentor.io/

Beschreibung:

  • 🎨 Du bekommst ein Design-Vorlage (Bild) und sollst es umsetzen
  • Viele Aufgaben erfordern Flexbox
  • Es gibt kostenlose Aufgaben!

Empfohlene Aufgaben für Flexbox:

  • "NFT preview card component" (Karten-Layout)
  • "Stats preview card component" (Zentrierung)
  • "Order summary card component" (Zentrierung)

3. Codebyte (Übungsaufgaben) ​

Link: https://codebyte.de/ (Falls verfügbar) oder einfach nach "Flexbox Übungen" suchen.

Zusammenfassung ​

In diesem Kapitel hast du gelernt:

  • ✅ Offizielle Dokumentation (MDN, W3C)
  • ✅ Anfängerfreundliche Tools (Flexbox Froggy, Flexbox Defense)
  • ✅ Hochwertige Videos (Kevin Powell, Web Dev Simplified)
  • ✅ Praxis-Beispiele (Codepen, Frontend Mentor)

Nächstes Kapitel: Im Anhang findest du eine Zusammenfassung aller Kernbegriffe, Eigenschaften und Code-Vorlagen.

Übungsaufgaben ​

Aufgabe 17.1 ​

Spiele Flexbox Froggy (https://flexboxfroggy.com/#de) bis Level 24. Notiere dir, welche Eigenschaften du in welchem Level gelernt hast.

Aufgabe 17.2 ​

Suche auf Codepen nach "Flexbox Navigation" und kopiere einen Code. Versuche, ihn nachzubauen und abzuändern.

Aufgabe 17.3 ​

Schau dir ein Video von Kevin Powell (YouTube) über Flexbox an. Notiere dir die wichtigsten Punkte.

Aufgabe 17.4 ​

Erstelle ein eigenes kleines Projekt (z.B. eine persönliche Webseite) und verwende dabei nur Flexbox für das Layout.

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials