Das Kompendium

Dein interaktives Nachschlagewerk für die KI Challenge. Suche Begriffe, lerne Konzepte, teste dein Wissen.

Tools & Setup

🚀 Quick Start — Erste Schritte

Anfänger Essential

Du hast noch nie eine Website erstellt? Kein Problem! Dieser Guide bringt dich in 10 Minuten auf den aktuellen Stand. Du brauchst nur einen Computer mit Internetzugang.

Die 3 Säulen des Webs

Technologie Aufgabe Dateiendung
HTML Struktur — "Was steht auf der Seite?" .html
CSS Design — "Wie sieht es aus?" .css
JavaScript Interaktion — "Was passiert beim Klick?" .js

Merksatz: HTML ist das Skelett, CSS die Kleidung, JavaScript die Bewegung.

Schritt 1: Ordner erstellen

  1. Erstelle einen neuen Ordner auf deinem Desktop: meine-erste-website
  2. Öffne diesen Ordner in VS Code (Rechtsklick → "Mit Code öffnen")

Schritt 2: Erste HTML-Datei

Erstelle eine neue Datei index.html und füge diesen Code ein:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine erste Website</title>
</head>
<body>
  <h1>Hallo Welt!</h1>
  <p>Das ist meine erste Website.</p>
</body>
</html>

Schritt 3: Im Browser öffnen

  1. Installiere die Extension Live Server in VS Code
  2. Klicke mit Rechtsklick auf index.html → "Open with Live Server"
  3. Dein Browser öffnet sich automatisch
Tipp: Ändere etwas in der Datei, speichere mit Ctrl+S und der Browser aktualisiert sich automatisch!

Schritt 4: CSS hinzufügen

Erstelle style.css im gleichen Ordner:

body {
  font-family: Arial, sans-serif;
  background: #f0f0f0;
  color: #333;
  padding: 2rem;
}

h1 {
  color: #4F46E5;
}

Verknüpfe die CSS-Datei in deinem HTML (im <head>):

<link rel="stylesheet" href="style.css">

Unsere Projekt-Struktur

So ist ein typisches Projekt bei uns aufgebaut:

mein-projekt/
├── src/
│   ├── pages/
│   │   └── index.html      ← Deine HTML-Seiten
│   ├── css/
│   │   ├── main.css        ← Import-Hub (alle CSS-Dateien)
│   │   └── 05-components/
│   │       └── header.css  ← Einzelne Komponenten
│   ├── js/
│   │   └── main.js         ← JavaScript-Logik
│   └── translations/
│       └── de.js           ← Sprachdateien
├── dist/                   ← Build-Output (automatisch)
├── package.json            ← Projektkonfiguration
└── vite.config.js          ← Build-Tool-Konfiguration

Wichtige Begriffe für den Einstieg

  • Browser — Das Programm, das Websites anzeigt (Chrome, Firefox, Edge, Safari)
  • Editor — Das Programm, in dem du Code schreibst (VS Code)
  • Server — Ein Computer, der deine Website im Internet bereitstellt
  • localhost — Dein eigener Computer als Server (nur für dich sichtbar)
  • Repository — Ein Projekt-Ordner mit Git-Historie
Goldene Regel: Wenn etwas nicht funktioniert, öffne die Browser DevTools mit F12 und schau in die Console. Dort steht meistens genau, was falsch ist.

🧠 Teste dich selbst

Welche Technologie ist für das Design (Aussehen) zuständig?

Was passiert, wenn du im VS Code mit Live Server arbeitest und speicherst?

GitHub + VS Code

Essential Vorbereitung

GitHub ist die Plattform, auf der wir unseren Code speichern, versionieren und zusammenarbeiten. VS Code ist unser Editor. Zusammen bilden sie das Fundament moderner Webentwicklung.

Schritt 1: GitHub Account erstellen

  1. Öffne github.com
  2. Klicke auf "Sign up"
  3. Wähle einen professionellen Nutzernamen (z.B. vorname-nachname)
  4. Verifiziere deine E-Mail-Adresse

Schritt 2: Repository forken

Dein Lehrer wird ein Repository mit dem Starter-Template erstellen. Du musst es "forken" (eine Kopie in deinem Account erstellen):

