maak een map aan genaamd workshop_1 en maak hierin nieuwe bestanden aan: index.html en css/style.css

maak in index.html de boilerplate:

Voeg binnen de container-div de div’s toe:

Geef je style.css de content:

bekijk je pagina, die moet enkel een zwarte lijn tonen

De lijn zit niet tegen de rand van je browser aan, dat komt doordat je body standaard van je browser een margin meekrijgt van 8px:

Om dit te verhelpen moet je margin resetten, voeg hiervoor aan je css toe:

De container wil ik graag in het midden uitlijnen, dat verkrijg je door de margin te resetten en de browser het div’je automatisch uit te lijnen:

de container mag wel iets van de bovenkant af staan, dus voeg aan je css toe:

geef nu de left, content en richt <div>’s de styling info:

hier treed hetzelfde probleem op als met het schaakbord uit periode 2: de tussenruimte tussen de <div>’s Om dit te verhelpen kun je de spaties weghalen:

Je pagina ziet er weer mooi uit in je browser:

echter is dan je code niet meer leesbaar… zet je HTML weer goed:

Je browser past nu weer die irritante tussen-ruimtes toe…. Om dit te fixen neem je in je css op:

Je blokken staan nu weer naast elkaar maar onderaan uitgelijnd Om dit te fixen neem je in je styling op:

Je blokken staan nu weer naast elkaar. voeg in je content-div een plaatje toe:

<img src="<https://jos.gluwebsite.nl/lessen/web/afbeelding.jpg>" alt="Afbeelding">">

Het plaatje is veel te groot, dus middels de CSS maak je hem kleiner:

om het plaatje nu naar beneden te krijgen gaan we margin gebruiken:

om het plaatje naar rechts te krijgen, moeten we aan de linkerkant ruimte geven: