Nathan van Munster

Frontend Development

Ben & Jerry's
Remake

Een volledig responsieve website bestaande uit twee unieke pagina's, ontwikkeld met vanilla HTML, CSS en JavaScript, inclusief toegankelijkheidsvoorzieningen, een licht- en donker thema en interactieve elementen voor een optimale gebruikerservaring.

De opdracht

De opdracht was om twee verschillende pagina’s van een bestaande website na te maken met behulp van vanilla HTML, CSS en JavaScript. Hierbij lag de focus op het schrijven van nette, semantische en toegankelijke code, zonder gebruik te maken van frameworks. Naast het reproduceren van het ontwerp moesten de pagina’s responsive zijn voor mobiele apparaten en voorzien worden van interactieve elementen. Ook werd aandacht besteed aan toegankelijkheid, professionele vormgeving, animaties en micro-interacties. Het doel van de opdracht was om frontendvaardigheden verder te ontwikkelen en ervaring op te doen met het bouwen van moderne, gebruiksvriendelijke websites.

Alle content werd opgehaald uit een externe API. Gebruikersgegevens, zoals voorkeuren en selecties, moesten worden opgeslagen in een database. Hiervoor werd een backend gebouwd met Node.js en MongoDB. Het doel van de opdracht was om een volledige webapplicatie te ontwikkelen waarin zowel frontend- als backendtechnieken samenkomen.

De oplossing

Voor deze opdracht heb ik de website van Ben & Jerry’s nagemaakt. Hierbij heb ik twee pagina’s uitgewerkt en de herkenbare huisstijl, kleuren en speelse uitstraling van het merk zo nauwkeurig mogelijk gereproduceerd. De website is gebouwd met HTML, CSS en JavaScript en is volledig responsive voor verschillende schermformaten. Daarnaast heb ik interactieve elementen en animaties toegevoegd om de gebruikerservaring te verbeteren. Tijdens het project heb ik veel aandacht besteed aan semantische HTML, toegankelijkheid en het schrijven van overzichtelijke, onderhoudbare code. Door het namaken van een bestaande commerciële website heb ik mijn kennis van frontend development verder verdiept en geleerd hoe professionele interfaces worden opgebouwd en geoptimaliseerd voor verschillende apparaten.

Projectbeelden

Beeld

Ben & Jerry's remake pagina screenshot
Ben & Jerry's remake tweede pagina screenshot