Abgabe und Anforderungen

Hier findest du alles, was du für einen erfolgreichen Abschluss deines Projekts wissen musst. Nutze diese Seite als interaktiven Leitfaden für deine Website-Abgabe.

Ein lichtdurchfluteter, minimalistischer Arbeitsplatz mit einem Laptop auf einem Holzschreibtisch. Aus dem Bildschirm, der einen Code-Editor zeigt, steigen eine stilisierte 3D-Rakete sowie schwebende Häkchen-Icons und Programmiersymbole plastisch in den Raum auf. — Bereit für den Launch? Nutze die unten stehende Checkliste, um dein Projekt Schritt für Schritt zum Erfolg zu führen.

Dein Fahrplan zur Bestnote

Nutze diese Checkliste, um dein Projekt Schritt für Schritt zu vervollständigen. Dein Echtzeit-Score zeigt dir dabei immer genau, wie nah du der vollen Punktzahl bereits bist. So setzt sich deine Note zusammen:

Die Benotung in GT 1191 basiert auf einem einheitlichen Notenschlüssel. Deine Aufgaben werden in vier Bereichen bewertet, wobei jede Aufgabe je nach Erfüllungsgrad 0, 50 oder 100 % erreichen kann.

Pflichtaufgaben (Bereich 1–3): Diese müssen bearbeitet werden. Erreichst du hier überall 100 %, erhältst du die Note 1,0.
Optionale Aufgaben (Bereich 4): Hier kannst du Zusatzpunkte sammeln. Diese helfen dir, deine Note zu verbessern oder Punktabzüge aus den Pflichtbereichen auszugleichen.

Deine Endnote ergibt sich am Ende aus der Gesamtsumme deiner erreichten Punkte aus allen vier Bereichen.

Deine Aufgabe

Erstelle eine statische Website auf Basis des Website-Starterkits und reiche diese gemäß der unten stehenden Kriterien ein.

⚠️ Wichtig: Abgaben, die nicht mit dem offiziellen Starterkit erstellt wurden, oder nicht lauffähig sind, können nicht benotet werden.

KI-Unterstützung

Du kannst eine KI wie ChatGPT zur Unterstützung nutzen. Beachte jedoch, dass eine rein KI-generierte Lösung weder zu einem echten Lernerfolg noch zu einer guten Note führt. Weiterführende Infos findest du hier: Figma, ChatGPT und KI.

Deine Checkliste

Nutze die folgende Liste, um sicherzustellen, dass du alle Anforderungen erfüllst.

💡 Gut zu wissen: Dein Fortschritt wird automatisch lokal im Browser gespeichert. Du kannst die Seite jederzeit schließen und später genau dort weitermachen, wo du aufgehört hast.

Bewertungsbereiche

🛠️ Stack

Hier dreht sich alles um das technische Fundament. In diesem Bereich stellst du sicher, dass dein Setup korrekt ist, das Starterkit richtig genutzt wird und die technische Infrastruktur deiner Website steht.

Stack

HTML5-Website Lauffähige Website als Single- oder Multipager mit index.html, CSS- und JavaScript-Datei.
Fehlerfrei formatiert mit Prettier Code entspricht der Prettier-Formatierung.
Website ist responsiv und Mobile first Layouts werden für kleine Screens erstellt und für größere angepasst.
Standards gesetzt Meta Viewport, box-sizing und Bildskalierung sind eingebunden.
Verwendung semantischer HTML-Elemente Struktur nutzt überwiegend semantische Elemente wie header, main, nav.

🧩 Module

Hier prüfst du die Funktionalität: Sind alle benötigten Komponenten eingebaut und arbeiten sie so zusammen, wie sie sollen? In diesem Bereich bewerten wir die inhaltliche und funktionale Umsetzung deiner Website.

Module

