search

ambersr / the-client-website

Ontwerp en maak een website voor een opdrachtgever en bespreek het resultaat tijdens de Sprint Review
https://ambersr.github.io/the-client-website/
MIT License
0 stars 0 forks source link

readme

Platform Bieb in Bloei

In sprint 1 hebben we de opdracht gekregen om een website te ontwikkelen voor een opdrachtgever, met behulp van HTML, CSS en JavaScript. Samen met een team werk ik aan de website voor Bieb in Bloei. Mijn focus voor de eerste sprint ligt op het ontwerpen en ontwikkelen van de Geveltuin pagina.

Wie is Bieb in Bloei?

Bieb in Bloei is onderdeel van Buurtcampus Oost. Dit is een sociale groene ontmoetingsplek waar plantenliefhebbers bij elkaar komen om actief deel te nemen aan vergroening van de omgeving van Amsterdam. Bieb in Bloei biedt verschillende diensten aan waaronder: Zaden- en stekjesbibliotheek, groene educatieve workshops over duurzaamheid, tuinieren en vergroening en geveltuin project waaarin je van alles leert over duurzaamheid, verzorging van stekjes en zaadjes.

Vraag opdrachtgever

De opdrachtgever heeft de volgende vraag aan mij opgesteld: Ontwerp en ontwikkel een digitaal platform voor Bieb in Bloei van Buurtcampus Oost, waarbij Harry op een creatieve manier naar voren komt.

Linkje naar de ontwikkelde Geveltuin pagina: www.ambersr.github.io/the-client-website/

Inhoudsopgave Readme

Beschrijving

Het ontwerp

Het leek mij een cool idee om de website een nieuwe dynamische stijl te geven, waarbij ik heb geprobeerd de oorspronkelijke layout te behouden om de herkenbaarheid van de huidige website niet te verliezen. In het nieuwe ontwerp heb ik twee hoofdkleuren gebruikt voor de achtergrond, wat zorgt voor een dynamische, maar toch rustige uitstraling.

De call-to-action knoppen heb ik een opvallende oranje kleur gegeven, zodat ze goed naar voren komen op de pagina. Daarnaast heb ik het idee om Harry op een speelse manier te verwerken in het ontwerp. Wannneer je naar beneden scrollt komt Harry tevoorschijn achter verschillende contentblokken. Dit zorgt voor een verrassend effect op de pagina.

Ook heb ik de pagina ontworpen voor meerdere schermbreedtes, zodat deze op verschillende apparaten goed functioneert.

Preview linkje naar het ontwerp in Figma: https://www.figma.com/design/DXJVOUapnTVZWHXkFpcr0I/FDND-projecten?node-id=62-2304&t=5PNDDUMVCjG4DIYr-1

image image image

Het ontwikkelde platform

Op basis van het ontwerp ben ik begonnen met de ontwikkelen van de Geveltuin pagina. De pagina is mobile-first gebouwd, wat erg belangrijk is voor de responsiveness voor een optimale ervaring op verschillende schermgroottes. Voor de ontwikkeling heb ik gebruikgemaakt van de codes HTML, CSS en JavaScript.

Linkje naar de ontwikkelde pagina: www.ambersr.github.io/the-client-website/

Belangrijke features:

Kenmerken

HTML structuur

De HTML structuur van de pagina is semantisch opgebouwd, ik heb gebruik gemaakt van de juiste elementen voor een duidelijke HTML opbouw. De pagina bevat een header met navigatie (nav), een main voor de inhoud, en een footer.

Belangrijke aspecten in CSS

Wat belangrijk is om te weten is dat de code mobile first geschreven is. De media queries zijn genest in de de elementen, op deze manier kan je gemakkelijk responsive kwesties aanpassen in het juiste element en is de code makkelijker leesbaar.

Belangrijke aspecten Javascript

De Javascript wordt gebruikt om de animaties op de pagina toe te voegen. Het gaat dan voornamelijk om de volgende elementen: Hamburger menu, het verbergen van het menu wanneer je scrollt en accordion waarin belangrijke informatie staat m.b.t de Geveltuin

Bronnen