Sektion I: Responsive mit CSS - Grundlagen
-
01 Einleitung (1:43)
-
02 Was sind Breakpoints (4:36)
-
03 Testumgebung einrichten (1:37)
-
04 Breakpoints mit Media-queries (9:01)
-
05 PRAXIS-Visitenkarte - Media-queries (6:25)
-
06 mobile-first vs. deskop-first (1:41)
-
08 rem vs. em an einem Beispiel (7:56)
-
09 PRAXIS-Visitenkarte - rem und Schriftgrößen (5:05)
-
10 Textanpassung mit ch (3:00)
-
11 CSS min(), max() und clamp() (6:32)
-
12 PRAXIS-Visitenkarte - clamp() (2:15)
-
13 Contentbegrenzung - Einführung (3:42)
-
14 Contentbegrenzung - Beispiel mit max-width (3:37)
-
15 Contentbegrenzung - Beispiel mit padding (8:10)
-
16 HTML-Head anpassen mit Viewport meta-Element (2:31)
-
17 BONUS - Browserkompatibilität prüfen - CanIUse-Website (2:07)
-
18 BONUS - Responsivtesttools (4:38)
-
19 BONUS - Einsatz von 100dvh (2:44)
-
Cheatsheet
Sektion II: Mein-PC Website responsive machen
Sektion III: HTML-Semantik
-
Einleitung (2:32)
-
1 - Seitenstruktur (6:23)
-
2 - Seitenstruktur II (9:15)
-
3 - lists (4:30)
-
4 - img und figure (4:45)
-
5 - table (7:30)
-
6 - p und span (3:28)
-
7 - Ausblick und Dokumentation (7:32)
-
Semantik Quiz
-
01 PRAXIS - Mein-PC Website - Landing Sektion und Header (5:34)
-
02 PRAXIS - Mein-PC_Website - Haupt-Content (5:34)
Sektion IV: Dein Projekt - Sakura Ramen Responsiv
[ALT - wird am 23.06.2026 gelöscht] Band-Webseite
-
01 - Unser Projekt (3:08)
-
02 - Grundaufbau (6:12)
-
03 - Bilder, Schrift, grundlegender Style (9:55)
-
04 - ATF - Above The Fold umsetzen (11:34)
-
05 - ATF - Links, Colorpicker, Background-Position (6:45)
-
06 - ATF - Bilder mit Drop-Shadow, Container-Inhalt (13:05)
-
07 - Quick Links (13:03)
-
08 - Festival-Sektion (8:07)
-
09 - Festival-Sektion - Klassen doppelt nutzen (9:51)
-
10 - Slogan-Sektion (4:52)
-
11 - Video Sektion (4:12)
-
12 - Footer - 2-Spalten Layout (7:14)
-
13 - Footer fertig stellen (11:34)
-
14 - Flex-grow (4:38)
-
15 - Iterativer Entwicklungsprozess (3:12)
-
16 - Zweite Schriftart einbinden (7:26)
-
17 - Muss ich dieses Projekt abgeben? (1:20)
