Meistere Flexbox-Layout in HTML/CSS
Stephan Haewß
Regardez ce cours et des milliers d'autres
Regardez ce cours et des milliers d'autres
Leçons de ce cours
-
-
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
--
À propos de ce cours
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!
Projet de cours pratique
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.
Notes attribuées au cours
Pourquoi s'inscrire à Skillshare ?
Suivez des cours Skillshare Original primés
Chaque cours comprend de courtes leçons et des travaux pratiques
Votre abonnement soutient les enseignants Skillshare
Apprenez, où que vous soyez
Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.