Sticky Header mit Logo und Navigation Header bleibt beim Scrollen sichtbar.
Navigation in zwei Versionen Mobil nur per Button erreichbar, beim Desktop immer sichtbar.
Hero-Image als Picture-Element Großes Hero-Bild, mit einem picture-Element umgesetzt.
Sonstige Bilder Binde mindestens ein weiteres optimietes Bild ein.

🎨 Styles

Hier steht die Ästhetik im Fokus. Dieser Bereich fasst alle Anforderungen an das Layout, die Typografie und die visuelle Gestaltung zusammen – damit deine Website nicht nur funktioniert, sondern auch gut aussieht.

Styles

Inhalt mit maximaler Breite z. B. 45–75 Zeichen pro Zeile (oder alternativ ähnliche Werte in px, em, rem)
Formatierte Paragraphen/Absätze z. B. am Anfang mit 0, am Ende mit 1em
Accessibility Die Schrift muss immer gut lesbar sein (Farbkontrast zum Hintergrund, Größe, Zeilenhöhe).
Usability Große Klickflächen, leicht zugängliche Inhalte.
Eigene Schriftart Selbst eingebundene Schriftart(en) für Fließtext und Überschriften (nicht den Standard vom Starterkit).
Dynamische Schriftgroesse z. B. Mobil (1–1.125rem), Desktop (1.25–1.375rem)
Verwendung von Custom Properties z. B. var(--clr-text).
Verwendung von Logical Properties z. B. margin-block-end statt margin-bottom.

✨ Extras (optional)

Die Extras sind ein freiwilliges Angebot, um das Bewertungssystem für alle fair zu gestalten:

Die 1,0 ist Standard: Erfüllst du alle Pflichtaufgaben (Bereich 1–3) zu 100 %, erhältst du bereits die Note 1,0. Die Extras sind dafür nicht notwendig.
Dein Sicherheitsnetz: Falls du in den Pflichtbereichen kleine Flüchtigkeitsfehler machst oder Punkte verlierst, kannst du dies durch die Extras ausgleichen. So hast du die Chance, trotz kleinerer Fehler dein Ziel zu erreichen.

⚠️ Wichtig zu beachten: Extras erfordern Verbindlichkeit. Wenn du eine Zusatzaufgabe beginnst, muss diese korrekt bearbeitet werden. Unvollständige oder fehlerhafte Versuche bei den Extras führen zu Punktabzug.

Nutze die Extras also gezielt als „Puffer“, wenn du dir bei den Pflichtaufgaben unsicher bist oder deine Note absichern möchtest.

Extras

Interaktionselemente Erweitertes HTML oder JavaScript
Typografie, Design oder Animation Hoher Anspruch, im Detail aufeinander abgestimmt
Quantität mit Qualität Großer Umfang bei gleichbleibender Qualität.

Abgabe: Geschafft! 🚀

Schau noch einmal auf deinen Score oben: Zeigt dein Fortschritt überall, dass alle Aufgaben erfüllt sind? Wenn ja, bist du bereit für die Abgabe! Folge einfach diesen Schritten, um dein Projekt einzureichen:

Build erstellen: Gib in deinem Terminal den Befehl npm run deliver ein. Dadurch wird automatisch eine versandfertige Version deiner Website im Ordner dist erstellt.
Ordner umbenennen: Benenne das Verzeichnis dist nach dem Schema Vorname_Nachname_Matrikelnummer um.
ZIP-Archiv erstellen: Komprimiere diesen Ordner nun als ZIP-Datei. Der Dateiname sollte lauten: Vorname_Nachname_Matrikelnummer.zip.
Abschicken: Sende die ZIP-Datei per E-Mail an: david.maciejewski@hawk.de.

Tipp: Achte darauf, dass die ZIP-Datei nicht zu groß ist (alle nötigen Assets sollten im dist-Ordner sein, aber keine unnötigen Rohdaten wie .git oder node_modules).

Ich freue mich auf deine Ergebnisse!