Wat is front-end website ontwikkeling?

Front-end ontwikkeling is alles wat in de browser gebeurt: wat de bezoeker ziet, aanraakt en gebruikt. De knoppen, de indeling, de animaties, het formulier.

De achterkant bepaalt wat er echt gebeurt, de voorkant bepaalt hoe dat voelt. Op een productpagina zijn de foto's, de knoppen en de melding dat er nog twee op voorraad liggen de voorkant; het getal achter die melding komt van de achterkant. Wat er op de server gebeurt staat bij back-end ontwikkeling.

Wat de browser met je pagina doet

De browser leest de HTML van boven naar beneden en bouwt daar een boomstructuur van, de DOM. Tegelijk leest hij de stijlbestanden en bouwt daar een tweede structuur van. Die twee worden gecombineerd tot een lijst van dingen die getekend moeten worden, en dan pas berekent hij waar alles komt te staan en tekent hij het scherm.

Dat proces staat stil zolang er nog stijlbestanden binnenkomen. CSS blokkeert het tekenen, want de browser wil geen ongestileerde tekst tonen die een halve seconde later verspringt. Scripts in de kop van je pagina blokkeren zelfs het lezen van de HTML, tenzij je ze met defer of async meegeeft.

Daar komt de belangrijkste vuistregel van dit vak vandaan: alles wat je bovenaan je pagina laadt, betaalt elke bezoeker. Een lettertype, een pictogrammenset, een chatvenster en een cookiebanner die allemaal eerst willen laden, kosten samen meer tijd dan de hele rest van je pagina.

HTML is de laag waar alles op rust

HTML bepaalt wat iets is. Dit is een kop, dit is een alinea, dit is een lijst, dit is een knop, dit is een invoerveld met dit label erbij.

Het is de eenvoudigste van de drie talen en het wordt het vaakst slordig gedaan. Een pagina die uit niets dan div-elementen bestaat werkt visueel prima en is voor een schermlezer en voor een zoekmachine een muur zonder deuren. Meer over de taal zelf staat in het artikel over HTML.

De winst zit in de standaardelementen gebruiken die er al zijn. Een button is met het toetsenbord bereikbaar, reageert op de spatiebalk en wordt door hulpsoftware aangekondigd als knop. Een div waar je een klik op hebt geplakt doet dat allemaal niet, en dan mag je het met attributen naprogrammeren.

Bij formulieren scheelt dat het meest. Koppel elk label aan zijn veld, geef tekstvelden het juiste type, en zet de juiste autocomplete-waarde erop. Dan opent een telefoon bij een e-mailadres het toetsenbord met het apenstaartje, bij een telefoonnummer het cijfertoetsenbord, en vult de browser adresgegevens in één tik in. Vijf minuten werk, en je ziet het terug in het aantal formulieren dat wordt afgemaakt.

CSS bepaalt het uiterlijk en de indeling

CSS gaat over kleuren, lettertypes, ruimte en de plek waar elk onderdeel terechtkomt. Het is de laag waar de meeste tijd in gaat zitten en waar de meeste rommel ontstaat.

Voor de indeling gebruik je flexbox voor rijen en kolommen, en grid voor echte rasters. Sinds die twee overal werken zijn de trucs met zwevende elementen en tabellen verleden tijd, en is een pagina die zich netjes aanpast aan de schermbreedte gewoon werk van een uur. Meer over de taal staat bij CSS.

Twee nieuwere onderdelen zijn sinds 2023 in alle grote browsers bruikbaar. Met containerqueries kan een onderdeel reageren op de ruimte die het zelf krijgt in plaats van op de schermbreedte, wat vooral bij herbruikbare blokken scheelt. En met de selector :has() kun je een element opmaken op grond van wat erin zit, iets waar tot voor kort JavaScript voor nodig was.

Waar het misgaat is bij het opruimen. Stijlbestanden groeien altijd aan en krimpen nooit vanzelf. Op oudere sites zie ik regelmatig dat er honderden kilobytes aan opmaak wordt geladen waarvan een fractie wordt gebruikt, meestal omdat er ooit een sjabloon of een raamwerk is binnengehaald en niemand durft weg te halen wat er niet nodig is.

JavaScript bepaalt het gedrag

JavaScript is de taal die dingen laat gebeuren nadat de pagina er staat. Een menu dat opengaat, een formulier dat controleert wat je invult, een filter dat het aanbod verkleint zonder dat de pagina opnieuw laadt.

