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