4. Sitzung
Einleitung
FlexBox
Kapitel
00:00 - Grundlage
01:27 - Der Inhalt ist nicht allzu wichtig für die Funktion von Flexbox
02:47 - display flex
04:18 - Was wenn die Elemente zu breit werden
05:26 - flex wrap
06:15 - Vorteile von Skalierung mit Flexbox auf verschiedenen Bildschirmgrößen
07:33 - Anordnen mit justify-content
09:52 - Was ist mit nicht gleichgroßen Inhalten
11:09 - Anordnen mit align-items
13:17 - Flex-Achse mit flex-direction
15:12 - Zusammenfassung
Div-Elemente
Kapitel
00:00 - Was sind Div-Elemente
01:57 - Beispiel wie viel von Twitter aus Div-Containern besteht
03:34 - Gruppieren mit Div-Elementen
06:06 - Vernesten und stylen von Div-Elementen
07:51 - Weitere Klassen zum stylen
08:40 - Weitere Klassen zum stylen (2)
10:34 - Wiederverwendung von gestylten Div-Elementen
Pseudo-Selektoren
Kapitel
00:00 - Welche Arten von Pseudo-Selektoren gibt es
01:24 - ::before Pseudo-Inhalt
04:16 - ::after Pseudo-Inhalt
05:36 - Verwendungszweck von ::before am Beispiel von Listen
07:50 - Listenzeichen mit Emojis ersetzen
08:21 - Listenzeichen mit Emojis ersetzen (2)
09:04 - Dekoration mit ::before bauen
10:51 - Dekoration mit ::before bauen (2)
12:32 - Kind-Pseudo-Selektoren :first-child
15:45 - Kind-Pseudo-Selektoren :last-child und :nth-child
17:23 - :hover-Pseudo-Selektor
18:57 - :focus-Pseudo-Selektor
20:39 - Was haben wir uns angeguckt
Animationen und Übergänge
easings.net - Verschiedene "Abläufe" für Animationen und Übergänge
Kapitel
00:00 - Wie laufen Animationen und Übergänge grundsätzlich ab
01:21 - Übergang zwischen Zuständen mit transition
03:38 - Dauer der Animation oder des Übergangs
04:57 - Mehrere Eigenschaften animieren
06:01 - Trick um direkt alle Eigenschaften zu animieren
07:35 - Verlauf der Animation steuern mit einer timing-function
11:02 - Eigene Animation definieren mit keyframes
14:07 - Beispiel
Sitzungsaufgabe