Version 1.0 · ohne Build-Schritt

Eine Testseite, an der sich gut arbeiten lässt

Alle gängigen Website-Funktionen an einem Ort: Navigation, Dark Mode, Formulare mit Validierung, sortierbare Tabellen, Diagramme, Galerie mit Lightbox, eine Todo-App mit lokalem Speicher und ein kompletter Komponenten-Katalog. Reines HTML, CSS und JavaScript – einfach eine Datei öffnen und loslegen.

Komponenten ansehen
0
Seiten
0
Komponenten
0
Abhängigkeiten
0
Responsiv

Was drin ist

Jede Seite deckt einen eigenen Themenbereich ab, damit du gezielt an einer Sache arbeiten kannst.

Komponenten

Buttons, Karten, Tabs, Accordion, Modal, Toasts, Dropdown, Tooltip, Fortschrittsbalken, Timeline und mehr.

Formulare

Alle Eingabetypen, Live-Validierung, Passwortstärke, Zeichenzähler, mehrstufiger Assistent und Datei-Upload.

Daten

Tabelle mit Suche, Sortierung, Filter und Seitenblättern, dazu Balken-, Linien- und Kreisdiagramm auf Canvas.

Todo-App

Anlegen, abhaken, bearbeiten, filtern und sortieren – gespeichert im localStorage des Browsers.

Galerie

Raster mit Kategoriefilter, Lightbox samt Tastatursteuerung und nachladenden Inhalten.

Kontakt

Kontaktformular mit Validierung, FAQ-Accordion, Karte als Platzhalter und Öffnungszeiten.

Kein Setup nötig

Doppelklick auf index.html genügt. Für fetch-Beispiele startest du am besten einen kleinen lokalen Server.

Ein Stylesheet, klar sortiert

Farben, Abstände und Radien liegen als CSS-Variablen ganz oben in assets/css/styles.css.

Komponenten per data-Attribut

Tabs, Modals und Co. initialisieren sich selbst – du schreibst nur das Markup.

Erste Schritte

Lokal starten – zwei Varianten, je nachdem was du brauchst:

# Variante 1: Datei direkt öffnen
open index.html

# Variante 2: kleiner Server (nötig für fetch/JSON)
python3 -m http.server 8000
# danach http://localhost:8000 aufrufen

Verlauf

  • Grundgerüst

    Layout, Navigation, Dark Mode und Design-Tokens stehen.

  • Komponenten

    Katalog mit allen Bausteinen zum Kopieren.

  • Interaktion

    Formulare, Tabellen, Diagramme, Todo-App und Galerie.

  • Umbauen

    Farben ändern, Seiten ergänzen, Komponenten austauschen.