Meistere Flexbox-Layout in HTML/CSS
Stephan Haewß
Watch this class and thousands more
Watch this class and thousands more
Lessons in This Class
-
-
1.
Überblick
2:00
-
2.
Warum Flexbox und wie funktioniert sie
5:44
-
3.
Aufsetzen des Initialprojekts
5:54
-
4.
Aufbau der Beispielstruktur
9:34
-
5.
Kindelemente gleichmäßig verteilen
14:37
-
6.
Kindelemente Platz verteilen Übung
4:13
-
7.
Konkretes Beispiel responsives Design
11:14
-
8.
Ausrichtung der Kindelemente
6:18
-
9.
Stretch und Einzelausrichtung
6:09
-
10.
Stretch und Einzelausrichtung Übung
7:15
-
11.
Ausrichtung in Hauptrichtung
5:01
-
12.
Beispiel für Ausrichtung in Hauptrichtung
3:35
-
13.
Basislänge in Flexrichtung
7:13
-
14.
Mit flex grow den Größenzuwachs in Flexrichtung regulieren
8:00
-
15.
Mit flex shrink die Verkleinerung in Flexrichtung regulieren
12:16
-
16.
Wrapping
17:07
-
17.
Flex flow
5:26
-
18.
Wrapping Übung
4:34
-
19.
Gap
5:17
-
20.
Order und Reverse Direction
6:47
-
21.
Order Übung
2:24
-
22.
Zentrieren
3:31
-
23.
3 Spalten 3 Zeilen
8:42
-
24.
Formulareingaben
7:16
-
25.
Komplexes Layout
8:40
-
26.
Chat Layout
6:38
-
27.
Galerie Layout
9:22
-
28.
Fazit und Ausblick
4:13
-
-
- --
- Beginner level
- Intermediate level
- Advanced level
- All levels
Community Generated
The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.
--
Students
--
Projects
About This Class
Möchtest Du lernen, wie Du beeindruckende, flexible und responsive Webseiten-Layouts ganz einfach mit CSS Flexbox erstellst? Dann ist dieser Kurs genau das, was Du brauchst!
In diesem praxisorientierten Kurs zeige ich Dir alles, was Du über das CSS Flexbox-Layout wissen musst – von den Grundlagen bis zu fortgeschrittenen Techniken. Du wirst nicht nur die Theorie verstehen, sondern Flexbox direkt in realen Projekten anwenden können.
Was Dich erwartet:
- Fundierte Einführung: Lerne die Grundlagen von Flexbox und die wichtigsten Konzepte.
- Flex-Container & Flex-Elemente: Detaillierte Erklärungen zu den Flexbox-Eigenschaften, die Du benötigst.
- Praktische Layouts: Erstelle Layouts für verschiedene Anwendungsfälle, darunter:
- Responsive Designs
- Zentrierung von Elementen
- 3-Spalten/Zeilen Layouts
- Verschachtelte Layouts
- Chat-Layout
- Galerie Layout
- Tipps & Tricks: Optimiere Deine Flexbox-Layouts und spare Zeit mit cleveren Lösungen.
- Übungen & Herausforderungen: Setze Dein Wissen mit herausfordernden Übungen in die Praxis um.
Egal, ob Du gerade erst anfängst oder Deine Fähigkeiten als Webentwickler auf das nächste Level bringen möchtest, dieser Kurs bietet Dir das nötige Wissen und Vertrauen, um Flexbox effizient zu nutzen. Werde ein Profi im Erstellen von flexiblen, anpassungsfähigen Layouts für Deine Webprojekte!
Hands-on Class Project
Als Projekt erstellt Ihr bitte eine Homepage mit Menüleiste, Hauptteil mit Bildern (Wrap-Panel) und Fußteil mit Links zu Impressum und Kontakt. Verwendet wo immer es Sinn macht Flexbox-Layout dabei.
Postet Eure Screenshots hier und zeigt so den anderen Teilnehmern, wie Euer Design aussieht und wie es umgesetzt wurde.
Class Ratings
Why Join Skillshare?
Take award-winning Skillshare Original Classes
Each class has short lessons, hands-on projects
Your membership supports Skillshare teachers
Learn From Anywhere
Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.