# 1. Auf GitHub den "Fork" Button klicken
# 2. Warten, bis die Kopie erstellt ist
# 3. Dein eigenes Repository ist jetzt unter:
#    github.com/DEIN-NAME/ki-challenge-2026

Schritt 3: In VS Code öffnen

  1. Installiere VS Code
  2. Installiere die GitHub-Erweiterung in VS Code
  3. Öffne die Command Palette (Ctrl+Shift+P)
  4. Gib ein: Git: Clone
  5. Füge die URL deines geforkten Repositories ein

Schritt 4: Änderungen hochladen

# Änderungen speichern (stagen)
git add .

# Änderungen committen (mit Beschreibung)
git commit -m "Beschreibung der Änderung"

# Änderungen hochladen (pushen)
git push
Pro-Tipp: Commite oft und in kleinen Schritten. Ein Commit = eine logische Einheit (z.B. "Search-Bar implementiert").

🧠 Teste dich selbst

Welcher Befehl lädt deine Änderungen auf GitHub hoch?

Was macht "git commit -m "message""?

VS Code — Optimal einrichten

Editor Setup

VS Code ist der beliebteste Code-Editor für Webentwickler. Mit den richtigen Extensions und Einstellungen wird er zu einer professionellen Entwicklungsumgebung.

Essentielle Extensions

Extension Zweck
Live Server Startet einen lokalen Server mit Live-Reload für statische HTML-Dateien
Prettier Code-Formatter — sorgt für einheitliche Formatierung
ESLint Findet JavaScript-Fehler und Code-Smells
CSS Peek Springe direkt von HTML-Klasse zur CSS-Definition
GitHub Pull Requests Erstelle und reviewe Pull Requests direkt in VS Code
GitLens Erweiterte Git-Informationen inline im Code
Phosphor Icons Zeigt Phosphor-Icons direkt im Editor an

Live Server verwenden (für einfache Projekte)

Für Projekte OHNE Vite (z.B. statische HTML-Seiten):

  1. Installiere die Extension Live Server von Ritwick Dey
  2. Öffne eine HTML-Datei
  3. Klicke unten rechts auf "Go Live"
  4. Der Browser öffnet sich automatisch bei http://127.0.0.1:5500
Wichtig: Für unsere Vite-Projekte nutze npm run dev statt Live Server! Live Server ist nur für klassische HTML/CSS/JS-Projekte ohne Build-Tool.

Wichtige Tastaturkürzel

Kürzel Aktion
Ctrl+Shift+P Command Palette (alle Befehle)
Ctrl+P Datei schnell öffnen
Ctrl+Shift+F Global suchen
Ctrl+/ Zeile kommentieren
Alt+Shift+F Dokument formatieren (Prettier)
Ctrl+` Terminal öffnen/schließen

Terminal in VS Code

Das integrierte Terminal ist dein bester Freund:

  1. Öffne mit Ctrl+` (Backtick-Taste, links neben der 1)
  2. Es öffnet sich direkt im Projekt-Ordner
  3. Führe hier alle npm und git Befehle aus

Einstellungen für Webdesign

// .vscode/settings.json (im Projekt-Ordner)
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

🧠 Teste dich selbst

Welche Extension startet einen lokalen Server mit Live-Reload?

Welches Tastenkürzel öffnet das integrierte Terminal?

Browser DevTools

Debugging Essential

Die Browser DevTools (Entwicklertools) sind das mächtigste Werkzeug für Webentwickler. Sie zeigen dir, was dein Code wirklich tut — nicht was du denkst, dass er tut.

Öffnen

Browser Tastenkürzel
Chrome, Edge, Firefox F12 oder Ctrl+Shift+I
Chrome (Mac) Cmd+Option+I
Safari Cmd+Option+C (Entwicklermenu aktivieren!)

Die wichtigsten Tabs

1. Elements — DOM und Styles inspizieren
  • Rechtsklick auf ein Element → "Untersuchen"
  • Live-CSS bearbeiten (Änderungen sofort sichtbar!)
  • Computed Styles zeigen finale CSS-Werte
  • Box Model Visualisierung (Margin, Border, Padding, Content)
