remove hands-on slides and empty slide after flexbox navigation

2025-12-24 01:09:43 +01:00
parent eec3a3f2a2
commit 595e9b1d94
1 changed files with 0 additions and 151 deletions
@@ -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/
-
-<!--
-nslookup auf allen Systemen verfügbar
-dig zeigt mehr Details
-Verschiedene Record-Typen ausprobieren
-->
-
---
-
 <!-- _class: lead -->

 # 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...)
-
---
-
 <!-- _class: lead -->

 # 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 `<head>` 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
-
---
-
 <!-- _class: lead -->

 # 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
-<body>
-    <header>
-        <div class="logo">Meine Seite</div>
-        <nav>
-            <a href="#">Home</a>
-            <a href="#">Über</a>
-            <a href="#">Kontakt</a>
-        </nav>
-    </header>
-    
-    <main>
-        <aside>Sidebar</aside>
-        <article>Hauptinhalt</article>
-    </main>
-    
-    <footer>© 2026</footer>
-</body>
-```
-
---
-
-# 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; }
-}
-```
-
---
-
 <!-- _class: lead -->

 # 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
-
---
-
 <!-- _class: lead -->

 # Fragen & Diskussion