Finaler Check

Hier findest du alles, was du für einen erfolgreichen Abschluss deines Projekts wissen musst. Nutze diese Seite als interaktiven Leitfaden, um dein Projekt selbst zu bewerten.

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 Bewertung basiert auf einem einheitlichen Notenschlüssel, wie er auch in einem echten Seminar zum Einsatz käme. 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 bewerte sie anhand der unten stehenden Kriterien selbst.

💡 Hinweis: Diese Checkliste bewertet nur Projekte, die mit dem offiziellen Starterkit erstellt wurden und lauffähig sind.

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: Warum die Basics den Unterschied machen.

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-WebsiteLauffähige Website als Single- oder Multipager mit index.html, CSS- und JavaScript-Datei.
Fehlerfrei formatiert mit PrettierCode entspricht der Prettier-Formatierung.
Website ist responsiv und Mobile firstLayouts werden für kleine Screens erstellt und für größere angepasst.
Standards gesetztMeta Viewport, box-sizing und Bildskalierung sind eingebunden.
Verwendung semantischer HTML-ElementeStruktur 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 NavigationHeader bleibt beim Scrollen sichtbar.
Navigation in zwei VersionenMobil nur per Button erreichbar, beim Desktop immer sichtbar.
Hero-Image als Picture-ElementGroßes Hero-Bild, mit einem picture-Element umgesetzt.
Sonstige BilderBinde 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 Breitez. B. 45–75 Zeichen pro Zeile (oder alternativ ähnliche Werte in px, em, rem)
Formatierte Paragraphen/Absätzez. B. am Anfang mit 0, am Ende mit 1em
AccessibilityDie Schrift muss immer gut lesbar sein (Farbkontrast zum Hintergrund, Größe, Zeilenhöhe).
UsabilityGroße Klickflächen, leicht zugängliche Inhalte.
Eigene SchriftartSelbst eingebundene Schriftart(en) für Fließtext und Überschriften (nicht den Standard vom Starterkit).
Dynamische Schriftgroessez. B. Mobil (1–1.125rem), Desktop (1.25–1.375rem)
Verwendung von Custom Propertiesz. B. var(--clr-text).
Verwendung von Logical Propertiesz. 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

InteraktionselementeErweitertes HTML oder JavaScript
Typografie, Design oder AnimationHoher Anspruch, im Detail aufeinander abgestimmt
Quantität mit QualitätGroßer Umfang bei gleichbleibender Qualität.

Finaler Check: Geschafft! 🚀

Schau noch einmal auf deinen Score oben: Zeigt dein Fortschritt überall, dass alle Aufgaben erfüllt sind? Dann hast du dir die Bestnote redlich verdient.

Wenn du deine Website veröffentlichen möchtest, erstellst du mit npm run deliver eine versandfertige Version im Ordner dist, die du bei einem Hoster deiner Wahl hochladen kannst.