Opdracht 1:

Trees for all veelgestelde pagina nabouwen

CSS HTML JavaScript

Wat ga je allemaal in dit opdracht leren?

  • Design challenges als front-end developer
  • HTML en CSS Standaarden
  • opbouw & structuur
  • Pixel perfectie

Uitleg van de opdracht

In deze opdracht willen we zien dat je het ontwerp uit het Figma bestand (opdracht 1 – Trees For All), pixel perfect na kan bouwen. Dit ga je doen in je favoriete code editor (of PHPStorm) en mag je bouwen zoals je zelf wilt. Hier is de bijlage die je nodig hebt voor deze opdracht.


Alle links en knoppen op de pagina hoeven nergens heen te gaan een # als url is prima. Werk als eerst alleen aan de visuele uitwerking en maak je geen zorgen om de functionaliteiten. Wel kun je gaan kijken naar het HTML <details> element en deze toepassen om de antwoorden in en uit te kunnen klappen.

Aantal details die je niet uit het ontwerp kan halen:

  • <h1> = 40px, #FFFFFF, FilsonPro, 700
  • Intro <p> in hero = 18px, #FFFFFF, Segoe UI, 500
  • Gradient voor hero afbeelding: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 0.4) 51%, rgba(0, 0, 0, 0.65) 100%)
  • Breadcrumbs = 14px, #3a4147
  • Menu items = 18px, #3a4147, FilsonPro, 600, hebben tussenruimtes van 20 pixels tussen elkaar