Schulprojekt

Porsche Experience

Über das Projekt

Unser Schulprojekt: Porsche Experience

„Porsche Experience“ ist eine mehrseitige Website, die im Rahmen eines Schulprojekts entstanden ist. Ziel war es, ein reales, ansprechendes Web-Design umzusetzen und dabei HTML, CSS und JavaScript praktisch anzuwenden – am Beispiel der Modellgeschichte des Porsche 911.

Release 2026.10.2

Worum geht es? Die Website führt Besucher:innen durch die Welt des Porsche 911: von seiner über 60-jährigen Geschichte über die verschiedenen Modellvarianten bis hin zur Technik, die das Fahrzeug bis heute prägt. Jede Unterseite behandelt einen eigenen Themenschwerpunkt, ist aber optisch und funktional Teil eines einheitlichen Gesamtauftritts.

Aufbau der Seite. Alle Seiten teilen sich denselben Kopfbereich mit Logo, Suche, Schnellzugriff-Icons und Hauptnavigation. Jede Unterseite bringt ihre eigenen CSS- und JavaScript-Dateien in einem eigenen Ordner mit, sodass jeder Themenbereich unabhängig gepflegt und erweitert werden kann.

Technischer Rahmen. Das Projekt nutzt HTML5, CSS3 und Vanilla-JavaScript. Ergänzend ist Underscore.js 1.13.4 als lokal eingebundene externe MIT-Library integriert; sie begrenzt Resize-Ereignisse per Debouncing. Die Kernfunktionen wie Suche, Slider, Formularprüfung und Warenkorb wurden weiterhin selbst umgesetzt und bleiben deshalb gut erklärbar.

13HTML-Seiten inklusive Start-Hinweis
7historische Baureihen in der Übersicht
4Technologien inklusive externer Library
1konsistentes Designsystem

Seiten im Überblick

Ein Einstieg für jedes Interesse

So ist die Website aufgebaut – ein kurzer Wegweiser durch alle Bereiche.

Startseite

Home

Bild- und Video-Karussell als Einstieg mit den stärksten Motiven des Projekts.

Zur Seite → Historie

Geschichte

Die Entwicklung des 911 von der Baureihe 930 bis zur aktuellen 992-Generation.

Zur Seite → Fahrzeuge

Modelle

Vergleich von Carrera, Targa, Turbo und GT-Modellen mit interaktiven Ansichten und Bildergalerie.

Zur Seite → Engineering

Technik

Motor, Fahrwerk, Aerodynamik und Assistenzsysteme mit Beispiel-Datenblatt.

Zur Seite → Updates

Newsletter

Lokale Formular-Demo mit E-Mail-Vorschau, ohne Anmeldung oder tatsächlichen Versand.

Zur Seite → Über uns

Projekt

Diese Seite: Ziele, Aufbau und die verwendeten Techniken im Überblick.

Du bist hier Demo-Shop

Shop

Produktübersicht, Warenkorb und Checkout als Frontend-Demo ohne echte Zahlung.

Zur Seite → Hilfe

Fragen & Antworten

Kurze Erklärungen zur Website, zum Schulprojekt und zum Demo-Shop.

Zur Seite → Transparenz

Rechtliches

Hinweise zu Inoffiziellkeit, Marken, Bildern, Datenschutz und Quellen.

Zur Seite →

Fallstudie

Vom Schulauftrag zur vorzeigbaren Webanwendung

Ausgangslage und Ziel

Aus einzelnen Themenbereichen sollte eine zusammenhängende Website entstehen, die technisch nachvollziehbar bleibt und gleichzeitig deutlich hochwertiger als eine typische Übungsseite wirkt.

Zentrale Herausforderungen

Viele Unterseiten, große Medien, mobile Navigation, konsistente Gestaltung, lokale Datenspeicherung und verständliche Präsentation mussten miteinander vereinbart werden.

Umgesetzte Lösungen

Ein gemeinsames visuelles System, responsive Layouts, semantische HTML-Struktur, Tastaturbedienung, reduzierte Bewegung, optimierte Medien und transparente Demo-Abläufe bilden die technische Lösung.

Qualitätssicherung

Geprüft wurden interne Verweise, eindeutige IDs, JavaScript-Syntax, Formularzustände, mobile Ansichten, Tastaturfokus, Warenkorb-Ablauf und die Darstellung der wichtigsten Seiten im Browser.

README-PDF öffnen Quellen- und Lizenzübersicht Testprotokoll öffnen

Projektziele

Was die Website leisten soll


Die Seite soll nicht nur gut aussehen, sondern auch einen klaren Zweck erfüllen: Sie informiert, strukturiert Wissen und zeigt, dass HTML, CSS und JavaScript sinnvoll zusammenarbeiten können.

Informieren

Besucher erhalten einen verständlichen Überblick über Geschichte, Modelle und Technik des Porsche 911.

Präsentieren

Die Inhalte sind so aufgebaut, dass sie sich für eine Schulpräsentation oder Projektbewertung eignen.

Interagieren

Karussell, Suche, Newsletter, Shop-Demo und Warenkorb zeigen praktische JavaScript-Funktionen.

Qualität

Welche Anforderungen das Projekt erfüllt

Klare Seitenlogik

Jede Seite hat eine Aufgabe: Home führt ein, Geschichte erklärt die Entwicklung, Modelle vergleichen Varianten, Technik macht die Funktionsweise verständlich, der Newsletter zeigt Formularlogik und der Shop demonstriert Warenkorb-Abläufe.

Saubere Abgrenzung

Weil es sich um ein inoffizielles Schulprojekt handelt, sind Shop, Newsletter und rechtliche Hinweise deutlich als Demo gekennzeichnet. Dadurch wirkt die Website glaubwürdiger und sauberer.

Qualitätssicherung

Qualitätskriterien für jede Version


Technische Prüfungen werden dokumentiert. Visuelle Endabnahme, echte Browser-Tests und rechtliche Freigaben sind davon getrennt.

Semantik & Navigation

Ein H1 pro Seite, logische Überschriften, eindeutiger Aktivstatus und konsistente Pfade.

Responsive Layout

Ziel: funktionierende Layouts, keine horizontale Überbreite und gut bedienbare Touch-Ziele; im Browser nachzuprüfen.

Performance

WebP-Bilder, komprimierte Medien, Lazy Loading und lokale Abhängigkeiten reduzieren Ladezeit.

Barrierefreiheit

Tastaturbedienung, Fokuszustände, Alternativtexte, Skip-Link und Bewegungsreduktion; zusätzlich sind praktische Tests erforderlich.

Datenschutz

Demo-Daten bleiben lokal; persönliche Checkout-Daten werden nicht in URLs geschrieben.

Präsentierbarkeit

Getrennte Seitenordner, verständliche Funktionen und reduzierte Kommentare machen den Code erklärbar.

Quellenhinweis

Fakten sauber einordnen


Technische Daten und historische Einordnungen wurden vorsichtig formuliert und an offiziellen Porsche-/Porsche-Newsroom-Informationen orientiert. Die Texte sind für ein Schulprojekt zusammengefasst und nicht als offizieller Porsche-Auftritt gedacht.

Unser Schulprojekt

Danke fürs Vorbeischauen! Diese Website wurde mit viel Liebe zum Detail als Schulprojekt entwickelt und wird laufend weiter verbessert.