Voorkennis
- HTML kennis over tabellen, formulieren en andere basiselementen
- CSS kennis over selectors, kleur en positie van elementen
- Javascript kennis over de DOM, refereren aan elementen en elementen aanpassen met javascript
Doelen
- Leer de frontend voor een webshop te maken.
Opdracht
In deze opdracht ga je een webshop nabouwen. Maak een keuze uit 1 van onderstaande webshops:
- Northern Lights (webshop waar je posters kunt bestellen) Download hier de afbeeldingen van de posters
- Indian Bikes (webshop waar je motoren kunt bestellen) Download hier de afbeeldingen van de bikes
De website bestaat uit 3 pagina's
- Homepage
- Webshop
- Winkelwagentje
Iedere pagina is geschikt voor verschillende apparaten:
- Mobile 480px - 768px
- Tablet 768px - 992px
- Small Desktop 992px - 1200px
- Large Desktop 1200px of meer
In de filmpjes kun je zien waar de overgangen zitten. Om een pagina aan te passen voor verschillende schermen maak je gebruik van mediaqueries.
Op de webshop pagina kun je nog geen producten selecteren en bestellen, dat mag je natuurlijk best maken, maar dat is complex en is nu geen onderdeel van de opdracht. Dat hoeft dus niet!
Op de pagina van de winkelwagen kun je de hoeveelheid artikelen en een aantal opties selecteren. Met behulp van javascript bereken je de totale kosten.
Resultaat
- Een website bestaande uit 3 HTML-pagina's een extern css-bestand en een extern javascript-bestand
- Bij de afbeeldingen en de navigatie van de site is gebruik gemaakt van relatieve links.
- Er is gekozen voor lettertypen die dicht overeenkomen met het voorbeeld.
- Je website staat op github.com in een eigen project-repository!
Evaluatie
Vraag om een code-review om feedback op jouw aanpak en tips voor best-practices te krijgen