Agentic Coding

HTML CSS LLM-Reflexion

Assignment 1: Persönliche DH-Portfolio-Seite

Abgabe: 13. April 2026 — Präsentation: 14. April 2026 (Einheit 04)

Beschreibung

Erstellen Sie eine persönliche Portfolio-Website, die Ihr Forschungsinteresse in den Digital Humanities vorstellt. Die Website besteht aus mindestens drei HTML-Seiten, verwendet ein externes CSS-Stylesheet und enthält mindestens ein DH-Datenobjekt (z. B. einen historischen Brief, eine Tabelle mit Metadaten oder ein Bild mit IIIF-Link).

Das Ziel ist, die in den Einheiten 01-03 erlernten Konzepte (HTML-Grundlagen, CSS-Gestaltung, Responsive Design) in einem zusammenhängenden Projekt anzuwenden. Nutzen Sie dabei aktiv LLM-Tools als Coding-Assistenten und dokumentieren Sie diesen Prozess in Ihrer Reflexion.

Anforderungen

Struktur und Inhalt

  • Mindestens 3 HTML-Seiten:
    • Startseite — Kurze Vorstellung und Überblick über Ihre DH-Interessen
    • Über mich — Ihr akademischer Hintergrund, Studienschwerpunkte und Motivation für die Digital Humanities
    • Projektidee — Eine DH-Projektidee, die Sie im Laufe des Semesters verfolgen möchten, inklusive eines DH-Datenobjekts
  • Konsistente Navigation zwischen allen Seiten (z. B. ein gemeinsames Menü in jedem Dokument)
  • Mindestens ein DH-Datenobjekt, z. B.:
    • Ein historischer Brief oder Textausschnitt (kann als TEI-Snippet eingebettet sein)
    • Eine Tabelle mit Metadaten zu einer DH-Sammlung
    • Ein Bild aus einer digitalen Sammlung mit IIIF-Link und Quellenangabe
    • Ein eingebettetes Digitalisat (z. B. aus der Europeana)

Technik

  • Externes CSS-Stylesheet (mindestens eine .css-Datei, kein Inline-CSS)
  • CSS-Variablen für Farben und/oder Schriften (mindestens 3 Custom Properties in :root)
  • Responsive Design — Die Website muss auf Mobilgeräten benutzbar sein (Viewport-Meta-Tag, flexible Layouts, mindestens ein Media Query)
  • Semantisches HTML — Verwenden Sie die Elemente <header>, <main>, <footer>, <nav>, <article> und/oder <section> sinnvoll
  • Valides HTML — Keine schwerwiegenden Fehler im W3C Validator

Deployment

  • GitHub Repository — Der gesamte Quellcode liegt in einem öffentlichen GitHub-Repository
  • GitHub Pages — Die Website ist über GitHub Pages online erreichbar
  • README.md — Kurze Beschreibung des Projekts im Repository

Bewertungskriterien

Insgesamt 100 Punkte, verteilt wie folgt:

HTML-Qualität und Semantik 20 Punkte
CSS-Design und Responsive Layout 20 Punkte
DH-Datenintegration 15 Punkte
GitHub Pages Deployment 10 Punkte
LLM-Reflexion (500 - 800 Wörter) 20 Punkte
Präsentation (5 Minuten) 15 Punkte
Gesamt 100 Punkte

Detaillierte Kriterien

HTML-Qualität und Semantik (20 Punkte)

  • Korrekte HTML5-Struktur (<!DOCTYPE html>, <html>, <head>, <body>)
  • Sinnvoller Einsatz semantischer Elemente
  • Valides HTML ohne schwerwiegende Fehler
  • Gute Strukturierung mit Überschriftenhierarchie
  • Alt-Texte für Bilder, sinnvolle Link-Texte

CSS-Design und Responsive Layout (20 Punkte)

  • Externes Stylesheet mit CSS-Variablen
  • Ansprechendes, konsistentes Design
  • Funktionierendes responsives Layout (Test bei 375px und 1200px Breite)
  • Typografie: lesbare Schriftgrößen, ausreichend Kontrast
  • Sinnvoller Einsatz von Flexbox oder Grid

