Frontend & UI
De categorie frontend en UI gaat over de laag die gebruikers daadwerkelijk aanraken: CSS-architectuur, animaties en overgangen, toegankelijkheid, responsive design en browserprestaties. Dat een interface goed aanvoelt is nooit toeval — het is de optelsom van meetbare beslissingen: welke eigenschap je animeert, hoeveel milliseconden een overgang duurt, en of iemand die met het toetsenbord navigeert de focusring ziet. De stukken hier behandelen zowel die details als het grotere geheel: hoe je layout shift voorkomt, waar een WebGL- of ander zwaar effect op mobiel moet beginnen en stoppen, en hoe je toegankelijkheid vanaf het begin inbouwt in plaats van er achteraf een pleister op te plakken. De meeste voorbeelden komen uit de interface van deze site.
Frontend-performance auditen met Lighthouse
Hoe je een Lighthouse-rapport goed leest en LCP-, CLS- en TBT-knelpunten stap voor stap oplost voor een snellere site.
Vloeiende typografie met CSS clamp(): praktische gids
Leer lettergroottes bouwen die vloeiend meeschalen met het scherm via CSS clamp(), inclusief de formule en valkuilen.
Sticky Header: balk vastzetten en verbergen bij scrollen
Hoe maak je een sticky header die bij scrollen vastzit, verdwijnt bij omlaag scrollen en weer verschijnt bij omhoog scrollen — met nette CSS en JavaScript.
Glassmorphism CSS: matglaseffect met backdrop-filter
Leer het glassmorphism CSS-effect stap voor stap bouwen met backdrop-filter, doorschijnende achtergronden en subtiele randen — snel en toegankelijk.
Webfont-optimalisatie: font-display en FOUT/FOIT
Webfont-optimalisatiegids: beheers FOUT/FOIT en versnel het laden met font-display, preload, WOFF2 en subsetting.
CSS Transform: gids voor 2D- en 3D-effecten
Leer CSS transform gebruiken met translate, rotate en scale voor vloeiende, GPU-versnelde 2D- en 3D-effecten.
Hamburgermenu maken: toegankelijke mobiele navigatie
Bouw stap voor stap een toegankelijke, vloeiende mobiele navigatie met een hamburgermenu in pure CSS en JavaScript.
CSS Specificity: welke regel wint?
Hoe CSS specificity wordt berekend, hoe de cascade beslist en hoe !important en inline-stijlen de volgorde breken, met voorbeelden.
Scroll-animatie: Performante Effecten met Intersection Observer
De moderne manier om scroll-animatie te bouwen: vloeiende, performante effecten die starten via Intersection Observer.
CSS position: relative, absolute, sticky en fixed
Een praktische gids die elke waarde van CSS position (static, relative, absolute, fixed, sticky) met werkende voorbeelden verheldert.
Webpaginasnelheid: praktische gids voor sneller laden
Verbeter de webpaginasnelheid met lazy load, minify en caching; optimaliseer Core Web Vitals en verkort de laadtijd drastisch.
CSS Dark Mode: prefers-color-scheme en toggle-gids
Hoe bouw je CSS dark mode met custom properties, prefers-color-scheme en een kleine toggle. Een flicker-vrije, blijvende thema-gids.
Three.js-animatie: een levende 3D-scène bouwen
Three.js-animatie basis: scène, camera, renderlus en draaiende meshes voor een levende 3D-scène stap voor stap.
Three.js intro: je eerste 3D-scène in de browser
Een Three.js intro: leer wat WebGL is en bouw je eerste draaiende 3D-kubus in de browser.
Webtoegankelijkheid: toetsenbord, ARIA en contrast
Basis van webtoegankelijkheid: toetsenbordnavigatie, correct ARIA en WCAG-contrastratio's voor interfaces voor iedereen.
CSS-variabelen: praktische gids voor thema's en hergebruik
Leer thema's bouwen, kleuren centraal beheren en herhaling verminderen met CSS-variabelen, met echte voorbeelden.
CSS Media Query-gids: responsive ontwerp
Leer een mobile-first breakpointstrategie bouwen met CSS media query, vermijd fouten en pas moderne responsive technieken toe met voorbeelden.
CSS-animatie: gids voor transition en keyframes
CSS-animatie basis: vloeiende transitions, beweging met @keyframes, performance-tips en praktische voorbeelden.
CSS Grid: praktische gids voor moderne lay-outs
Leer tweedimensionale, flexibele en onderhoudbare lay-outs bouwen met CSS Grid via rij- en kolomsjablonen, stap voor stap.
Uitlijning en lay-out met CSS Flexbox
Leer de basis van CSS Flexbox: hoofd- en kruisas, justify-content, align-items, gap, flex-grow/shrink/basis en praktische lay-outpatronen.