Frontend & UI
Die Kategorie Frontend und UI betrifft die Schicht, die Nutzerinnen und Nutzer tatsächlich berühren: CSS-Architektur, Animationen und Übergänge, Barrierefreiheit, responsives Design und Browser-Performance. Dass sich eine Oberfläche gut anfühlt, ist nie Zufall — es ist die Summe messbarer Entscheidungen: welche Eigenschaft animiert wird, wie viele Millisekunden ein Übergang dauert und ob jemand, der per Tastatur navigiert, den Fokusring sieht. Die Beiträge hier behandeln sowohl diese Details als auch das größere Bild: wie man Layout Shift vermeidet, wo ein WebGL- oder anderweitig aufwendiger Effekt auf Mobilgeräten beginnen und enden sollte und wie man Barrierefreiheit von Anfang an einbaut, statt sie nachträglich aufzusetzen. Die meisten Beispiele stammen aus der Oberfläche dieser Seite.
Frontend-Performance-Audit mit Lighthouse
Wie du einen Lighthouse-Bericht richtig liest und LCP-, CLS- und TBT-Engpässe Schritt für Schritt behebst.
Fluid-Typografie mit CSS clamp(): Praxisleitfaden
Lerne mit CSS clamp() Schriftgrößen zu bauen, die fluid mit dem Viewport skalieren – inklusive Formel und Stolperfallen.
Sticky Header: Leiste fixieren und beim Scrollen ausblenden
So baust du einen Sticky Header, der beim Scrollen fixiert, beim Runterscrollen ausblendet und beim Hochscrollen wieder erscheint — mit sauberem CSS und JavaScript.
Glassmorphism CSS: Milchglas-Effekt mit backdrop-filter
Lerne den Glassmorphism-CSS-Effekt Schritt für Schritt mit backdrop-filter, transluzenten Hintergründen und feinen Rändern aufzubauen — performant und zugänglich.
Web-Font-Optimierung: font-display und FOUT/FOIT
Web-Font-Optimierung: FOUT/FOIT steuern und Ladezeit mit font-display, preload, WOFF2 und Subsetting verbessern.
CSS Transform: Leitfaden für 2D- und 3D-Effekte
Lerne, CSS transform mit translate, rotate und scale für flüssige, GPU-beschleunigte 2D- und 3D-Effekte einzusetzen.
Hamburger-Menü bauen: barrierefreie mobile Navigation
Baue Schritt für Schritt eine barrierefreie, flüssige mobile Navigation mit einem Hamburger-Menü in reinem CSS und JavaScript.
CSS Specificity: Welche Regel gewinnt?
Wie CSS Specificity berechnet wird, wie die Cascade entscheidet und wie !important und Inline-Stile die Reihenfolge brechen, mit Beispielen.
Scroll-Animation: Performante Effekte mit Intersection Observer
Der moderne Weg zur Scroll-Animation: flüssige, performante Effekte, ausgelöst per Intersection Observer.
CSS position: relative, absolute, sticky und fixed
Ein praktischer Leitfaden, der jeden Wert von CSS position (static, relative, absolute, fixed, sticky) mit echten Beispielen erklärt.
Web-Seitengeschwindigkeit: Praxisleitfaden zum Beschleunigen
Steigern Sie die Web-Seitengeschwindigkeit mit Lazy Load, Minify und Caching; verbessern Sie Core Web Vitals und verkürzen Sie die Ladezeit.
CSS Dark Mode: prefers-color-scheme und Toggle-Anleitung
So baust du CSS Dark Mode mit Custom Properties, prefers-color-scheme und einem kleinen Toggle. Eine flickerfreie, dauerhafte Theme-Anleitung.
Three.js-Animation: Eine lebendige 3D-Szene bauen
Three.js-Animation Grundlagen: Szene, Kamera, Render-Schleife und rotierende Meshes für eine lebendige 3D-Szene.
Three.js Einstieg: deine erste 3D-Szene im Browser
Eine Three.js Einführung: lerne WebGL kennen und baue deinen ersten rotierenden 3D-Würfel im Browser.
Web-Barrierefreiheit: Tastatur, ARIA und Kontrast
Grundlagen der Web-Barrierefreiheit: Tastaturnavigation, korrektes ARIA und WCAG-Kontrastwerte für Interfaces für alle.
CSS-Variablen: Praxisleitfaden für Themes und Wiederverwendung
Lerne mit CSS-Variablen Themes zu bauen, Farben zentral zu verwalten und Wiederholung zu reduzieren – mit echten Beispielen.
CSS Media Query Leitfaden: Responsive Design
Lerne mit CSS media query eine Mobile-first-Breakpoint-Strategie, vermeide Fehler und nutze moderne responsive Techniken mit Beispielen.
CSS-Animation: Leitfaden zu transition und keyframes
CSS-Animation-Grundlagen: flüssige transitions, Bewegung mit @keyframes, Performance-Tipps und echte Beispiele.
CSS Grid: Praktischer Leitfaden für moderne Layouts
Lerne Schritt für Schritt, zweidimensionale und flexible Layouts mit CSS Grid über Zeilen- und Spaltenvorlagen zu erstellen.
Ausrichtung und Layout mit CSS Flexbox
Lerne die Grundlagen von CSS Flexbox: Haupt- und Querachse, justify-content, align-items, gap, flex-grow/shrink/basis und praxisnahe Layout-Muster.