In diesem Abschnitt erstellen wir eine professionelle Internetseite, die tatsächlich in unserem Betrieb verwendet wird. Die finale Seite kannst du auf https://developerakademie.com anschauen.
Course Curriculum
Sektion I: Responsive mit CSS - Grundlagen
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
- 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
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
Sektion III: HTML-Semantik
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
- 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
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
[ALT - wird am 23.06.2026 gelöscht] Band-Webseite
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
- 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)