Kaarten en een fotogalerij · Code met Martin

Bouw de twee populairste onderdelen van moderne websites: inhoudskaarten en een raster met foto's.

Ik laat je zien: een kaart

Een kaart is een witte rechthoek met schaduw die een afbeelding en tekst samen houdt. Je kent ze van YouTube, Netflix en webshops. Een kaart is gewoon een box met een paar eigenschappen:

<div class="card">
  <img src="images/photo.jpg" alt="Photo description">
  <h3>Card heading</h3>
  <p>Short text for the card.</p>
</div>

.card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Twee nieuwe dingen hier:

<div> is een lege box zonder eigen betekenis – gewoon een “pakket” om dingen die bij elkaar horen te bundelen.
box-shadow is een schaduw: de getallen betekenen verschuiving naar rechts, naar beneden, vervaging en kleur (hier zwart met 10% dekking). De schaduw maakt van een platte rechthoek een kaart.

Ik laat je zien: kaarten naast elkaar

Nu een truc die je al kent – flexbox. Wikkel de kaarten in een box en zet die op flex:

<div class="cards">
  <div class="card">…</div>
  <div class="card">…</div>
  <div class="card">…</div>
</div>

.cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cards .card {
  flex: 1;             /* cards fairly share the available space */
  min-width: 200px;    /* but none will ever be narrower than 200px */
}

flex-wrap: wrap + min-width = op een computer staan de kaarten naast elkaar, op een telefoon stapelen ze. Je hebt net een responsive website gebouwd – één die zich aanpast aan elk scherm.

Nu jij 💪

Voeg een sectie met kaarten toe aan je website – minstens drie naast elkaar. Wat erop staat hangt af van je project:

🏫 Schoolwebsite – oplossing (lerarenkaarten)

<h2>Our Teachers</h2>
<div class="cards">
  <div class="card">
    <h3>Ms. Turner</h3>
    <p>4th grade homeroom. Teaches English and art. Loves cats.</p>
  </div>
  <div class="card">
    <h3>Mr. Bennett</h3>
    <p>Math and P.E. Runs the floorball club.</p>
  </div>
  <div class="card">
    <h3>Principal Adams</h3>
    <p>Running the school for 10 years. Plays the piano.</p>
  </div>
</div>

🙋 Persoonlijke website – oplossing (hobbykaarten)

<h2>My Hobbies</h2>
<div class="cards">
  <div class="card">
    <img src="images/soccer.jpg" alt="Me during a match">
    <h3>Soccer</h3>
    <p>I play forward for the youth team. 12 goals this year!</p>
  </div>
  <div class="card">
    <img src="images/minecraft-build.jpg" alt="My castle in Minecraft">
    <h3>Minecraft</h3>
    <p>I build huge castles. This one took a month.</p>
  </div>
  <div class="card">
    <h3>Coding</h3>
    <p>I'm building this very website right now. And this is just the start.</p>
  </div>
</div>

🌍 Reisdagboek – oplossing (reiskaarten)

<h2>Our Trips</h2>
<div class="cards">
  <div class="card">
    <img src="images/mountains.jpg" alt="View from the summit">
    <h3>The Mountains</h3>
    <p>A three-day hike. Best part: wild berries and the lookout tower.</p>
  </div>
  <div class="card">
    <img src="images/sea.jpg" alt="A bay in Greece">
    <h3>Greece</h3>
    <p>A week at the beach. We saw dolphins!</p>
  </div>
  <div class="card">
    <img src="images/dc.jpg" alt="View from a monument in Washington, D.C.">
    <h3>Washington, D.C.</h3>
    <p>Museums, monuments, and way too much walking.</p>
  </div>
</div>

⚽ Clubwebsite – oplossing (spelerskaarten)

<h2>Roster</h2>
<div class="cards">
  <div class="card">
    <h3>Jake · goalkeeper 🧤</h3>
    <p>Team captain. 5 clean sheets this season.</p>
  </div>
  <div class="card">
    <h3>Owen · midfield ⚡</h3>
    <p>Fastest player on the team. 8 assists.</p>
  </div>
  <div class="card">
    <h3>Tom · forward 🎯</h3>
    <p>Top scorer. 14 goals this season.</p>
  </div>
</div>

Dezelfde CSS werkt voor elk project:

.cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cards .card {
  flex: 1;
  min-width: 200px;
}

.card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Bonus: een fotogalerij

Heb je veel foto’s? Een raster met foto’s is nog simpeler – gebruik aspect-ratio en object-fit om ze allemaal even groot te houden:

<div class="gallery">
  <img src="images/p1.jpg" alt="…">
  <img src="images/p2.jpg" alt="…">
  <img src="images/p3.jpg" alt="…">
  <img src="images/p4.jpg" alt="…">
</div>

.gallery {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gallery img {
  width: 180px;
  aspect-ratio: 1;      /* a square */
  object-fit: cover;    /* the photo fills the square and gets cropped, not squished */
}

✅

Controleer jezelf: Je website heeft kaarten met schaduwen naast elkaar. Maak je browservenster telefoonbreed – de kaarten stapelen zich. Dat heet responsive design, en dat heb je net gedaan.

Wat neem je mee uit deze les

<div> is een wikkelbox voor dingen die bij elkaar horen.
Een kaart = achtergrond + border-radius + padding + box-shadow.
Flexbox met flex-wrap en min-width = een layout die werkt op zowel computers als telefoons.