DH-Datenintegration (15 Punkte)

  • Mindestens ein DH-Datenobjekt eingebunden
  • Quellenangabe und Kontextualisierung
  • Angemessene Darstellung (nicht einfach nur Text kopiert)

GitHub Pages Deployment (10 Punkte)

  • Repository ist öffentlich zugänglich
  • Website ist über GitHub Pages erreichbar
  • Sinnvolle Commit-History (nicht alles in einem einzigen Commit)

LLM-Reflexion (20 Punkte)

  • 500 - 800 Wörter Umfang
  • Konkrete Prompt-Beispiele dokumentiert
  • Kritische Analyse: Was hat funktioniert, was nicht?
  • Persönlicher Lerneffekt beschrieben

Präsentation (15 Punkte)

  • 5 Minuten Dauer (nicht wesentlich kürzer oder länger)
  • Website wird live gezeigt
  • Design-Entscheidungen und DH-Datenobjekt werden erklärt
  • Mindestens ein Aspekt der LLM-Nutzung wird reflektiert

LLM-Reflexion: Leitfragen

Die LLM-Reflexion ist ein wesentlicher Bestandteil dieses Assignments. Nutzen Sie die folgenden Leitfragen als Orientierung. Sie müssen nicht alle Fragen beantworten, aber Ihre Reflexion sollte mehrere dieser Aspekte abdecken.

Leitfragen für die Reflexion

  • Werkzeuge: Welche LLM-Tools haben Sie genutzt (ChatGPT, Claude, GitHub Copilot, andere)? Warum haben Sie sich dafür entschieden?
  • Gelungene Prompts: Welche Prompts haben besonders gut funktioniert? Geben Sie mindestens ein konkretes Beispiel mit dem Prompt-Text und dem Ergebnis.
  • Problematische Prompts: Welche Prompts haben nicht das gewünschte Ergebnis geliefert? Was war das Problem und wie haben Sie es gelöst?
  • Lerneffekt: Was haben Sie aus dem generierten Code gelernt? Gab es HTML- oder CSS-Konzepte, die Sie erst durch die LLM-Ausgabe verstanden haben?
  • Verbesserung: Was würden Sie beim nächsten Mal anders machen? Wie würden Sie Ihre Prompts verbessern?

Zur ausführlichen Reflexionsvorlage mit Beispielen und Bewertungskriterien

Tipps und Ressourcen

Tipp: Schritt für Schritt vorgehen

Beginnen Sie mit einer einfachen HTML-Struktur und ergänzen Sie schrittweise Design und Inhalte. Nutzen Sie das LLM nicht, um die gesamte Website auf einmal zu generieren, sondern arbeiten Sie iterativ: eine Seite, dann das Styling, dann das responsive Layout.

Tipp: Prompt-Strategie

Geben Sie dem LLM Kontext. Statt nur "Erstelle eine Portfolio-Seite" zu schreiben, beschreiben Sie genau, was Sie brauchen: "Erstelle eine HTML-Seite für eine DH-Studentin, die ihr Interesse an digitaler Edition beschreibt. Verwende semantisches HTML5 mit header, main und footer. Die Navigation soll Links zu drei Seiten enthalten."

Hilfreiche Links

DH-Datenquellen für das Portfolio

Abgabe

  1. Laden Sie den gesamten Quellcode in ein öffentliches GitHub-Repository hoch.
  2. Aktivieren Sie GitHub Pages in den Repository-Einstellungen.
  3. Reichen Sie im Moodle-Kurs folgende Informationen ein:
    • Link zum GitHub-Repository
    • Link zur GitHub Pages-Website
    • Die LLM-Reflexion (als reflexion.md oder reflexion.html im Repository)
  4. Bereiten Sie eine 5-minütige Präsentation für Einheit 04 (14. April 2026) vor.