Mehrseiten-Webentwicklung

Projektübersicht

Der Schwerpunkt liegt auf statischen Mehrseiten-Websites, die ohne Build-Prozess funktionieren. Navigation, Inhalte und rechtliche Seiten bleiben auch ohne JavaScript erreichbar. JavaScript ergänzt nur Funktionen wie Mobilmenü, Karussell, Formvalidierung und Farbschema.

Die schulische Grundlage umfasst zusätzlich HTML5-Grundgerüste, Verschachtelung, Fehleranalyse, Tabellen, Formulare und unterschiedliche Eingabetypen. Bei Übungsformularen wurden Pflichtfelder, Auswahlfelder, Radio-Buttons und die Weitergabe von GET-Parametern nachvollzogen.

Ausgangssituation

Viele schnelle Webvorlagen wirken austauschbar, verwenden unnötige Bibliotheken und bilden Inhalte in einer einzigen langen Seite ab. Für Bewerbungs- und Projektwebsites ist eine klare Seitenstruktur häufig verständlicher und langfristig leichter zu pflegen.

Ziel des Projekts

Ziel sind technisch saubere Websites mit eigenständigen Seiten, konsistentem Design, nachvollziehbarer Navigation, guten Ladezeiten und einer Gestaltung, die zum Inhalt passt statt Effekte in den Vordergrund zu stellen.

Technische Planung

Vor dem Code werden Seitenstruktur, Navigation, wiederkehrende Komponenten und Inhaltshierarchie festgelegt. CSS wird in Variablen, Basis, Komponenten, Seitenlayouts, Responsive-Regeln und Druckansicht gegliedert. JavaScript erhält getrennte Aufgabenbereiche.

Hardware und Software

Die Umsetzung erfolgt mit einem normalen Entwicklungsrechner, Browser-Entwicklerwerkzeugen, HTML5, modernem CSS und Vanilla JavaScript. Netlify dient für statisches Hosting, Sicherheitsheader, Weiterleitungen und Formulare.

Basis

HTML5, CSS und Vanilla JavaScript

Struktur

Eigenständige HTML-Seiten

Qualität

Accessibility, SEO und Performance

Deployment

Statische Veröffentlichung auf Netlify

Medien

Pixel- und Vektorgrafik, WebP, SVG und passende Einsatzbereiche

Umsetzung

Zuerst entsteht semantisches HTML. Danach wird ein ruhiges Designsystem mit Farben, Typografie, Abständen und Fokuszuständen aufgebaut. Responsive Regeln werden nicht nur für einen einzelnen Breakpoint geschrieben, sondern an realen Layoutgrenzen geprüft. Interaktionen folgen zuletzt.

Bei Bildmedien wird zwischen fotografischen Pixelgrafiken und skalierbaren Vektorgrafiken unterschieden. Dateiformat, Kompression, Transparenz und Browserunterstützung werden nach Inhalt gewählt, nicht nur nach Dateiendung.

Systemarchitektur

Jede Seite lädt dieselben Basis-Styles und nur die benötigten Skripte. Inhalte und Navigation liegen direkt im HTML. Assets werden lokal ausgeliefert. Netlify stellt die Dateien ohne serverseitigen Build bereit und erkennt das Kontaktformular beim Deployment.

Auftretende Probleme

Typische Fehler sind nicht funktionierende mobile Menüs, überlagernde Elemente, falsche relative Pfade, unruhige Karussells, fehlende Fokuszustände, zu breite Textzeilen und Unterschiede zwischen Desktop- und Mobilbrowsern.

Fehlersuche

HTML-Struktur, CSS-Kaskade und JavaScript-Zustand werden getrennt geprüft. Links und Assetpfade werden automatisiert kontrolliert. Bei Responsive-Problemen wird die genaue Breite ermittelt, an der das Layout kippt, statt nur bekannte Gerätegrößen zu bedienen.

Umgesetzte Lösungen

Navigationen bleiben ohne JavaScript sichtbar und werden erst mit aktivem JavaScript in ein Mobilmenü umgewandelt. Interaktive Elemente verwenden echte Buttons und ARIA-Zustände. Bilder besitzen feste Abmessungen. Reduzierte Bewegung wird respektiert.

Sicherheitsaspekte

Es werden keine Tracker, externen Fonts oder unnötigen Drittanbieter-Skripte eingebunden. Eine Content-Security-Policy beschränkt Quellen. Formulare nutzen Netlify Forms mit Honeypot und ausdrücklicher Datenschutzeinwilligung.

Ergebnis

Die Websites können direkt als statische Dateien veröffentlicht werden. Die klare Trennung von Inhalt, Gestaltung und Verhalten erleichtert Fehlersuche und spätere Erweiterungen.

Wichtigste Lernerfahrungen

Gute Webentwicklung besteht nicht nur aus sichtbarem Design. Navigation, Semantik, Tastaturbedienung, Pfade, Metadaten, Performance und Fehlerfälle entscheiden darüber, ob eine Website wirklich zuverlässig ist.

Die frühen HTML-Protokolle haben außerdem gezeigt, wie stark saubere Verschachtelung, gültige Attribute und verständliche Formulare die spätere Qualität beeinflussen. Ein funktionierendes Ergebnis beginnt bei korrektem Grundgerüst, nicht erst beim Design.

Aktueller Status

Die Arbeitsweise wird bei neuen Projekten weiter verfeinert. Besonderes Augenmerk liegt auf weniger doppeltem CSS, konsistenter Navigation und realistischen Inhalten.

Zukünftige Verbesserungen

Nächste Schritte sind umfassendere automatisierte Tests, bessere Bildworkflows, strukturierte Inhaltsdaten und bei Bedarf ein bewusst gewähltes Backend, ohne statische Projekte unnötig zu verkomplizieren.