Kursübersicht
Sektion I: Grundlagen zu HTML
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
- 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
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
- 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
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
Sektion IV: Mein-PC-Website
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
- 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
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
Sektion VI: Bonus
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
[ALT - wird am 23.06.2026 gelöscht] Computer & Internet
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
- 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
Verfügbar in
tage
tage
nachdem du dich angemeldet hast
- 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)