Zeit: ca. 30 Minuten
Abgabe über: Moodle Peer Assessment
In diesem Teil bewerten Sie die Arbeit einer Mitschülerin oder eines Mitschülers anhand einer Bewertungsmatrix – und werden selbst bewertet. Sowohl Ihre Abgabe als auch Ihre Bewertung fliessen in die Modulnote (20%-Teil) ein.
Noch nicht fertig? Sie haben Zeit bis zur Pause, um Ihr Projekt zu vervollständigen und hochzuladen. Danach sofort mit dem Review starten.
Stellen Sie sicher, dass Ihr Ordner folgende Struktur enthält:
alarado/
├── index.html
├── (optional styles.css / script.js)
└── resources/
├── logo-light.svg
├── logo-dark.svg
├── hero-image-simple-homepage.png
└── ... (alle weiteren Bilder/SVGs)
Öffnen Sie index.html im Browser und prüfen Sie kurz: Sieht alles korrekt aus?
Komprimieren Sie den gesamten Projektordner als ZIP-Datei. Benennen Sie die Datei:
alarado.zip
Öffnen Sie Moodle → Modul 291 → LU04 → Aufgabe «Abgabe Alarado Landingpage» und laden Sie Ihr ZIP hoch.
Moodle weist Ihnen automatisch die Arbeit einer anderen Person zu. Sie sehen dies in der Peer-Assessment-Aufgabe, sobald Sie Ihre eigene Abgabe eingereicht haben.
index.html direkt im Browser öffnen
Gehen Sie die Bewertungsmatrix Kriterium für Kriterium durch. Öffnen Sie dazu auch die Browser-DevTools (F12 oder Cmd+Option+I), um Farben und Schriftgrössen präzise zu prüfen. Vergleichen Sie die Farben, Schriftgrössen und Schriftweights mit den Angeben im Figma-File.
Tragen Sie Ihre Punktzahl und Ihren Feedback-Text direkt in Moodle ein. Nutzen Sie die Vorlage weiter unten.
Prüfen Sie jedes Kriterium sorgfältig. Total: 16 Punkte.
| Kriterium | Was wird geprüft? | Max. Punkte |
|---|---|---|
| Design-Treue | Entspricht das Layout dem Figma-Design? Sind alle Bereiche vorhanden und korrekt positioniert: Header (Logo, Nav, Toggle), Hero (H3, H1, P, Buttons, Icons), Hero-Bild rechts? | 0–3 |
| Farben | Stimmen die Hex-Werte der verwendeten Farben? #223344 (Text) · #f2f9fe (Hintergrund hell) · #263fa9 (Akzent) · #111729 (Hintergrund dunkel). Tipp: Im DevTools Elements-Panel nachschauen. | 0–2 |
| Typografie | Stimmen font-size und font-weight? h1: 4rem / 700 · h3: 0.875rem / 600 · p: 1.125rem / 500 · Nav-Links: 0.875rem / 600 | 0–2 |
| rem statt px | Sind alle font-size-Angaben in rem (nicht px)? Test: Im Browser Einstellungen → Schriftgrösse erhöhen. Skalieren alle Texte mit? | 0–2 |
| Responsiveness | Funktioniert der Breakpoint bei 1024px? Mobile: Bild oben / Text unten, Hamburger-Icon sichtbar, Navigation ausgeblendet, Toggle ausgeblendet. Tipp: DevTools → Device Toolbar. | 0–3 |
| Dark/Light Mode | Funktioniert der Toggle-Switch? Wechseln Hintergrundfarbe, Textfarbe und Logo (light ↔ dark) korrekt? Wird der Startzustand beim Laden korrekt gesetzt? | 0–2 |
| Code-Qualität | Werden CSS-Variablen (:root) für Farben, Schriftgrössen und Abstände eingesetzt? Ist der Code lesbar und strukturiert? | 0–2 |
| TOTAL | 16 |
Bei Kriterien mit 0–3 Punkten gilt:
| Punkte | Bedeutung |
|---|---|
| 0 | Nicht vorhanden oder völlig falsch umgesetzt |
| 1 | Ansatz vorhanden, aber grössere Fehler |
| 2 | Mehrheitlich korrekt, kleine Mängel |
| 3 | Vollständig und korrekt umgesetzt |
Bei Kriterien mit 0–2 Punkten: 0 = fehlt, 1 = teilweise, 2 = korrekt.
Bevor Sie die Note eintragen, prüfen Sie:
Vorlage für die Bewertung der einzelnen Kriterien.
Design-Treue (__/3): [Was war gut? Was fehlte oder war falsch positioniert?] Farben (__/2): [Stimmten die Hex-Werte? Falls nicht: Was war falsch?] Typografie (__/2): [Stimmten font-size und font-weight für alle Textelemente?] rem statt px (__/2): [Wurden rem verwendet? Skaliert der Text beim Vergrössern?] Responsiveness (__/3): [Funktioniert der Breakpoint? Ist die Mobile-Ansicht korrekt?] Dark/Light Toggle (__/2): [Funktioniert der Toggle? Wechselt Logo und Farben korrekt?] Code-Qualität (__/2): [CSS-Variablen vorhanden? Lesbarkeit und Struktur?] TOTAL: __ / 16 Allgemeines Feedback: [Was war besonders gut? Was würden Sie als erstes verbessern?]
Gutes Feedback ist konkret.
Statt «Die Farben sind falsch» → «Der Hintergrund hat den Wert #e0e8f0 statt #f2f9fe. Im Dark Mode fehlt die Hintergrundfarbe #111729.»