4. Sitzung
Einleitung
FlexBox
Kapitel
00:00 - Wiederholung: Was ist Flexbox?
02:34 - Was wir in diesem Video mit Flexbox wiederholen werden
03:05 - Was ich geändert habe bevor wir Flexbox anwenden
04:37 - Was verändert display: flex;
06:19 - Navigationsleiste mit Flexbox anpassen
08:25 - Warum ich mit Flexbox das Bild anpassen will
09:05 - Vorbereitung der HTML Struktur um das Bild mit Flexbox ändern zu können
10:14 - Flexbox auf das Bild anwenden
13:50 - Neuen Stil auf mehrere Elemente anwenden
15:39 - Überlegungen vorm nächsten Video
Div-Elemente
Kapitel
00:00 - Warum wir auf Internetseiten überall Div-Elemente verwenden
01:39 - Sinnvollere Klassennamen
03:20 - Vernestete Div-Container
06:07 - Flex-Wrap auf unserem Container anwenden
07:29 - Abstände zwischen Flex Elementen
09:11 - Noch mehr vernestete Div-Container
10:13 - Neue Container stylen
11:36 - Zusammenfassung
Pseudo-Selektoren
Kapitel
00:00 - Welche Arten von Pseudo-Selektoren gibt es?
01:30 - Kind-Selektoren wie :first-child, :last-child
03:22 - Interaktive Selektoren wie :hover, :focus
06:42 - Inhaltliche Selektoren wie ::before, ::after
12:13 - Zusammenfassung
https://easings.net/ für Timing Functions
Animationen
Kapitel
00:00 - Leichte Änderungen an der Navigationsleiste
01:20 - Transitions - Übergänge zwischen Zuständen an Elementen
05:55 - Tipp zur Entwicklung: transition: all
07:38 - Kleiner Gedanke zu Farben
08:32 - Transitions an den Bild Containern: Dekorative Änderungen mit transform
11:17 - Beispiel Transition mit filter: opacity()
13:37 - Unterschiede zwischen Transitions und Animations
14:19 - Was sind Animationen
15:39 - Animation definieren
17:03 - Keyframes definieren
18:15 - Zusammenfassung der Animation
18:55 - Animation an eine Klasse binden
22:43 - animation-fill-mode
23:42 - animation-iteration-count
24:58 - animation-timing-function
https://easings.net/ für Timing Functions
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
Entwicklerwerkzeuge
Sitzungsaufgabe