Meistere Flexbox-Layout in HTML/CSS
Stephan Haewß
Assista a este curso e milhares de outros
Assista a este curso e milhares de outros
Aulas neste curso
-
-
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
-
-
- --
- Niveau débutant
- Niveau intermédiaire
- Niveau avancé
- Tous niveaux
Généré par la communauté
Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.
--
apprenants
--
Sobre este curso
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!
Projeto prático de curso
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.
Nota do curso
Por que fazer parte da Skillshare?
Faça cursos premiados Skillshare Original
Cada curso possui aulas curtas e projetos práticos
Sua assinatura apoia os professores da Skillshare
Aprenda em qualquer lugar
Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.
Cursos relacionados
