# HTML-Übungsaufgabe: Erstellen Sie ein Blog-Mockup
## Lernziele
Wenden Sie Ihr HTML-Wissen an, indem Sie eine vollständige Blog-Startseitenstruktur entwerfen und codieren. Diese praktische Aufgabe festigt Konzepte des semantischen HTML, bewährte Zugänglichkeitspraktiken und professionelle Fähigkeiten zur Codeorganisation, die Sie auf Ihrer gesamten Webentwicklungsreise anwenden werden.
**Durch das Abschließen dieser Aufgabe werden Sie:**
- Das Planen von Webseiten-Layouts vor dem Coden üben
- Semantische HTML-Elemente angemessen anwenden
- Zugängliche, gut strukturierte Markups erstellen
- Professionelle Codiergewohnheiten mit Kommentaren und Organisation entwickeln
## Projektanforderungen
### Teil 1: Designplanung (Visuelles Mockup)
**Erstellen Sie ein visuelles Mockup Ihrer Blog-Startseite, das umfasst:**
- Header mit Seitentitel und Navigation
- Hauptinhalt mit mindestens 2-3 Blog-Post-Vorschauen
- Seitenleiste mit zusätzlichen Informationen (Über-Mich-Bereich, letzte Beiträge, Kategorien)
- Footer mit Kontaktinformationen oder Links
**Optionen zur Erstellung des Mockups:**
- **Handgezeichnete Skizze**: Verwenden Sie Papier und Bleistift, fotografieren oder scannen Sie dann Ihr Design
- **Digitale Werkzeuge**: Figma, Adobe XD, Canva, PowerPoint oder eine beliebige Zeichenanwendung
- **Wireframe-Tools**: Balsamiq, MockFlow oder ähnliche Wireframing-Software
**Beschriften Sie die Abschnitte Ihres Mockups** mit den HTML-Elementen, die Sie verwenden möchten (z.B. „Header - ``“, „Blogbeiträge - ``“).
### Teil 2: HTML-Elementplanung
**Erstellen Sie eine Liste, die jeden Abschnitt Ihres Mockups bestimmten HTML-Elementen zuordnet:**
```
Example:
- Site Header →
- Main Navigation →