HTML & CSS

HTML und CSS sind das Fundament jedes Web-Projekts — auch dann, wenn darüber moderne Frameworks wie Angular, Astro oder andere laufen. Eine Anwendung ist nur so gut wie die HTML-Struktur, die sie ausliefert, und das CSS, das sie gestaltet. Schlechtes Markup führt zu schlechtem SEO, schlechter Barrierefreiheit und schwieriger Wartung. Schlecht strukturiertes CSS bremst Performance und macht jede Anpassung zur Detektivarbeit.

Mein Anspruch: HTML, das die Bedeutung der Inhalte korrekt abbildet — und CSS, das modular, lesbar und langfristig wartbar bleibt.

CSS hat sich in den letzten Jahren deutlich weiterentwickelt — viele Dinge, für die früher Frameworks oder JavaScript nötig waren, lassen sich heute nativ lösen:

• CSS Grid und Flexbox. Layouts ohne Float-Tricks oder Float-Clearings — ausdrucksstark, vorhersehbar und gut beherrschbar.
• Custom Properties. Variablen direkt im CSS, zur Laufzeit änderbar — Grundlage für Theming, Dark Mode und sauberes Token-System.
• Container Queries. Komponenten reagieren auf ihren Container, nicht nur auf den Viewport — endlich modular responsive.
• :has() und moderne Selektoren. „Eltern-Selektor" als nativer Bestandteil — viele JavaScript-Workarounds entfallen.
• subgrid. Verschachtelte Grids mit gemeinsamer Ausrichtung — saubere Tabellen-Layouts ohne tatsächliche Tabellen.
• color-mix(), OKLCH-Farben. Modernes Farbmanagement mit menschen-wahrnehmbarer Lichtheit, sauberes Mischen.
• Native Cascade Layers (@layer). Klare Spezifitäts-Steuerung ohne !important-Eskalation.
• @supports und Progressive Enhancement. Saubere Fallbacks für ältere Browser, ohne den modernen Stand zu verzögern.

Sauberes CSS folgt nicht einem Framework, sondern klaren Architektur-Prinzipien:

• Eigene Tokens als Grundlage. Farben, Abstände, Schriftgrößen, Radien als CSS Custom Properties. Konsistenz durch Definition, nicht durch Disziplin.
• Modulare Komponenten. Jede Komponente kapselt ihre Styles. Keine globalen Klassennamen, die in halb der Codebase auftauchen.
• BEM, SCSS-Module oder CSS Layers. Konvention für Klassennamen und Spezifität — pragmatisch gewählt, konsequent durchgezogen.
• Mobile-first. Layouts entstehen für das schmalste Gerät zuerst — größere Bildschirme erweitern das Bild.
• Performance mitgedacht. Critical CSS inline, Rest lazy. Keine megabytegroßen CSS-Dateien.
• Kein Utility-Framework als Pflicht. Wo eigene, projektspezifische Styles ausreichen, sind sie meist die bessere Wahl als ein vorgefertigtes Utility-Set.

• HTML-Templates als Lieferung an Backend- oder Framework-Teams
• Eigene Design-Systeme mit Tokens, Komponenten und Dokumentation
• Barrierefreiheits-Audits und Verbesserungen bestehender Websites
• CSS-Modernisierung von Legacy-Projekten auf aktuellen Stand
• Frontend-Komponenten für Angular-, Astro- oder Vanilla-JS-Projekte
• E-Mail-Templates mit Tabellen-Layouts und Inline-Styles (eigene Welt)

1. L01

   HTML-Templates

   Saubere, semantische HTML-Templates — als Grundlage für Websites, Komponenten-Bibliotheken oder als Lieferung an Backend-Teams.

2. L02

   Modernes CSS und SCSS

   CSS-Architektur mit Custom Properties, Grid, Flexbox und Container Queries. SCSS für strukturierten Code mit klaren Modulgrenzen.

3. L03

   Komponenten-Bibliotheken

   Eigene Komponenten-Systeme als Grundlage konsistenter Auftritte — wiederverwendbar, dokumentiert, framework-unabhängig oder integriert.

4. L04

   Barrierefreies Frontend

   Semantische Strukturen, korrekte ARIA-Auszeichnung, Tastatur-Navigation, ausreichende Kontraste. Barrierefreiheit als Standard, nicht als Nachgedanke.

5. L05

   Frontend-Modernisierung

   Veraltete HTML- und CSS-Strukturen aufräumen — von Tabellen-Layouts zu modernem CSS, von !important-Chaos zu klarer Architektur.