In dit project heb ik twee verschillende pagina’s van een website naar keuze ontwikkeld met behulp van vanilla HTML, CSS en JavaScript. De focus lag op het creëren van een professioneel en toegankelijk ontwerp, waarbij je gebruik maakt van moderne webtechnieken. Voor dit project heb ik gekozen om de (toenmalige) website van het Frans Hals Museum na te maken, waarbij ik rekening hield met de huisstijl en de vereisten voor een responsive, toegankelijke en interactieve gebruikerservaring.

In het begin van het project lag de focus op het analyseren van de huidige website van het Frans Hals Museum. Ik maakte breakdownschetsen van de pagina’s die ik wilde namaken en voerde een toegankelijkheidstest uit om te achterhalen waar verbeteringen mogelijk waren. Vervolgens begon ik met het opzetten van de structuur en lay-out in HTML en CSS, waarbij ik ervoor zorgde dat de code semantisch correct was en voldeed aan de toegankelijkheidseisen. Naarmate het project vorderde, werkte ik aan de responsive weergave voor mobiele apparaten en implementeerde ik micro-interacties met JavaScript, zoals een uitklapbaar menu en andere interactieve elementen. Gedurende het proces bleef ik mijn code optimaliseren en richtte ik me op een nette en onderhoudbare structuur met custom properties.

Het eindresultaat van dit project is een nauwkeurige reconstructie van de homepagina en collectiepagina van het Frans Hals Museum, gebouwd met nette HTML, CSS en JavaScript. Mijn focus lag op de surface plane, waarbij ik interacties en animaties heb toegevoegd door te experimenteren met afters, keyframes, transitions en JavaScript. Ik speelde met timing-functions, cubic-beziers en transform-origin om de animaties soepel te laten verlopen. De website is volledig responsive, geschikt voor verschillende schermformaten, en voldoet aan de WCAG-richtlijnen, met aandacht voor toegankelijkheidseisen zoals screenreader-ondersteuning en voldoende kleurcontrast.