Herhalingsoefening: Bouw een productpagina met flexbox.

Doel van de opdracht

Je gaat een eenvoudige productpagina maken waarbij je alle vaardigheden uit de leerstofafbakening toepast. Het eindresultaat is een overzichtelijke, responsive webpagina met een header, productinformatie in kolommen, en een footer.

Opdrachtbeschrijving

Kies een product (bijvoorbeeld een smartphone, een boek, of een kledingstuk) en bouw een webpagina die bevat:

Een navigatiebalk bovenaan met links naar verschillende secties.
Een productafbeelding en beschrijving in een nette lay-out met kolommen.
Extra informatie zoals kenmerken en prijs in een overzichtelijke lijst.
Een footer met contactinformatie met minimaal drie links, zoals sociale media of contactmogelijkheden, gebruikmakend van Bootstrap-iconen. Zorg voor een hovereffect op de links (bijvoorbeeld kleurverandering of een achtergrond).

Specificaties

1. HTML

Gebruik de juiste HTML-structuur (<!DOCTYPE>, <html>, <head>, <body>).
Voeg een header toe met een navigatiebalk. De navigatie bevat een lijst (<ul>) met minimaal drie links naar verschillende secties, gebruikmakend van Bootstrap-iconen.
Maak een sectie voor de productbeschrijving:
- Voeg een productafbeelding in met <img> en een passende alternatieve tekst.
- Schrijf een korte beschrijving van het product in een <p>-element.
Maak een geneste lijst (<ul>) om de kenmerken van het product te tonen.
Maak een footer met sociale links, zoals naar Facebook, Twitter, en Instagram, met behulp van Bootstrap-iconen.

2. CSS

Schrijf een extern stylesheet (style.css) en koppel deze aan je HTML-bestand.
Pas het CSS box model toe voor het structureren van de pagina (gebruik van margin, padding, en border).
Gebruik Flexbox om:
- De volledige webpagina te centreren.
- De header (navigatiebalk) te centreren.
- De productinformatie (afbeelding en beschrijving) in kolommen te plaatsen.
Zorg ervoor dat:
- De links in de navigatie en footer een hovereffect hebben met een kleurverandering en padding.
- De afbeelding in de beschrijving mooi gecentreerd staat.
Gebruik Google Fonts voor een moderne uitstraling.
Kies een kleurenschema en pas deze consistent toe.

Planning

Schets je lay-out op papier of digitaal. Denk aan hoe je de header, productinformatie en footer gaat structureren.
Schrijf de HTML-code.
Schrijf de CSS-code en pas stijlen toe.
Test je webpagina in de browser en controleer of alles correct wordt weergegeven.

Rubric

Je werk wordt beoordeeld op:

HTML-structuur: correcte semantiek en netheid.
CSS-stijlen: gebruik van box model, Flexbox, en hovereffecten.
Responsiviteit: de pagina past zich netjes aan op verschillende schermgroottes.
Originaliteit en consistentie: een aantrekkelijk ontwerp met een consistent kleurenschema en nette typografie.

Tip

Gebruik een duidelijke naamgeving voor klassen en id's in je HTML en CSS, zodat je werk overzichtelijk blijft. Probeer kleine stappen te nemen en regelmatig te testen.

Rubric: Beoordelingscriteria

Beoordelingscriteria	Uitstekend (4 punten)	Goed (3 punten)	Voldoende (2 punten)	Onvoldoende (1 punt)
HTML-structuur	Correcte semantiek, overzichtelijk, volledig; gebruik van alle vereiste elementen zoals `<header>`, `<footer>`, `<nav>`.	Kleine fouten in semantiek of indeling, maar de pagina functioneert en is leesbaar.	Veel fouten in semantiek of belangrijke elementen ontbreken, zoals correcte `<ul>`-structuren.	Slechte structuur of ontbreken van basiselementen zoals `<html>`, `<head>`, `<body>`.
CSS-stijlen	Effectieve stijlen, correct gebruik van Flexbox, consistent kleurenschema en nette lay-out.	Stijlen zijn goed toegepast, maar bevatten kleine inconsistenties of minder goed uitgewerkte details.	Basisstijlen zijn aanwezig, maar Flexbox en/of consistentie ontbreken.	Onvoldoende stijlen of het ontbreken van styling voor basiscomponenten.
Hoefeffecten en interactiviteit	Alle links hebben duidelijke hovereffecten en interactiviteit met kleur- en achtergrondverandering.	Hovereffecten zijn aanwezig, maar niet voor alle links, of minder goed uitgewerkt.	Basis hovereffecten zijn aanwezig, maar de uitvoering is beperkt en niet consistent.	Geen hovereffecten of interactie zichtbaar.
Afbeeldingen en tekst	Afbeeldingen zijn correct geplaatst en goed gecentreerd, tekst is duidelijk en overzichtelijk ingedeeld.	Afbeeldingen en tekst zijn aanwezig, maar niet altijd goed gepositioneerd of uitgelijnd.	Afbeeldingen en tekst zijn niet goed uitgelijnd of slecht leesbaar.	Ontbreken van afbeeldingen of slecht geplaatste tekst, waardoor de pagina niet functioneert.
Footer en sociale links	Footer bevat correcte sociale links met iconen en goed werkende hovereffecten.	Footer bevat sociale links, maar ontbreekt aan consistentie of werkende hovereffecten.	Footer is aanwezig, maar sociale links ontbreken of functioneren niet correct.	Footer ontbreekt of bevat geen relevante inhoud.
Originaliteit en consistentie	Het ontwerp is creatief, visueel aantrekkelijk en consistent in stijl, kleuren en lettertypen.	Ontwerp is visueel aantrekkelijk, maar met enkele inconsistenties in stijl of kleuren.	Basisontwerp is functioneel, maar niet consistent of visueel aantrekkelijk.	Geen aandacht voor consistentie, stijl of creativiteit zichtbaar.