From 595e9b1d94370e72d6b82ee69341b40bb8ebf3c5 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Wed, 24 Dec 2025 01:09:43 +0100 Subject: [PATCH] remove hands-on slides and empty slide after flexbox navigation --- ...01-10-termin-2-netzwerke-protokolle-css.md | 151 ------------------ 1 file changed, 151 deletions(-) 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 - -
- - -
- -
- -
Hauptinhalt
-
- - - -``` - ---- - -# Beispiel-CSS - -```css -header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem 2rem; - background: #2c3e50; - color: white; -} - -main { - display: flex; - gap: 2rem; - padding: 2rem; -} - -aside { - flex: 0 0 250px; -} - -article { - flex: 1; -} - -@media (max-width: 768px) { - main { flex-direction: column; } - aside { flex: none; } -} -``` - ---- - # Teil 4: CSS vertiefen @@ -1657,21 +1521,6 @@ Variablen machen's einfach --- -# Hands-On: Styling finalisieren (45 Min) - -**Erweitert eure Seite:** - -1. **Transitions** für alle Links und Buttons -2. **CSS-Variablen** für Farben -3. **Hover-Effekte** für Karten/Boxen -4. **Media Query** für Mobile - -**Bonus:** -- Dark Mode Support -- Animierte Navigation - ---- - # Fragen & Diskussion