Sektion I: Grundlagen zu HTML
-
01 Einführung HTML (2:33)
-
02 Was ist HTML? (4:02)
-
02 Projekt einrichten (2:12)
-
03 Text hinzufügen - Paragraph und Headline (p-, und h-Element) (3:34)
-
04 Einen link hinzufügen - Das a-Element (3:18)
-
05 Head Bereich einrichten - UTF-8 Zeichen [ä,ü,ß etc.] einrichten (4:46)
-
06 Ein Bild hinzufügen - Das img-Element (3:24)
-
07 Eine einfache Tabelle hinzufügen - table-, tr-, td-Elemente (7:08)
-
08 Code schick machen mit "Formatieren" (2:32)
-
09 Seiten strukturieren mit dem div-Element (4:14)
Sektion II: Grundlagen zu CSS
-
01 CSS Einführung (1:58)
-
02 Was ist CSS? (4:10)
-
02 style.css einrichten/einbinden (7:07)
-
03 Grundlagen zu Farben in CSS (7:24)
-
04 Grundlagen zu Fonts (Schriften) in CSS (3:12)
-
05 Grundlagen zu CSS Klassen (4:49)
-
06 Der Child-Selector ">" (Beziehung Parent-Child in CSS) (6:39)
-
07 PRAXIS-Visitenkarte - Farben & Fonts (10:33)
-
08 BoxModell (3:50)
-
09 BoxModell - Beispiel auf einer Website (4:54)
-
10 BoxModell - height & width (4:16)
-
11 BoxModell - Padding & Margin (6:46)
-
12 BoxModell - Borders (7:28)
-
13 BoxModell - box-sizing: border-box (4:22)
-
14 User-Agent-Stylesheet verstehen und aushebeln (6:23)
-
15 PRAXIS-Visitenkarte - BoxModell einsetzen (10:42)
-
16 FlexBox (5:38)
-
17 FlexBox - Grundidee (9:14)
-
18 FlexBox - Platz zwischen Elementen definieren mit gap (4:45)
-
19 PRAXIS-Visitenkarte - FlexBox - Karte zentrieren über body-Element (100vh) (3:45)
-
20 PRAXIS-Visitenkarte - FlexBox - Karte strukturieren (4:43)
-
21 PRAXIS-Visitenkarte - FlexBox - Texte zentrieren mit text-align (3:42)
-
22 FlexBox - Üben mit Flexbox-Froggy (1:46)
-
Cheatsheet
Sektion III: Figma
Sektion IV: Mein-PC-Website
-
01 Projekt Vorstellung (3:11)
-
02 Projekt anlegen (1:56)
-
03 Landing Sektion - Hintergrundbild einrichten (10:04)
-
04 Header einrichten (15:00)
-
05 Sektionen strukturieren (13:00)
-
06 Zweite Sektion - Tabelle bauen (17:26)
-
07 Learning Sektion strukturieren mit display:flex (16:51)
-
08 Software-Card bauen (13:20)
-
09 Lösung zur Aufgabe - Positionierung mehrerer Karten (6:28)
-
10 Footer einrichten (7:42)
-
11 Schrift einrichten - Fonts laden mit GoogleWebFontsHelper (6:17)
-
12 links einbauen mit target="_blank" (4:07)
-
13 links einbauen mit mailto (2:36)
-
14 links einbauen zu Sektionen mit ids (4:28)
-
15 Die Kirsche auf der Sahne - Hover-Effekte einbauen (14:46)
-
16 Favicon hinzufügen (3:08)
Sektion V: Dein Projekt - Sakura Ramen
Sektion VI: Bonus
[ALT - wird am 23.06.2026 gelöscht] Computer & Internet
-
IDE installieren (6:29)
-
Quellcode von JEDER Seite anzeigen - Google Code Inspector (7:43)
-
Darf ich Code kopieren? (2:39)
-
Was ist ein (DNS) Server (2:04)
-
FTP Server - FileZilla installieren und einrichten (5:47)
-
FTP Server - Daten finden im Campus
-
Umlaute richtig darstellen (6:25)
-
Suchmaschinen aussperren - Robots (7:03)
-
Shortcuts in VS Code (2:01)
-
Diese SHORTCUTS musst du kennen (3:53)
-
Entwicklertools (5:06)
-
Automatische Vervollständigung in VS Code (3:10)
[ALT - wird am 23.06.2026 gelöscht] Projektarbeit Sakura Ramen
-
Sakura Ramen (5:15)
-
Bevor du startest: Bildschirmauflösung beachten (3:10)
-
Flexbox einfach erklärt (8:05)
-
Flexbox Froggy (1:38)
-
Nachtrag Flexbox Froggy (1:19)
-
Hilfe zum ersten Container (7:57)
-
Hilfe zum Menü (3:49)
-
Hilfe: Bilder werden nicht angezeigt (8:41)
-
Sektion How to order (6:49)
-
Sakura Projektabgabe: Häufige Fehler (12:36)
-
Webseite verändert sich nicht auf dem Server (4:38)
-
Unser Weiterempfehlungsprogramm
-
Teachable Campus Vorstellung (2:59)
-
Projektabgabe Campus (8:34)