// Im Elements-Tab: Klicke auf ein Element
// Rechts siehst du alle CSS-Regeln
// Ändere Werte live: color: red; → color: blue;
// Die Änderungen sind SOFORT sichtbar, aber nicht gespeichert!
2. Console — JavaScript ausführen und Fehler sehen
  • Rote Fehlermeldungen = dein Code hat Probleme
  • Gelbe Warnungen = Hinweise, keine kritischen Fehler
  • Du kannst JavaScript direkt eingeben und ausführen
  • console.log() Ausgaben erscheinen hier
// In der Console eingeben:
document.querySelector('.challenge-card')
// → Zeigt das erste Element mit dieser Klasse

console.log('Hello World')
// → Gibt "Hello World" aus

// Objekte inspizieren:
console.table([{name: 'Max', age: 17}, {name: 'Lisa', age: 16}])
3. Network — Netzwerk-Anfragen analysieren
  • Zeigt alle geladenen Dateien (HTML, CSS, JS, Bilder)
  • Filtere nach Dateityp (JS, CSS, Img)
  • Prüfe Ladezeiten (rote = langsam)
  • Prüfe 404-Fehler (Dateien nicht gefunden)
Tipp: Wenn Bilder nicht laden, öffne den Network-Tab und filtere nach "Img". Rote Einträge = Datei nicht gefunden.
4. Sources — JavaScript debuggen
  • Setze Breakpoints (Klick auf Zeilennummer)
  • Schritt für Schritt durch Code gehen
  • Variablen-Werte live beobachten
  • Call Stack verfolgen
5. Application — localStorage, Cookies, Cache
  • Local Storage: Siehe alle gespeicherten Daten
  • Session Storage: Temporäre Daten (bis Tab geschlossen)
  • Cookies: Gespeicherte Cookie-Daten
  • Cache: Zwischengespeicherte Dateien löschen
// Application → Local Storage → http://localhost:5173
// Hier siehst du:
// - challenge-dark-mode: true/false
// - plu-language: "de" oder "en"
// - challenge-classroom-mode: true/false
// Du kannst Werte direkt bearbeiten oder löschen!

Mobile Device Simulation

  1. DevTools öffnen (F12)
  2. Klicke auf das Geräte-Symbol oben links (oder Ctrl+Shift+M)
  3. Wähle ein Gerät (z.B. iPhone 14, iPad, Galaxy S21)
  4. Teste dein responsives Design
  5. Drehe das Gerät (Landscape/Portrait)
Golden Rule: Wenn etwas nicht funktioniert, öffne die Console (F12 → Tab "Console"). In 90% der Fälle zeigt dir die Fehlermeldung genau, was falsch ist.

🧠 Teste dich selbst

In welchem Tab siehst du JavaScript-Fehler?

In welchem Tab kannst du localStorage-Daten sehen?

KI-Tools für Studenten — Kostenlos & Lerntauglich

Tools Studenten Essential

Du brauchst keine teuren Abos, um professionelle Ergebnisse zu erzielen. Diese Tools sind entweder komplett kostenlos oder bieten großzügige Studenten-Tarife. Alle funktionieren direkt im Browser oder als kostenlose VS Code-Extension.

🎨 Bildgenerierung — Kostenlos

Tool Zweck Kosten
Bing Image Creator Bilder aus Textbeschreibungen mit DALL-E 3. Sehr gute Qualität, auch für Text in Bildern. Kostenlos (mit Microsoft-Konto)
Leonardo AI Photorealistische Bilder, Illustrationen, 3D-Styles. Unser empfohlenes Tool für Hero-Bilder. Kostenlos (150 Tokens/Tag)
Ideogram Besonders gut für Bilder MIT Text (Logos, Poster, Memes). Kostenlose Version verfügbar. Kostenlos (tägliches Limit)
Playground AI Mix aus realen und gemalten Stilen. Sehr intuitiv für Anfänger. Kostenlos (500 Bilder/Tag)
Tensor.Art 100+ vorinstallierte Modelle. Kein Setup nötig, alles im Browser. Kostenlos (tägliche Credits)
Stable Diffusion (lokal) Installiere auf deinem PC. Komplett kostenlos und offline nutzbar. Benötigt eine gute Grafikkarte. Kostenlos (Open Source)
Tipp: Starte immer mit Bing Image Creator oder Leonardo AI. Beide sind für Studenten völlig ausreichend und liefern professionelle Ergebnisse.

