Je hebt je verdiept in de structuur van HTML5 door middel van de opdracht Taste 4 U. Nu staat er een kale website die wel wat aankleding kan gebruiken. Dit is deel twee van deze opdracht en hierin gaan we de website vormgeven met CSS.
De CSS die je tot nu toe al hebt verwerkt in je website kun je laten staan en aanvullen met de onderstaande opdracht. Voor deze opdracht gebruik je het lesmateriaal (video’s) van Gerhard. Deze zijn te vinden door de link onder benodigdheden te volgen.
Opdracht
- Teken op een papiertje hoe je wilt dat de website er uit komt te zien
- Maak de Taste 4 U website op met externe CSS
- Pas de diverse stijlregels toe op alle tags, id’s en classes.
Benodigdheden
- Voor alle Front-end codes gebruik je www.w3schools.com.
Specifiek over HTML5 www.w3schools.com/html/ - Video’s over het gebruik van CSS: Hoofdstuk 5, 7 en 9 op deze pagina
- [printfriendly]
Inleveren
Website
- Inleverdatum: 22 december
- Bestandstype: online website
- Locatie: in je 2e jaar container onder de naam “Taste 4U”
Beoordelingscriteria
De bedoeling is dat je hier onderstaande punten volgt. Wanneer je dit niet doet, bijvoorbeeld omdat je al een andere vormgevingskeuze hebt gemaakt, geef dan even in je CSS aan (met een comment) waarom je deze keuze hebt gemaakt.
- Er is een wrapper waarin alle elementen zitten (<header>,<nav>,<article>, <section>, etc.)
- De wrapper is gecentreerd in de browser
- De CSS is extern en goed gekoppeld aan alle pagina’s
- Er is een achtergrondplaatje in de body van de CSS geplaatst
- Alle HTML5-tags zijn gestyled en gepositioneerd (width, height, float, etc.)
- Alle (opmaak)tags zijn gestyled (lettertype, corps, regelafstand, uitlijning, etc.)
- De navigatie ziet er uit als knopjes met ronde hoeken en hebben geen onderlijn
- De hover ziet er anders uit dan de gewone navigatie en heeft geen onderlijn
- De active link ziet er anders uit dan de gewone navigatie en heeft geen onderlijn
- De link naar Smulweb ziet er anders uit dan de navigatie links
- Er is minimaal gebruik gemaakt van 1 Google-font
- Er zijn minimaal 2 classes toegepast waarin een uitzondering op de standaardopmaak is gemaakt
- foutloze HTML-validatie
- foutloze CSS-validatie
- de verbeterde versie staat op ma-cloud in jouw 2e jaar container.