Skip to content

Basis HTML & CSS: een homepage nabouwen

Download en open het design voor de homepage van het fictieve bedrijf Whitepace: whitepace_home.pdf.

Bouw deze homepage zo goed mogelijk na als HTML-webpagina.

Maak voor deze oefening een nieuwe folder op je computer binnenin de web-1/week-1 folder met de naam whitepace.

De pagina is opgebouwd met verschillende onderdelen: titels, subtitels, paragrafen, sections, navigatie, anchor links.

  1. Open de folder whitepace met Visual Studio Code.
  2. Maak een nieuw bestand aan in de folder met de naam index.html.
  3. Maak een nieuw bestand aan in de folder met de naam style.css.
  4. Download de nodige assets: assets.zip. Unzip het bestand en plaats de volledige folder (assets), in de folder die je daarnet aanmaakte (whitepace).
  5. Geef de startstructuur mee in je bestand. Die kan je hier vinden in de slides.
  6. Pas de tekst tussen het <title>-tag in de <head>-tag aan naar een passende titel voor de webpagina.
  7. Focus eerst op de structuur en content van de pagina. Tussen de <body>-openings en sluitingstag start je met de opbouw van je document.
  8. Link de stylesheet in de <head> van de document.
  9. In style.css schrijf je alle styling.
  10. De tekstuele inhoud van de site mag je copy/pasten .