Eine liebevoll gestaltete One-Page Web-App über die Welt von Peppa Wutz. Dieses Projekt wurde als Prüfungsarbeit / Schulprojekt entwickelt, um moderne Web-Technologien (HTML5, CSS3, Vanilla JS) zu demonstrieren.
🔗 Live Demo: [Hier klicken, um die Seite zu öffnen]https://steelmaker02.github.io/Peppa-Fan/
Wutz-Welt ist eine kinderfreundliche Fan-Seite, die speziell für Touch-Geräte (Smartphones und Tablets) optimiert wurde ("Mobile First"-Ansatz). Die Seite bietet interaktive Elemente, Spiele und kreative Bereiche für Kinder.
- Entwicklung einer performanten Single Page Application (SPA) ohne Frameworks.
- Umsetzung eines responsiven Designs mit Fokus auf Usability für Kinder.
- Integration von interaktiven JavaScript-Modulen (Spiel, Canvas, Slider).
- SPA-Navigation: Schneller Wechsel zwischen den Bereichen ohne Neuladen der Seite.
- 🎨 Malbereich (Canvas API): Ein interaktives Zeichenbrett mit Farbauswahl und Speicherfunktion (Download).
- 🎮 Memory-Spiel: Ein voll funktionsfähiges Karten-Spiel mit Gewinn-Logik und Konfetti-Effekt.
- 📸 Bildergalerie: Ein "Infinite Slider" (Endlosschleife) zur Präsentation der Charaktere.
- 🐷 Charakter-Karten: Detaillierte Profile der Figuren mit CSS-Animationen.
- 📱 Responsive Design: Optimiertes Layout für iPhone, iPad und Desktop (mit adaptiven Medieninhalten im Footer).
- ⚖️ Rechtssicherheit: DSGVO-konformer Datenschutzhinweis und Impressum.
- HTML5: Semantische Strukturierung.
- CSS3:
- Flexbox & CSS Grid für das Layout.
- CSS Variables für konsistentes Farbschema.
- Media Queries für "Mobile First".
- Keyframe Animations.
- JavaScript (ES6+):
- DOM Manipulation.
- Canvas API (Zeichnen).
- Event Handling (Touch & Mouse).
- Keine externen Bibliotheken (Vanilla JS).
Dies ist ein fiktives Projekt zu Bildungszwecken.
Diese Webseite ist eine inoffizielle Fan-Seite und steht in keinerlei geschäftlicher oder offizieller Verbindung zu Astley Baker Davies Ltd, Entertainment One (eOne) oder Hasbro.
"Peppa Pig" (Peppa Wutz) und alle zugehörigen Charaktere, Namen und Indizien sind geschützte Marken der jeweiligen Rechteinhaber. Die verwendeten Medien dienen ausschließlich der Demonstration von Web-Entwicklungs-Fähigkeiten im Rahmen einer schulischen Ausbildung.
Entwickelt von Dmytro Zaiats.
- Datum: Januar 2026