Opdracht 5

In deze opdracht gaan we de sidebar en het main content gedeelte (het witte vlak uit het voorbeeld) maken. Dit is een uitdaging omdat er sprake is van 2 kolommen. Als het scherm kleiner wordt willen we die blokken natuurlijk onder elkaar tonen.

Het belangrijkste is dat je eerst een goede structuur maakt door eerst het hele blok te maken (de rij) en daarin een blok op te nemen voor de sidebar en een blok op te nemen voor de main content. Hieronder zie je daarvan een voorbeeld.

<div class="row">
  <div class="side"></div>
  <div class="main"></div>
</div>

Standaard zijn dit blokken en komen de side en de main dus onder elkaar. We kunnen dit aanpassen door gebruik te maken van flexboxen. Deze zijn zoals de naam al vermoedt flexibeler.

  1. Zet in de class row de display flex (display: flex), dit zorgt ervoor dat de blokken in deze div zich gaan gedragen als flexbox.
  2. Geef de class side en de class main een flexibele breedte (flex: 30% bijvoorbeeld) (samen moet het 100% zijn!)

Als het goed is staan de blokken nu naast elkaar en worden kleiner als je de browser verkleint. Maar we willen dat als het scherm te klein wordt dat ze onder elkaar gaan staan. Hoe doe je dat?

Je kan css code opnemen die alleen wordt uitgevoerd als het scherm kleiner of gelijk is aan 700 pixels. Hieronder zie je hoe dat moet:

@media screen and (max-width: 700px) {
    /* hier kan je css toevoegen */
}
  1. Voeg deze zogenaamde media query toe aan jouw css bestand (altijd als laatste!)
  2. Zet in de class row de flex richting naar kolom (flex-direction: column)

Je zult nu zien dat als het scherm kleiner wordt er een moment is dat de blokken netjes onder elkaar gaan staan.

  1. Voeg nu de inhoud toe volgens het voorbeeld.

Opdracht 4 Opdracht 6