💻 10-11. project (herhaling)

🥅 overzicht en leerdoelen

Tijdens de lessen van deze week herhalen we alle leerstof die tot nog toe hebben gezien.

🔍 herhaling project

In dit labo ga je een grotere website in elkaar steken op basis van de printscreens in de map .readme-files.

Met behulp van de kennis uit 'Webtechnologie intro' probeer je deze website zo goed én zelfstandig mogelijk na te maken.

🛠️ opdrachten

shop

• Deze pagina werd gemaakt tijdens labo 5. Gebruik je werk uit dit labo als vertrekpunt (kopieer de map met de oefening van dat labo naar dit project).
• Hernoem je bestand naar shop.html.
• Bekijk de printscreens goed en werk de pagina zo verder af.

recepten & contact

• Deze pagina's werden gemaakt tijdens labo 9. Gebruik je werk uit dit labo als vertrekpunt (kopieer de map met de oefeningen van dat labo naar dit project).
• Hernoem je HTML-bestanden naar recepten.html en contact.html.
• Kopieer ook de JavaScript-bestanden uit labo 9.
• Bekijk de printscreens goed en werk de pagina zo verder af.
• Plaats ook eigen icoontjes op de Leaflet-kaart.
• Pas de Leaflet-kaart verder aan zoals op de printscreens.

home

• Maak een nieuwe startpagina (index.html) met de "look-and-feel" van de voorgaande pagina's.
• Vervolledig de navigatie met de correctie benamingen en bijhorende links op basis van de printscreen, zo ook op de andere pagina's.
• Zet onderaan de home-pagina een Bootstrap-slider met 3 foto's naar keuze uit de map images.
• Vermeld telkens de fotograaf van de foto (zoals in de printscreens).

klanten

• Maak een nieuwe pagina (klanten.html).
• Baseer je hiervoor op de pagina recepten.html én op de printscreens.
• Maak een link naar het bestand js/script-clients.js
• Open het bestand js/script-clients.js. Vervolledig de array met de volgende merken van koffiebonen:
  • Gran Maestro Italiano
  • Segafredo
  • Lavazza
  • Starbucks
  • Fairtrade Original
• Laad de klanten in met een API. Gebruik hiervoor de random user generator API en haal daarbij 6 users op.
• Voor elke klant worden volgende zaken getoond:
  • een grote foto
  • voor- en achternaam
  • land
  • hun favoriete merk van koffiebonen
  • e-mail

check-out

De laatste pagina wordt gemaakt op basis van een check-out voorbeeld, een "custom component" op de website van Bootstrap. Deze kunnen gedownload worden via de knop "download examples".

• Ga aan de slag met de map "check-out".
• In de map "check-out" pas je minstens onderstaande items aan:
  • Vervolledig de head met de juiste links (conform de overige pagina's)
  • Verwijder de extra css binnen <style> uit de index
  • Zet de form-validation.js in de map js.
  • JS-bestanden worden in de head ingeladen (tip: defer).
  • Hernoem index.html naar checkout.html.
  • Neem deze pagina mee op in de navigatie van alle pagina's.
• Zorg dat de check-out-pagina helemaal past in de “look-and-feel” van de coffee-website. (tip: neem een duplicaat van recepten.html en neem deze als basis voor de check-out)
  • Link de pagina aan ./css/style.css
  • Zorg voor dezelfde nav, header, main en aside.
  • [ ]section met id "checkout" (conform plaats id "recepten")
  • Zet de <ul> met "your card" in aside, op de plaats van contact.
  • Zorg dat de inhoud van het formulier en zijn breekpunten overeen komt met de printscreens.
  • Zet alles in het Nederlands en heb oog voor de kleuren.