Technisch gebeurt dat op drie manieren. De code past de structuur en de opmaak van de pagina aan, hij luistert naar gebeurtenissen zoals een klik of een toetsaanslag, en hij haalt gegevens op bij de server, tegenwoordig vrijwel altijd in JSON. Meer daarover staat bij JavaScript.

Controleer wat iemand invult altijd twee keer. In de browser voor een prettig gesprek, en op de server omdat je nooit kunt vertrouwen op wat er binnenkomt. Een controle die alleen in de browser zit is een beleefdheid, geen beveiliging.

De grootste valkuil is dat er te veel van komt. Elk script dat je toevoegt kost laadtijd, geheugen en rekenwerk op de telefoon van je bezoeker. Scripts van anderen zijn daarbij het pijnlijkst: een chatvenster, een statistiekpakket, een cookiebanner en drie meetpixels vormen bij veel bedrijfssites het grootste deel van het gewicht, terwijl niemand ze ooit heeft opgemeten.

Werken op elk scherm

Bij vrijwel elke bedrijfssite die ik onder ogen krijg komt het grootste deel van het verkeer van een telefoon, en bij lokale diensten is dat aandeel nog groter.

Technisch komt het neer op drie dingen: een viewport-regel in je kop zodat de telefoon niet doet alsof hij een breed scherm is, een indeling die met flexibele maten werkt in plaats van vaste pixels, en breekpunten waarop de indeling verandert. De techniek erachter staat bij responsive webdesign.

Kies je breekpunten op grond van waar je ontwerp begint te knellen, niet op grond van een lijst apparaatformaten. Die lijst klopt volgend jaar niet meer.

Vergeet het aanraken niet. Een vinger is onnauwkeuriger dan een muis, dus knoppen hebben ruimte nodig en links die vlak onder elkaar staan leveren misklikken op. En er bestaat geen hover op een aanraakscherm, dus een menu dat alleen opengaat als je erover zweeft is op een telefoon onbereikbaar. Wat er verder bij komt kijken staat bij je website optimaliseren voor mobiel.

Toegankelijkheid, en wat er sinds juni 2025 wettelijk geldt

Toegankelijkheid betekent dat je site ook werkt voor iemand die niet ziet, niet goed ziet, geen muis kan gebruiken of moeite heeft met concentratie. Voor een deel van je bezoekers is dat de voorwaarde om iets te kunnen bestellen.

De richtlijn waar iedereen naar verwijst is WCAG, sinds 5 oktober 2023 in versie 2.2 een aanbeveling van het W3C. Die stelt eisen aan onder meer contrast, bedienbaarheid met het toetsenbord, tekstalternatieven bij afbeeldingen en zichtbare focus.

Voor Nederlandse overheidsorganisaties is dat al langer verplicht via het Tijdelijk besluit digitale toegankelijkheid overheid, dat sinds 2018 geldt en een toegankelijkheidsverklaring vraagt. Nieuw is dat de eisen sinds 28 juni 2025 ook op een deel van het bedrijfsleven van toepassing zijn. Dat komt door de Europese toegankelijkheidsrichtlijn, in Nederland ingevoerd als de Implementatiewet toegankelijkheidsvoorschriften producten en diensten.

Die wet raakt niet elke site. Hij gaat over bepaalde diensten aan consumenten, zoals webwinkels, bankdiensten, e-boeken, personenvervoer en telecom. Micro-ondernemingen die diensten leveren zijn uitgezonderd, waarbij de grens ligt bij minder dan tien werkzame personen en een jaaromzet of balanstotaal onder de twee miljoen euro. Een lokale installateur met een brochuresite valt er dus buiten, een webshop met vijftien man niet.

Los van de wet is de praktische kant simpeler dan mensen denken. Loop met de tabtoets door je eigen pagina en kijk of je altijd ziet waar je bent. Dat ene rondje legt de meeste problemen bloot.

Snelheid en de drie getallen waar Google op let

Snelheid is aan de voorkant het onderwerp met de meeste winst en de minste glamour.

Google meet drie dingen. Hoe lang het duurt voordat het grootste onderdeel in beeld staat, met 2,5 seconde als grens voor goed. Hoeveel er tijdens het laden verspringt, met 0,1 als grens. En hoe snel de pagina reageert op een klik of een tik, met 200 milliseconden als grens. Dat laatste getal heet INP en heeft op 12 maart 2024 de oudere maat FID vervangen, die alleen naar de eerste interactie keek.

Die getallen komen uit echte bezoeken, niet uit een test op jouw glasvezelverbinding. Daarom kan een site die bij jou snel aanvoelt toch slecht scoren: jij bekijkt hem met een warme cache op een snelle computer.

