Schaffe in kürzester Zeit den praktischen Einstieg in Flexbox
... und lerne, wie du deine Webseiten Inhalte mithilfe von Flexbox in anspruchsvollen HTML/CSS Layouts anordnen kannst.
Laufzeit des Kurses
ca. 3,5 Stunden
Benötigte Vorkenntnisse
HTML/CSS Grundkenntnisse
Auf jeder Webseite müssen die Inhalte in einem sogenannten Layout angeordnet werden.
Eine moderne und einfache Möglichkeit, um responsive und flexible Layouts zu erstellen, ist Flexbox.
In diesem Kurs wirst du den Umgang mit Flexbox von 0 an kennenlernen, sodass du danach in der Lage bist, problemlos eigene komplexe und responsive Layouts in CSS zu erstellen.
Im Verlauf des Kurses wirst du unteranderem lernen:
Wenn du also lernen möchtest, wie du Flexbox fortan in deinen eigenen Projekten nutzen kannst, solltest du diesen Kurs definitiv durcharbeiten.
Inhaltsverzeichnis des Kurses
In diesem Modul erhältst du eine detaillierte Einführung in diesen Kurs. Zudem setzen wir das Initialprojekt des Kurses gemeinsam auf.
Diese Lektionen erwarten dich:
- [Text] Kursübersicht und Voraussetzungen
- [Video 1] Einführung
- [Video 2] Aufsetzen des Initialprojekts
In diesem Modul lernst du alle wichtigen Flexbox-Layout Grundlagen der Reihe nach und leichtverständlich kennen.
Diese Lektionen erwarten dich:
- [Video 1] Aufbau der Beispielstruktur
- [Video 2] Kindelemente gleichmäßig verteilen
- [Video 3] Übung: Kindelemente Platz verteilen
- [Video 4] Konkretes Beispiel responsives Design
- [Video 5] Ausrichtung der Kindelemente
- [Video 6] Stretch und Einzelausrichtung
- [Video 7] Übung: Stretch und Einzelausrichtung
- [Video 8] Ausrichtung in Hauptrichtung
- [Video 9] Beispiel für Ausrichtung in Hauptrichtung
- [Video 10] Basislänge in Flexrichtung
- [Video 11] Mit flex-grow den Größenzuwachs in Flexrichtung regulieren
- [Video 12] Mit flex-shrink die Verkleinerung in Flexrichtung regulieren
- [Video 13] Wrapping
- [Video 14] Die flex-flow Eigenschaft
- [Video 15] Übung: Wrapping
- [Video 16] Gap
- [Video 17] Order und Reverse Direction
- [Video 18] Übung: Order
In diesem Modul lernst du zahlreiche Beispiel-Layouts mit Flexbox kennen.
Diese Lektionen erwarten dich:
- [Video 1] Zentrieren
- [Video 2] 3 Spalten 3 Zeilen
- [Video 3] Formulareingaben
- [Video 4] Verschachteltes Layout
- [Video 5] Chat-Layout
- [Video 6] Galerie-Layout
In diesem Modul ziehen wir abschließend noch ein Fazit und du erhältst einen Ausblick auf weitere Themen.
Diese Lektionen erwarten dich:
- [Video 1] Fazit und Ausblick