🚀 Projekt: Statische Website
Dein Meisterwerk des 1. Semesters – mehrseitig, responsiv, barrierefrei
🎯 1. Ziel des Projekts
Du erstellst eine mehrseitige, statische Website zu einem selbst gewählten Thema. Die Website muss alle gelernten Inhalte aus dem HTML/CSS-Tutorial umsetzen – und besteht aus mehreren HTML-Dateien in Unterordnern (kein Onepage!).
🎨 2. Projektthemen – Wähle eines
Wähle eines der folgenden Themen – oder schlage ein eigenes vor (muss genehmigt werden):
Option A: Persönliche Künstler:in-Website
Stelle eine Künstlerin oder einen Künstler deiner Wahl vor (Musik, Malerei, Film, etc.).
Option B: Lokales Unternehmen oder Verein
Erstelle eine Website für ein reales oder fiktives Unternehmen/Verein aus Traun oder Umgebung.
Option C: Persönliches Portfolio oder Hobby-Website
Zeige deine Leidenschaft – ob Fotografie, Sport, Technik, Kochen oder Gaming.
✅ 3. Technische Anforderungen
Deine Website muss folgende Kriterien alle erfüllen:
- Mehrseitig: Mindestens 3 HTML-Seiten in Unterordnern (z. B.
/ueber/,/galerie/,/kontakt/) - Zentrale CSS-Datei: Eine
css/style.cssim Wurzelverzeichnis – für das gesamte Design - Spezielles Design pro Seite: Falls nötig, nur im
<head>mit<style>– kein Inline-CSS! - Hyperlinks: Navigation zwischen allen Seiten (mindestens 4 interne Links)
- E-Mail-Link: Mindestens ein Link mit
mailto: - Semantische Struktur:
<header>,<nav>,<main>,<footer> - Responsive Design: Mobile-First mit Media Queries
- Barrierefreiheit:
alt-Texte,label for,scopein Tabellen - Mindestens eine Tabelle und ein Formular
- Kein JavaScript – rein statisch!
📂 4. Ordnerstruktur & Abgabe
Deine Projektstruktur muss folgendermaßen aussehen:
/dein-projekt/
├── index.html
├── ueber/
│ └── index.html
├── galerie/
│ └── index.html
├── kontakt/
│ └── index.html
├── css/
│ └── style.css
├── assets/
│ ├── images/
│ └── favicon.svg
├── ordnerstruktur.txt ← Muss enthalten sein!
└── ki-hinweise.txt ← Dokumentation der KI-Nutzung
Die Datei ordnerstruktur.txt enthält genau diesen Baum – als Nachweis der korrekten Struktur.
Abgabe in Moodle:
- Teile den **Ordner**
dein-projektin OneDrive - Speichere den Freigabelink in einer Datei
mein-abschluss-link.txt - Lade diese Textdatei in Moodle hoch
🧠 5. KI-Nutzung
Nutze KI als Denkpartner – nicht als Code-Lieferant:
- Formuliere präzise Prompts („Zeig mir eine semantische Navigation mit Unterseiten“)
- Verstehe den Code, bevor du ihn verwendest
- Dokumentiere deine Prompts in
ki-hinweise.txt