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.
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.