Waar de winst zit, in de volgorde waarin ik hem meestal haal. Afbeeldingen verkleinen en in een modern formaat opslaan. Afbeeldingen die onder de vouw staan pas laden als ze in beeld komen. Lettertypes beperken tot wat je gebruikt en ze zelf hosten. Scripts van anderen wegen en de helft eruit gooien. En pas daarna beginnen aan het fijnslijpen.

Wat afbeeldingen precies kosten en wat het scheelt om ze te comprimeren staat bij webp-afbeeldingen.

Wat er misgaat en waaraan je het merkt

Vier problemen kom ik vaker tegen dan alle andere bij elkaar.

Tekst die verspringt tijdens het lezen. Bijna altijd een afbeelding of een advertentie zonder opgegeven afmetingen. De browser weet niet hoeveel ruimte hij moet vrijhouden en schuift alles omlaag zodra het bestand binnen is. Zet breedte en hoogte in je HTML of geef een verhouding op in je CSS.

Tekst die eerst onzichtbaar is. Dat komt door een lettertype dat nog geladen wordt. Zet font-display op swap zodat de browser eerst het systeemlettertype toont, of gebruik alleen lettertypes die al op het toestel staan.

Een pagina die pas na een seconde reageert. Meestal doordat er zoveel JavaScript tegelijk draait dat de browser geen tijd heeft om op je tik te reageren. Zichtbaar aan een menu dat pas opengaat als je al twee keer hebt getikt.

Een lege pagina zonder JavaScript. Als je site alle inhoud pas na het laden van een script opbouwt, ben je afhankelijk van dat script. Faalt het, dan staat er niets. Dat is bij een webwinkel of nieuwspagina een risico dat je niet hoeft te nemen.

Wat een goede voorkant kenmerkt

• Hij is snel. Dit weegt het zwaarst en het is het minst spannend. Afbeeldingen comprimeren, scripts beperken, lettertypes opruimen.
• Hij werkt op elk scherm. Ontworpen vanaf de telefoon en daarna verbreed, niet andersom.
• Hij is toegankelijk. Bedienbaar met een toetsenbord, leesbaar door een schermlezer, genoeg contrast. Dat is geen extraatje, dat hoort erbij.
• Hij blijft overeind als er iets niet werkt. Als een script niet laadt, hoort je pagina leesbaar te blijven.
• Hij is te onderhouden. Iemand anders moet over twee jaar kunnen zien waar een kleur of een maat vandaan komt.

Raamwerken, en wanneer ze overdreven zijn

Voor grotere toepassingen worden raamwerken als React, Vue en Svelte gebruikt. Die maken het bouwen van schermen met veel toestanden overzichtelijker, omdat je het bijwerken van de pagina niet meer met de hand hoeft te regelen.

Voor een gewone bedrijfswebsite zijn ze niet nodig, en ze maken het meestal zwaarder dan het hoeft. Je haalt een paar honderd kilobyte aan code binnen om iets te doen wat de browser zelf al kan.

Bootstrap en Tailwind zijn iets anders: dat zijn hulpmiddelen voor de vormgeving. Handig om snel iets neer te zetten, en let op dat je er niet een berg ongebruikte code mee meesleept. Beide hebben een stap in hun bouwproces die eruit haalt wat je niet gebruikt, en die stap wordt vaak overgeslagen.

Mijn maatstaf is simpel. Bouw je pagina's die vooral gelezen worden, dan is het gereedschap zwaarder dan het werk. Het verschil tussen raamwerken en losse bibliotheken staat uitgelegd bij webontwikkelingsbibliotheken.

Privacy zit ook aan de voorkant

Wat je in de browser laadt, bepaalt met wie je bezoeker ongemerkt contact maakt. Bij de AVG is dat een reëel punt, en bij het bouwen komt het zelden ter sprake.

Elk bestand dat je van een ander domein ophaalt, stuurt het IP-adres van je bezoeker naar die partij. Bij lettertypes die rechtstreeks van de servers van Google worden geladen leverde dat in januari 2022 een uitspraak op van het Landgericht München I, dat dit zonder toestemming onrechtmatig achtte. Een Nederlandse uitspraak ken ik niet, en de discussie is te vermijden door lettertypes gewoon zelf te hosten. Dat is bovendien sneller.

Hetzelfde geldt voor ingesloten video's, kaarten en meetpixels. Zet een YouTube-video pas neer nadat iemand op afspelen klikt, of gebruik het domein dat geen cookies plaatst tot er wordt afgespeeld.

