The Client - Website
Ontwerp en maak een website voor een opdrachtgever en bespreek het resultaat tijdens de Sprint Review.
De instructie van deze leertaak staan in de INSTRUCTIONS.md
Inhoudsopgave Readme
Beschrijving
Deze website is speciaal ontworpen voor bezoekers van Qatar Museums. Het biedt een gebruiksvriendelijke en overzichtelijke ervaring met belangrijke contactinformatie en een routebeschrijving. Daarnaast kunnen gebruikers een uitgebreide fotogalerij van tentoonstellingen bekijken. De website is volledig responsief, wat betekent dat de indeling zich automatisch aanpast aan het schermformaat van de gebruiker, of dit nu een desktop, tablet of mobiele telefoon is. Op grotere schermen worden vier afbeeldingen naast elkaar getoond, op middelgrote schermen worden er twee naast elkaar weergegeven, en op kleinere schermen worden alle afbeeldingen netjes onder elkaar geplaatst.
https://github.com/yamenAl/the-client-website.git
Gebruik
De website is simpel in gebruik. Bovenaan de pagina vind je een duidelijk herkenbare kop met het logo van Qatar Museums en een eenvoudig navigatiemenu waarmee bezoekers naar verschillende secties kunnen gaan, zoals “What’s On” en “Stories.” De secties met contactinformatie en routebeschrijving zijn ook direct bereikbaar via scrollen of klikken op de bijbehorende knoppen.
Het hoofdgedeelte van de website toont een fotogalerij waarin de afbeeldingen in een grid worden getoond. Afhankelijk van het schermformaat wordt het grid aangepast. Op grote schermen zie je vier foto's naast elkaar, terwijl op kleinere schermen één of twee foto's naast elkaar worden weergegeven. Dit maakt de website makkelijk te gebruiken, ongeacht het apparaat dat bezoekers gebruiken
Kenmerken
De website is gebouwd met behulp van HTML en CSS en is volledig geoptimaliseerd voor verschillende schermformaten. Enkele belangrijke kenmerken zijn:
Mobile-first design: De website is ontworpen met de mobiele ervaring als uitgangspunt en schaalt op voor grotere schermen. Vloeiend scrollen: Wanneer een bezoeker op een link klikt om naar een sectie te gaan, beweegt de pagina vloeiend naar het desbetreffende deel. Responsief grid: De fotogalerij past zich automatisch aan het scherm van de gebruiker aan, zodat de inhoud optimaal wordt weergegeven. Drop-down menu: Voor makkelijke navigatie door de verschillende secties van de website. Arabische versie: Bezoekers kunnen schakelen naar een Arabische versie van de website, die speciaal is aangepast om de leesrichting en taal te ondersteunen.
Zoekfunctionaliteit
De website biedt ook een eenvoudige zoekfunctionaliteit die de inhoud op de pagina filtert door bepaalde elementen te verbergen of weer te geven, afhankelijk van de zoekopdracht van de gebruiker.
Dit wordt bereikt met behulp van CSS en JavaScript.
Deze eenvoudige zoekfunctie maakt het mogelijk om snel door de galerij te bladeren en specifieke objecten of tentoonstellingen te vinden.
Drop-down Menu Het drop-down menu maakt het gemakkelijk om door de website te navigeren. Het menu bevat verschillende links naar belangrijke secties van de website, zoals "Stories", "What's On" en "Collection". De styling zorgt ervoor dat het menu alleen wordt getoond wanneer de gebruiker er interactie mee heeft.
Arabische Pagina Een belangrijk aspect van de website is de Arabische versie, die eenvoudig toegankelijk is via het hoofdmenu. Bezoekers kunnen schakelen naar de Arabische taalversie, die is ontworpen met een gespiegelde lay-out om rekening te houden met de leesrichting van rechts naar links. Dit verhoogt de toegankelijkheid en biedt een betere gebruikerservaring voor Arabischsprekende bezoekers.
Bronnen
Grid https://www.youtube.com/watch?v=rg7Fvvl3taU
Viewport meta tag https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
Media query @Media width https://developer.mozilla.org/en-US/docs/Web/CSS/@media/width
foto list https://codepen.io/Arman-Voogd/pen/XWvXPbj
Ik gebruik ChatGPT om me te helpen met nadenken en manieren te vinden om problemen op te lossen.
Licentie
This project is licensed under the terms of the MIT license.