💻 Code-Assistenten — Kostenlos oder Studenten-Tarif

Tool Zweck Kosten
GitHub Copilot KI-gestützte Code-Vervollständigung in VS Code. Der bekannteste KI-Copilot. Kostenlos für Studenten!
Codeium Kostenlose Alternative zu GitHub Copilot. Funktioniert in VS Code, Browser, JetBrains. Kostenlos (unbegrenzt)
Continue.dev Open-Source KI-Assistent für VS Code. Nutzt kostenlose KI-Modelle im Hintergrund. Kostenlos (Open Source)
ChatGPT Allzweck-KI für Erklärungen, Code-Reviews, Debugging-Hilfe, Texte schreiben. Kostenlos (GPT-4o verfügbar)
Claude Besonders gut für lange Code-Analysen und komplexe Erklärungen. Sehr präzise. Kostenlos (tägliches Limit)

🖼️ Bildoptimierung & Assets — Kostenlos

Tool Zweck Kosten
Squoosh Google-Tool zur Bildkompression. Konvertiere PNG → WebP, verkleinere Dateien massiv. Unverzichtbar für Websites! Kostenlos
TinyPNG Komprimiert PNG und JPEG. Einfach Bilder reinziehen, fertig. Kostenlos (bis 20 Bilder)
Remove.bg Entfernt automatisch den Hintergrund von Fotos. Perfekt für Product-Shots. Kostenlos (1 Bild)
SVG Repo Tausende kostenlose SVG-Icons. Filtere nach Lizenz (CC0 = komplett frei). Kostenlos
Unsplash Kostenlose hochwertige Fotos für deine Website. Keine Attribution nötig. Kostenlos
Pro-Tipp: Nutze Squoosh, um deine generierten Bilder in WebP zu konvertieren. Deine Website lädt dann 50–80% schneller!

🎨 Design & Farben — Kostenlos

Tool Zweck Kosten
Figma Professionelles UI/UX-Design direkt im Browser. Kostenlos für Studenten. Kostenlos (Education Plan)
Coolors Generiere Farbpaletten mit einem Tastendruck. Exportiere als CSS-Variablen. Kostenlos
Fontjoy KI-generierte Schriftpaarungen. Finde harmonische Kombinationen für deine Website. Kostenlos
Canva Einfaches Design von Social-Media-Posts, Präsentationen, Mockups. Kostenlos (Grundfunktionen)
UI Colors Generiere komplette Farbsysteme mit Primary, Secondary, Accent und Grayscale. Kostenlos

📝 Text & Recherche — Kostenlos

Tool Zweck Kosten
Perplexity KI-Suchmaschine mit Quellenangaben. Perfekt für Recherchen mit verifizierbaren Fakten. Kostenlos
ChatGPT Texte formulieren, Code erklären lassen, Konzepte vereinfachen, Brainstorming. Kostenlos
DeepL Bessere Übersetzungen als Google Translate. Perfekt für i18n-Texte. Kostenlos (Grundfunktionen)
Grammarly Rechtschreib- und Grammatikprüfung für deine Texte (auch auf Deutsch). Kostenlos (Grundfunktionen)

🔧 Sonstige nützliche Tools

Tool Zweck Kosten
Regex101 Teste und debugge Regular Expressions mit Echtzeit-Erklärungen. Kostenlos
Can I Use Prüfe, welche Browser eine CSS- oder JS-Funktion unterstützen. Kostenlos
Uiverse Tausende fertige UI-Elemente (Buttons, Cards, Loaders) mit Copy-Paste-Code. Kostenlos
Mesh Gradient Generiere schöne Mesh-Gradienten als CSS oder Bild. Perfekt für Hero-Hintergründe. Kostenlos

🎯 Empfohlene Tool-Kombination für die Challenge

Wenn du nur 5 Tools nutzen willst, nimm diese:

  1. Leonardo AI oder Bing Image Creator — Für alle Bilder
  2. Squoosh — Für Bildoptimierung (WebP-Konvertierung)
  3. ChatGPT oder Claude — Für Code-Erklärungen und Debugging
  4. Coolors — Für die Farbpalette
  5. GitHub Copilot (kostenlos als Student) oder Codeium — Für Code-Vervollständigung