En het belangrijkste: scripts die toestemming vereisen mogen pas laden nadat die toestemming er is. Een cookiebanner die netjes vraagt terwijl het statistiekscript al draait, voldoet niet. Dat is aan de voorkant een kwestie van de juiste volgorde en het wordt in de praktijk vaak verkeerd ingesteld.

Browsers, en waarom je op een echt toestel test

De grote browsers liggen dichter bij elkaar dan vroeger. De verschillen die overblijven zitten in nieuwe functies en in het gedrag van formulieren en video op mobiel.

Op een iPhone draait vrijwel elke browser nog op de motor van Safari. Sinds maart 2024 mogen er in de Europese Unie andere motoren naast staan, door de digitalemarktenverordening, en in de praktijk is daar nog weinig van te merken. Reken er dus op dat je site op iOS door Safari wordt getekend, wat voor browser er ook op het pictogram staat.

Wat je aanhoudt is de laatste twee versies van de grote browsers plus wat je in je eigen bezoekcijfers ziet. Meer daarover staat bij cross-browser compatibiliteit.

Test op een echt toestel en niet alleen op het verkleinde venster van je ontwikkelaarsgereedschap. Een telefoon rekent langzamer dan je laptop, en pas op een echt scherm merk je dat een balk bij het scrollen over je tekst valt.

Front-end en vindbaarheid

De structuur van je HTML bepaalt of een zoekmachine begrijpt wat je pagina zegt: één h1, koppen die de inhoud beschrijven, alt-teksten bij afbeeldingen, links met tekst die vertelt waar ze heen gaan. Een link met de tekst lees meer vertelt niets, aan een bezoeker met een schermlezer noch aan een zoekmachine.

Snelheid telt mee als signaal, en meer nog als factor in wat mensen doen. Een pagina die drie seconden staat te draaien op een telefoon in de trein verliest bezoekers voordat je iets hebt kunnen zeggen.

Inhoud die alleen via JavaScript verschijnt wordt tegenwoordig meestal wel gelezen, en het gebeurt later en foutgevoeliger, want het renderen komt bij Google in een tweede ronde. Wat er meteen in de HTML staat heeft nog steeds een voordeel.

Gereedschap en hoe je het leert

De volgorde die werkt is saai: eerst HTML, dan CSS, dan JavaScript. Sla de eerste twee niet over om sneller bij het spannende deel te komen, want dat wreekt zich later in de vorm van pagina's die niemand kan bedienen.

Bouw daarbij iets dat je zelf wilt hebben. Een cursus afmaken levert minder op dan één project waar je echt doorheen moet.

Het gereedschap waar je hoe dan ook mee te maken krijgt: de ontwikkelaarsgereedschappen in je browser, waar je de opmaak live kunt aanpassen om te zien wat er gebeurt. Versiebeheer met git, zodat je jezelf kunt redden als je iets sloopt, waarover meer staat bij GitHub. En Lighthouse, dat in je browser zit en je in één klik laat zien waar je snelheid en toegankelijkheid blijven steken.

Wie beide kanten van het vak wil doen komt bij full-stack ontwikkeling uit.

Veelgestelde vragen over front-end ontwikkeling

Wat is het verschil tussen front-end en back-end?

De front-end draait in de browser van je bezoeker en gaat over wat hij ziet en bedient. De back-end draait op de server en gaat over wat er met de gegevens gebeurt.

Een handige toets: staat het in de broncode die je browser binnenkrijgt, dan is het de voorkant. Moet je ervoor inloggen op de server of in de database kijken, dan is het de achterkant.

Welke talen heb ik nodig voor front-end?

HTML, CSS en JavaScript. Dat zijn de drie die elke browser begrijpt en alle andere gereedschappen komen daar uiteindelijk op uit.

Alles daarna is optioneel: een raamwerk, een stijlhulpmiddel, een bouwstap. Wie de drie basistalen beheerst kan zich in een middag in het volgende raamwerk inlezen.

Is front-end ontwikkeling hetzelfde als webdesign?

Nee. Een webdesigner bedenkt hoe iets eruitziet en werkt, een front-end ontwikkelaar bouwt dat zodat het in een browser draait. Bij kleine bedrijven doet vaak dezelfde persoon beide.

Het verschil valt op bij problemen. Een ontwerp dat op een telefoon niet uitkomt is een ontwerpprobleem, een pagina die traag laadt is een bouwprobleem.

Moet ik React leren?

