Content en navigatie. Als eerste zorgen we ervoor dat deze blokken naast elkaar komen in plaats van onder elkaar.
Slide 10 - Tekstslide
Stap 3.2
We geven het nav en article element een width. vw staat voor ViewWidth wat breedte van het scherm betekent. 20vw is dus 20% van de breedte van het scherm.
Slide 11 - Tekstslide
Stap 4
Footer positioneren door deze fixed te positioneren. De footer mag ook wat meer hoogte gebruiken. En wat doet position:fixed eigenlijk?
Slide 12 - Tekstslide
5 minuten regel
Loop je vast? Probeer het zelf in 5 minuten op te lossen. Lukt dat niet, vraag dan om hulp.
Geen hulp in de buurt, ga dan verder met iets anders.
Slide 13 - Tekstslide
Opdracht
Verdeel je ontwerp in minimaal 3 blokken en gebruik je tekst om zoveel mogelijk content te vullen. Gebruik de elementen uit de voorgaande voorbeelden en
..gebruik <h1>, <h2> voor titels
..gebruik <p> voor paragrafen (tekst)
..gebruik <nav> voor navigatie
..gebruik <ul> en <li> voor lijsten
timer
5:00
Slide 14 - Tekstslide
Aan de slag
Html vullen met content:
article: het verhaal: tekst, plaatjes, filmpjes etc..