diff --git a/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md b/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md index cafb92b..2cb950e 100644 --- a/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md +++ b/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md @@ -566,34 +566,6 @@ MX = Mail Exchange --- -# Hands-On: DNS erkunden (15 Min) - -**Terminal öffnen:** - -```bash -# DNS-Auflösung -nslookup hdm-stuttgart.de -nslookup google.com - -# Detaillierter (Linux/Mac) -dig hdm-stuttgart.de -dig google.com MX - -# Weg verfolgen -traceroute hdm-stuttgart.de # Mac/Linux -tracert hdm-stuttgart.de # Windows -``` - -**Online-Tool:** https://toolbox.googleapps.com/apps/dig/ - - - ---- - # HTTP im Detail @@ -665,19 +637,6 @@ POST = nicht idempotent --- -# Hands-On: HTTP beobachten (20 Min) - -**DevTools öffnen:** `F12` (Win/Linux) · `Cmd+Option+I` (Mac) - -**Tab "Netzwerk" (Network):** -1. Beliebige Webseite öffnen -2. Requests beobachten -3. Auf Request klicken → Headers & Response analysieren - -**Beobachtet:** Anzahl Requests, Dateitypen (JS, CSS, Bilder...) - ---- - # Teil 2: CSS @@ -1198,21 +1157,6 @@ Echte NutzerInnen einbeziehen = Gold-Standard --- -# Hands-On: Erste Styles (30 Min) - -**Erstellt `style.css` für eure HTML-Seite:** - -1. CSS-Datei im `
` verlinken -2. Grundschrift setzen (`font-family`, `line-height`, `color`) -3. Überschriften, Links, Listen stylen -4. Mit Farben und Abständen experimentieren - -**Ressource:** https://codescripsi.es/ -- **Basics:** Alle machen -- **Advanced:** Wer möchte - ---- - # Teil 3: Layouts (optional) @@ -1391,10 +1335,6 @@ Logo links, Links rechts Oder gleichmäßig verteilt --> ---- - - - --- # Pseudo-Klassen @@ -1458,82 +1398,6 @@ Mobile First = Standard für klein, dann größere überschreiben --- -# Hands-On: Layout bauen (60 Min) - -**Erstellt ein komplettes Layout:** - -1. **Header** mit Logo (links) und Navigation (rechts) -2. **Main** mit zwei Spalten (Sidebar + Content) -3. **Footer** mit zentriertem Copyright - -**Anforderungen:** -- Nutzt Flexbox -- Responsive: Auf Handy untereinander -- Hover-Effekte für Links -- Mindestens 2 Farben - -**Hilfe:** https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - ---- - -# Beispiel-Struktur - -```html - -