Alleen als je richting toepassingen wilt of als je in loondienst wilt bij een bedrijf dat ermee werkt. Voor het bouwen van bedrijfswebsites, webshops en WordPress-sites kom je er zelden aan toe.

Leer eerst JavaScript zelf goed. Wie een raamwerk leert zonder de taal eronder te begrijpen, loopt vast op het eerste probleem dat niet in de handleiding staat.

Hoe lang duurt het om front-end ontwikkelaar te worden?

Reken op een paar maanden om eenvoudige pagina's te kunnen bouwen en op ongeveer een jaar serieus oefenen voordat je werk kunt afleveren waar iemand voor betaalt.

Het bouwen leer je snel. Wat langer duurt is het gevoel voor wat je niet moet doen: minder scripts, minder afhankelijkheden, minder slimme constructies die een opvolger niet begrijpt.

Waarom laadt mijn website traag terwijl hij er simpel uitziet?

Meestal door drie dingen: te grote afbeeldingen, te veel scripts van anderen, en lettertypes die van een ander domein worden gehaald. Wat je ziet is niet wat er wordt geladen.

Open de netwerktab in je browser, ververs de pagina en sorteer op grootte. Binnen een minuut weet je waar het gewicht zit. Negen van de tien keer staan er twee of drie bestanden bovenaan die de rest samen overtreffen.

Wat is een layout shift en hoe los ik het op?

De inhoud verspringt terwijl je pagina laadt. Je begint te lezen, er komt een afbeelding binnen en je regel schuift naar beneden. Google meet het en bezoekers ergeren zich eraan.

De oplossing is bijna altijd hetzelfde: geef afbeeldingen, video's en ingesloten onderdelen een vaste breedte en hoogte of een vaste verhouding, zodat de browser de ruimte alvast vrijhoudt. Reserveer ook plek voor meldingsbalken die pas na het laden verschijnen.

Moet mijn website aan de toegankelijkheidswet voldoen?

Dat hangt af van wat je doet. Overheidsorganisaties moeten al sinds 2018 voldoen. Sinds 28 juni 2025 gelden er via de Europese toegankelijkheidsrichtlijn ook eisen voor bepaalde diensten aan consumenten, zoals webwinkels, bankdiensten, e-boeken en personenvervoer.

Micro-ondernemingen die diensten leveren zijn daarvan uitgezonderd: minder dan tien werkzame personen en een jaaromzet of balanstotaal onder twee miljoen euro. Twijfel je of je onder de wet valt, leg het dan voor aan een jurist. Aan de basiseisen voldoen is los daarvan verstandig, want het is grotendeels dezelfde moeite als het goed doen.

Wat is WCAG?

De internationale richtlijn voor toegankelijke webpagina's, opgesteld door het W3C. Versie 2.2 is sinds 5 oktober 2023 de aanbevolen versie.

De eisen zijn ingedeeld in drie niveaus. In Nederlandse regelgeving wordt meestal naar niveau AA verwezen, en dat is ook het niveau dat voor een gewone bedrijfssite haalbaar is zonder dat het een project op zichzelf wordt.

Hoe test ik of mijn site op mobiel goed werkt?

Pak je eigen telefoon en doorloop de vijf dingen die een bezoeker moet kunnen: het menu openen, iets zoeken, een productpagina bekijken, het formulier invullen en versturen, en bellen via de link in je koptekst.

Doe dat daarna nog eens met mobiel internet in plaats van wifi. Die ronde legt het meeste bloot, want daar zie je hoe lang iemand naar een leeg scherm kijkt.

Wat kost het om een front-end te laten bouwen?

Dat hangt af van hoeveel verschillende schermen er zijn en van hoeveel maatwerk erin zit. Een sjabloon aankleden is een andere opdracht dan een ontwerp op maat vertalen naar werkende pagina's.

Wat de prijs vooral bepaalt, is de hoeveelheid uitzonderingen. Vraag daarom altijd hoeveel unieke paginasoorten er zijn en wat er gebeurt bij lange titels, ontbrekende afbeeldingen en lege lijsten. Daar zit het werk dat in geen enkele offerte staat.

Wie let er op de snelheid van mijn site na de oplevering?

Meestal niemand, en daar loopt het na verloop van tijd mis. Een site die bij oplevering snel is, wordt langzaam door alles wat er later bij komt: een chatvenster, een extra meetpixel, foto's die rechtstreeks uit de camera worden geüpload.

Draai twee keer per jaar een meting en sorteer de bestanden op je startpagina op grootte. Dat is een halfuur werk en het voorkomt de sluipende achteruitgang die je zelf niet meer opmerkt.