In je werk als developer krijg je soms te maken met vormgevers die een website hebben gemaakt in Photoshop. Aan jou de taak om van dit ontwerp HTML en CSS te maken zodat de pagina op alle apparaten goed weergegeven kan worden.

Functionele eisen beschrijven welke functionaliteit je eindproduct moet bevatten. Functionele eisen mogen nooit van technische aard zijn! Ieder persoon moet begrijpen welke functionaliteit de opdracht moet bevatten, ongeacht kennisniveau.

Deze opdracht moet aan de volgende functionele eisen voldoen:

• Je gebruikt voor deze opdracht alleen code die je zelf hebt geschreven (geen copy/paste);
• Als je de HTML pagina bekijkt in een browservenster van 1349 x 667 pixels ziet de pagina er 100% uit zoals het ontwerp (chrome heeft hier een handige extensie voor: window resizer); het is dus een exacte, 1-op-1, pixel-voor-pixel kopie van het ontwerp maar dan in HTML/CSS
• Alle gebruikte lettertypes kloppen met het ontwerp
• De posities van de verschillende onderdelen van de pagina kloppen met het ontwerp (Chrome heeft hier een handige plugin voor: Pixel Perfect waarmee je het ontwerp halftransparant "over je pagina heenlegt", je ziet dan precies of alles op de juiste plek staat)
• Je maakt zelf pagina's voor HOME, FEATURES, PAGES, PORTFOLIO, BLOG en CONTACT en je geeft deze pagina's een bijpassend ontwerp (wees creatief!)

Technische eisen beschrijven aan welke vakgerichte voorwaarden de opdracht moet voldoen. Bijvoorbeeld dat de opdracht in correct validerend HTML en CSS moet worden geschreven.

Deze opdracht moet aan de volgende technische eisen voldoen:

• Het document is geschreven in HTML5
• Elk van de menu-items wijst naar een andere html-pagina (die je zelf moet maken)
• Het gebruikte font voor de menu-items (zoals "home", "features") is: font-family: 'Roboto', sans-serif; en de kleur is color: rgba(255, 255, 255, 0.8);, zie instructies
• De gebruikte afbeelding bij elk menuitem is gemaakt met Font Awesome, zie instructies
• De HTML code die je hebt geschreven heb je gecontroleerd met de W3 html validator
• De CSS code die je hebt geschreven heb je gecontroleerd met de css validator
• Je hebt zelf een menu-item naar keuze toegevoegd (natuurlijk met een passend icon) en bijpassende pagina