Wichtig: Melde dich mit deiner Schul-E-Mail bei GitHub Education an. Dann bekommst du GitHub Copilot und viele weitere Pro-Tools komplett kostenlos!

🧠 Teste dich selbst

Welches Tool konvertiert Bilder in WebP und komprimiert sie?

Wie bekommst du GitHub Copilot als Student kostenlos?

Vite

Build-Tool Essential

Vite (französisch für "schnell") ist ein modernes Build-Tool für Webprojekte. Es ersetzt das manuelle Einbinden von CSS und JS durch ein intelligentes Modul-System.

Warum Vite?

Ohne Vite (klassisch) Mit Vite (modern)
<link rel="stylesheet" href="../../css/style.css"> @import url('05-components/card.css')
<script src="../../js/main.js"></script> import { initTheme } from './modules/theme.js';
Manuelles Caching-Probleme Automatisches Cache-Busting
Kein Live-Reload Instant Hot Module Replacement

Wichtige Befehle

# Development Server starten (mit Live-Reload)
npm run dev

# Produktions-Build erstellen
npm run build

# Build lokal testen
npm run preview

Projekt-Struktur in Vite

project/
├── src/                    # Quellcode
│   ├── pages/
│   │   └── index.html      # Entry Point
│   ├── css/
│   │   └── main.css        # CSS Hub
│   ├── js/
│   │   ├── main.js         # JS Entry
│   │   └── modules/        # Einzelne Module
│   └── assets/             # Bilder, Fonts
├── dist/                   # Build-Output (wird generiert)
├── package.json            # Abhängigkeiten
└── vite.config.js          # Konfiguration
Wichtig: Ändere nie etwas im dist/-Ordner! Das ist der automatisch generierte Output. Arbeite immer im src/-Ordner.

🧠 Teste dich selbst

In welchem Ordner arbeitest du als Entwickler?

Welcher Befehl startet den Vite-Entwicklungsserver?

Design-Systeme

ITCSS — Inverted Triangle CSS

Architektur Essential

ITCSS ist eine Architektur-Methode für CSS, die den Code in logische Schichten organisiert. Die Idee: Spezifität steigt von oben nach unten — wie ein umgedrehtes Dreieck.

Die 7 Schichten

Settings — Variablen, Design Tokens
Tools — Mixins, Funktionen (optional)
Generic — Reset, Normalize
Elements — Bare HTML (h1, p, a)
Objects — Layout-Patterns (Grid, Flex)
Components — UI-Komponenten (Buttons, Cards)
Utilities — Helper-Klassen (.u-hidden)

In unserem Projekt

/* main.css — Der ITCSS Hub */

@import url('00-settings/tokens.css') layer(settings);
@import url('02-generic/reset.css') layer(generic);
@import url('03-elements/base.css') layer(elements);
@import url('05-components/header.css') layer(components);
@import url('05-components/hero.css') layer(components);
@import url('07-utilities/utilities.css') layer(utilities);
@import url('08-modes/classroom-mode.css') layer(modes);

Warum @layer?

CSS Cascade Layers garantieren, dass layer(utilities) immer layer(components) überschreibt — unabhängig von der Selektor-Spezifität. Das eliminiert Spezifitäts-Kämpfe.

/* Ohne @layer — Spezifitätskampf */
#header .nav { color: red; }    /* Gewinnt (100 Punkte) */
.nav { color: blue; }           /* Verliert (10 Punkte) */

/* Mit @layer — Layer gewinnt */
@layer components { .nav { color: blue; } }
@layer utilities  { .nav { color: red; } }  /* Gewinnt! */
Merksatz: Je weiter unten im Dreieck, desto spezifischer. Je weiter oben, desto globaler.

🧠 Teste dich selbst

In welchem Layer liegen die Design Tokens (CSS-Variablen)?

Welcher Layer enthält Utility-Klassen wie .u-hidden?

BEM — Block Element Modifier

Naming Essential

BEM ist eine Namenskonvention für CSS-Klassen. Sie macht Code lesbar, wartbar und skalierbar — besonders wichtig, wenn 5–7 Personen gleichzeitig an einem Projekt arbeiten.

Die drei Bausteine

