Herhalingsoefening: Maak een webpagina over jouw favoriete kunstenaar

Doel van de opdracht

Je gaat een eenvoudige webpagina maken waarbij je alle vaardigheden uit de leerstofafbakening toepast. Het eindresultaat is een overzichtelijke webpagina met een header, informatie over jouw favoriete kunstenaar, en een afbeelding.

Opdrachtbeschrijving

  1. Structuur opzetten:
    • Maak een projectmap met submappen: images (voor afbeeldingen) en styles (voor CSS-bestanden).
    • Maak een HTML-bestand index.html en een CSS-bestand style.css.
  2. HTML-code schrijven:
    • Schrijf een correcte HTML-structuur met <!DOCTYPE>, <html>, <head>, en <body>.
    • Voeg in de <head> een titel toe: "Mijn favoriete kunstenaar".
    • Koppel het CSS-bestand met het <link>-element.
    • Voeg een header toe met een <h1> waarin je de naam van jouw favoriete kunstenaar vermeldt.
    • Maak een paragraaf <p> waarin je kort vertelt wie jouw favoriete kunstenaar is en waarom je hen kiest (max. 50 woorden).
    • Voeg een afbeelding toe in de map images en gebruik <img> om een werk van de kunstenaar of een portret van hen te tonen.
    • Maak een lijst <ul> waarin je drie bekende werken of eigenschappen van deze kunstenaar opsomt.
  3. CSS toepassen:
    • Stel een achtergrondkleur en een modern lettertype in.
    • Zorg dat de tekst en afbeelding gecentreerd worden met margin: auto; (op de container).
    • Maak de afbeelding 200px breed, maar behoud de verhoudingen.
    • Pas marges en padding toe om de inhoud netjes te plaatsen.
  4. Lay-out maken:
    • Gebruik een <div>-container en pas margin:auto; toe om de inhoud te centreren.
    • Structuur de inhoud in secties zoals <header>, <main>, en <footer>.

Specificaties

  • Zorg voor een correcte HTML-structuur met semantische elementen.
  • Gebruik automatische marges voor het centreren van de inhoud.
  • Gebruik consistent een kleurenschema en een modern Google Font.

Tip

Werk in kleine stappen. Test regelmatig in je browser of alles correct wordt weergegeven. Maak duidelijke namen voor je bestanden en klassen, zodat je werk overzichtelijk blijft.

Rubric

  • HTML-structuur: Correcte semantiek en overzichtelijkheid.
  • CSS-stijlen: Correcte opmaak.
  • Originaliteit: Een aantrekkelijke en consistente vormgeving.
  • Responsiviteit: De pagina past zich goed aan verschillende schermgroottes aan.