Hogwarts-Online

Eine interaktive Webseite zum Thema Hogwarts mit HTML & CSS entwickelt im Rahmen der Berufsschulausbildung zur Fachinformatikerin Anwendungsentwicklung (Lernfeld 10).

Projektbeschreibung

Hogwarts-Online ist eine thematische Webprsentation, die die Zauberschule Hogwarts in ein modernes Web-Abenteuer verwandelt. Das Projekt nutzt responsives Webdesign mit einer fesselnden narrativen Rahmenhandlung (Restauration der magischen Webseite"), um das Lernen von Web-Technologien spannend und motivierend zu gestalten.

Funktionsumfang

Webseiten

Seite	Inhalt
index.html	Startseite mit Herobereich, Video & Audio, Aufgabennarrative
haeuser.html	Prsentation der vier Hogwarts-Huser (Gryffindor, Hufflepuff, Ravenclaw, Slytherin)
unterricht.html	Fcherbersicht und Stundenplan
kontakt.html	Kontaktformular & Informationen

Design-Features

• Responsive Layout (mobile & desktop)
• Thematische Farbschemas pro Haus
• Magische Effekte (Animationen, bergnge)
• Integrierte Multimedia (Video, Audio)
• Barrierefreiheit (semantisches HTML, alt-Texte)

Verwendete Konzepte

Konzept	Anwendung
Semantisches HTML5	<header>, <nav>, <main>, <article>, <footer> fr barrierefreie Struktur
CSS Grid & Flexbox	Responsive Multi-Spalten-Layouts
CSS Animationen	Fade-in, Hover-Effekte, Text-Glows
Media Queries	Mobile-first Design fr alle Bildschirmgren
Externe Stylesheets	Zentrale Stilverwaltung ber styles.css

Ausfhren

Webseite im Browser ffnen:

# Option 1: index.html direkt im Browser ffnen
# Option 2: Lokaler Server (fr beste Performance)
python -m http.server 8000
# Dann: http://localhost:8000

ber die Entwicklerin & KI-Nutzung

Dieses Projekt zeigt meine Fhigkeit im Webdesign und Responsive-Entwicklung. Das Projekt wurde entwickelt als bungsaufgabe im Lernfeld 10 (Benutzerinteraktion und Nutzungsorientierte Entwicklung) der Fachinformatiker-Ausbildung.

Code-Eigenleistung

• HTML: 90% selbst geschrieben
• CSS: 70% selbst geschrieben
• Der Rest: KI (Claude, Gemini) fr Hilfe, Debugging und Verbesserungen

AI-generierte Assets

• Alle Bilder (House Embleme, Backgrounds, Hogwarts-Schule): Mit Gemini generiert
• Musik & Audio: Mit Gemini generiert
• Narrative & Texte: Kreativ mit Gemini verfasst

Das Projekt demonstriert die sinnvolle Integration von KI-Tools in den Lernprozess: Die Kernlogik und Struktur entsteht durch eigenes Lernen und Experimentieren, whrend KI als Werkzeug fr zeitraubende kreative Aufgaben, als Lernhilfe und Verbesserungsvorschlge genutzt wird.

---

*Bilder, Musik und kreative Texte: Gemini-generiert *