Block
.challenge-card Die Komponente selbst
Element
.challenge-card__title Ein Teil der Komponente
Modifier
.challenge-card--featured Eine Variante der Komponente

Beispiele

/* BLOCK */
.challenge-btn { ... }

/* ELEMENT */
.challenge-btn__icon { ... }
.challenge-btn__text { ... }

/* MODIFIER */
.challenge-btn--primary { ... }   /* Haupt-Action */
.challenge-btn--secondary { ... } /* Sekundäre Action */
.challenge-btn--large { ... }     /* Große Variante */

/* HTML */
<button class="challenge-btn challenge-btn--primary challenge-btn--large">
  <i class="challenge-btn__icon">...</i>
  <span class="challenge-btn__text">Klick mich</span>
</button>

Regeln

  • ✅ Keine Element-Element-Ketten: ❌ .card__header__title → ✅ .card__title
  • ✅ Modifier kombinieren: .btn--primary.btn--large
  • ✅ Namespace verwenden: .challenge- vermeidet Kollisionen
  • ✅ Keine IDs für Styling: Nur Klassen!
Für KI-Prompts: Wenn du KI nach Code fragst, füge immer hinzu: "Nutze BEM mit .challenge- Prefix. Keine IDs für Styling."

🧠 Teste dich selbst

Wie heißt die Klasse für einen Titel INNERHALB einer Karte (Block: card)?

Was bedeutet der Modifier in .button--primary?

Mobile-First

Responsive Workflow

Mobile-First bedeutet: Du designst zuerst für das kleinste Gerät (Smartphone) und erweiterst dann für größere Bildschirme. Das spart Code und zwingt zur Priorisierung.

Warum Mobile-First?

  • Über 60% des Web-Traffics kommt von mobilen Geräten
  • Es ist einfacher, Layouts zu erweitern als zu reduzieren
  • Es zwingt dich, Inhalte zu priorisieren (was ist wirklich wichtig?)

Richtig vs. Falsch

/* ✅ RICHTIG — Mobile-First */
.challenge-grid {
  grid-template-columns: 1fr;        /* Mobile: 1 Spalte */
}

@media (min-width: 768px) {
  .challenge-grid {
    grid-template-columns: 1fr 1fr;  /* Tablet: 2 Spalten */
  }
}

@media (min-width: 1024px) {
  .challenge-grid {
    grid-template-columns: 1fr 1fr 1fr; /* Desktop: 3 Spalten */
  }
}

/* ❌ FALSCH — Desktop-First */
.challenge-grid {
  grid-template-columns: 1fr 1fr 1fr; /* Desktop zuerst */
}

@media (max-width: 1024px) {
  .challenge-grid {
    grid-template-columns: 1fr 1fr;   /* Dann reduzieren */
  }
}

@media (max-width: 768px) {
  .challenge-grid {
    grid-template-columns: 1fr;       /* Dann reduzieren */
  }
}

Unsere Breakpoints

Name Breakpoint Gerät
Mobile (Default) — Smartphone
sm 640px Große Smartphones
md 768px Tablet
lg 1024px Desktop
xl 1280px Große Desktop

🧠 Teste dich selbst

Warum ist Mobile-First besser als Desktop-First?

Was ist der Hauptvorteil von Mobile-First?

JavaScript

ES6 Modules

JavaScript Essential

ES6 Modules (ECMAScript 2015) ermöglichen es, JavaScript-Code in separate Dateien aufzuteilen und sie über import und export zu verbinden. Das ist die Grundlage unserer Architektur.

Export

// theme.js — Ein Modul exportiert Funktionen
export function initTheme() {
  // ... Logik
}

export function toggleTheme() {
  // ... Logik
}

// Oder alles am Ende exportieren
export { initTheme, toggleTheme };

Import

// main.js — Ein Modul importiert Funktionen
import { initTheme, toggleTheme } from './modules/theme.js';

// Aufrufen
initTheme();

// Mit Alias
import { initTheme as startTheme } from './modules/theme.js';
startTheme();

Regeln in unserem Projekt

  • ✅ 0 Inline-Scripts: Kein <button onclick="...">
  • ✅ Keine globalen Variablen: Alles wird exportiert/importiert
  • ✅ Ein Modul = eine Verantwortung: theme.js kümmert sich nur um Theme
  • ✅ Event Delegation: Ein Event Listener für dynamische Elemente
