Skip to content

Latest commit

 

History

History
76 lines (59 loc) · 3.5 KB

README.md

File metadata and controls

76 lines (59 loc) · 3.5 KB
Raw

💻 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.