// ❌ FALSCH — Inline Script
<button onclick="doSomething()">Click</button>

// ✅ RICHTIG — Modul-basiert
// HTML
<button id="my-btn">Click</button>

// JS (in main.js)
import { handleClick } from './modules/actions.js';
document.getElementById('my-btn').addEventListener('click', handleClick);

🧠 Teste dich selbst

Wie importierst du eine Funktion aus einem anderen Modul?

Was macht "import { fn } from "./module.js""?

localStorage

JavaScript Persistenz

localStorage speichert Daten im Browser — auch nach dem Schließen des Tabs. Wir nutzen es für Theme, Sprache und Fortschritt.

API

// Speichern
localStorage.setItem('challenge-dark-mode', 'true');

// Lesen
const isDark = localStorage.getItem('challenge-dark-mode'); // 'true' oder null

// Löschen
localStorage.removeItem('challenge-dark-mode');

// Alles löschen
localStorage.clear();

Wichtig: Nur Strings!

// ❌ FALSCH — Objekte werden zu String "[object Object]"
localStorage.setItem('user', { name: 'Max' });

// ✅ RICHTIG — JSON verwenden
localStorage.setItem('user', JSON.stringify({ name: 'Max' }));

// Lesen und parsen
const user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // 'Max'

Erlaubte Keys in unserem Projekt

Key Zweck
challenge-dark-mode Dark/Light Theme
challenge-classroom-mode Classroom Mode
plu-language Sprache (de/en)
synthese-bookmarks SYNTHESE Lesezeichen
prisma-moodboard PRISMA Moodboard

🧠 Teste dich selbst

Wie speicherst du ein JavaScript-Objekt korrekt im localStorage?

Was ist der Unterschied zwischen localStorage und sessionStorage?

Internationalisierung (i18n)

i18n-Engine

JavaScript Essential

i18n steht für "Internationalization" (18 Buchstaben zwischen I und N). Unsere Engine übersetzt die Website dynamisch zwischen Deutsch und Englisch — ohne die Seite neu zu laden.

Wie es funktioniert

  1. Translation Files: Jede Sprache hat eine JS-Datei mit Key-Value-Paaren
  2. HTML-Attribute: Elemente bekommen data-i18n="key"
  3. Engine: Liest das Attribut, sucht den Text, aktualisiert das Element
  4. Speicherung: Die gewählte Sprache wird in localStorage gespeichert

HTML

<!-- Einfacher Text -->
<span data-i18n="hero.title">Fallback Text</span>

<!-- HTML-Inhalt -->
<div data-i18n-html="hero.description">
  Fallback mit <strong>HTML</strong>
</div>

<!-- Input Placeholder -->
<input data-i18n="search.placeholder" placeholder="Suchen...">

<!-- ARIA Label -->
<button data-i18n="btn.close" aria-label="Schließen">×</button>

Translation File (de.js)

export default {
  'hero.title': 'Willkommen bei SYNTHESE',
  'hero.subtitle': 'Das Medien-Kompendium',
  'search.placeholder': 'Thema suchen...',
  'btn.close': 'Schließen',
  
  // Mit Variablen
  'welcome.user': 'Willkommen, {{name}}!'
};

JavaScript

import { t, onLangChange } from './modules/i18n.js';

// Übersetzung holen
const title = t('hero.title'); // 'Willkommen bei SYNTHESE'

// Mit Variablen
const message = t('welcome.user', { name: 'Max' });
// 'Willkommen, Max!'

// Auf Sprachwechsel reagieren
onLangChange((lang) => {
  console.log('Sprache gewechselt zu:', lang);
  renderContent(); // Inhalte neu rendern
});

Key-Struktur

Verwende immer die Struktur: feature.subfeature.element

  • hero.title — Hero-Bereich, Titel
  • card.readMore — Karten-Komponente, "Mehr lesen"-Button
  • filter.category — Filter-Funktion, Kategorie-Label
Wichtig: Jeder sichtbare Text auf der Seite MUSS einen data-i18n Key haben. Das ist eine harte Regel!

🧠 Teste dich selbst

Wie markierst du einen Text für die Übersetzung?

Welches HTML-Attribut wird für i18n-Text verwendet?

Accessibility (a11y)

ARIA & Semantisches HTML

HTML Essential

ARIA (Accessible Rich Internet Applications) ergänzt HTML um Informationen für Screenreader und andere Hilfsmittel. Kombiniert mit semantischem HTML ist es die Grundlage für barrierefreie Websites.

Semantische HTML-Tags

Zweck Richtig Falsch
Hauptnavigation <nav> <div class="nav">
Hauptinhalt <main> <div class="main">
Artikel/Karte <article> <div class="card">
Button <button> <div class="btn">
Überschrift <h1>–<h6> <div class="h1">

ARIA-Attribute

<!-- Label für Screenreader -->
<button aria-label="Menü öffnen">
  <i class="ph ph-list" aria-hidden="true"></i>
</button>

<!-- Erweiterte Status-Mitteilung -->
<button aria-expanded="false" aria-controls="menu">
  Optionen
</button>

<!-- Live-Region für dynamische Updates -->
<div role="status" aria-live="polite">
  3 neue Benachrichtigungen
</div>

<!-- Modal -->
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Bestätigung</h2>
</div>

Die wichtigsten ARIA-Attribute

Attribut Zweck
aria-label Beschreibt ein Element für Screenreader
aria-hidden Versteckt Elemente vor Screenreadern
aria-expanded Zeigt an, ob etwas ausgeklappt ist
aria-controls Verknüpft Steuerung mit Ziel
aria-live Liest Updates vor (polite/assertive)
role Definiert die Rolle eines Elements

Skip-Link

Ein Skip-Link ermöglicht es Tastatur-Benutzern, direkt zum Hauptinhalt zu springen:

<!-- Ganz oben im Body -->
<a href="#main-content" class="skip-link">
  Zum Hauptinhalt springen
</a>

<!-- Der Hauptinhalt -->
<main id="main-content">...</main>
Merksatz: Wenn du mit der Maus nicht auf ein Element klicken kannst, ist es wahrscheinlich nicht barrierefrei.

🧠 Teste dich selbst

Welches ARIA-Attribut beschreibt ein Element für Screenreader?

Was bedeutet ARIA?

Workflow

Der Challenge-Workflow

Prozess Teamwork

So arbeitest du während der KI Challenge effizient im Team — mit KI-Unterstützung und sauberer Architektur.

Der KI-Prompt-Workflow

  1. System-Prompt senden: Kopiere den Kontext aus docs/PROMPTING-GUIDE.md
  2. Spezifische Anfrage stellen: "Erstelle mir eine BEM-Komponente für..."
  3. Code überprüfen: Prüfe, ob KI die Architektur-Regeln eingehalten hat
  4. In Projekt integrieren: Kopiere den Code in die richtige Datei
  5. Testen: npm run dev und im Browser prüfen
  6. Committen: git add . && git commit -m "..." && git push

Team-Workflow (5–7 Personen)

08:00 — Daily Standup (5 Min.)
        Jeder sagt: Was mache ich heute?

08:05 — Arbeit in Sub-Teams
        • Content-Curator: JSON-Daten füllen
        • UI-Designer: CSS-Komponenten bauen
        • JS-Developer: Interaktivität programmieren
        • QA: Testet auf Mobile und Accessibility

10:00 — Pause (15 Min.)

10:15 — Code-Review im Team
        • Zeigt euch gegenseitig den Code
        • Nutzt KI für Reviews: "Finde Bugs in diesem Code"

11:30 — Integration-Test
        • Alle Module zusammenführen
        • Build testen: npm run build

12:00 — Ende

Debug-Workflow

Wenn etwas nicht funktioniert:

  1. Browser-Konsole öffnen (F12 → Tab "Console")
  2. Fehlermeldung lesen und verstehen
  3. KI fragen: "Dieser Code hat folgenden Fehler: [Fehlermeldung]"
  4. Fix implementieren und testen
  5. Wenn nix hilft: Team-Mitglied fragen oder Lehrer rufen
Golden Rule: Committe nach JEDEM funktionierenden Schritt. Besser 10 kleine Commits als 1 großer, der alles zerstört.

🧠 Teste dich selbst

Welcher Befehl startet den Development-Server mit Live-Reload?

Was ist der letzte Schritt im Workflow?