🏁 Mini-project: landingpagina
Les 12 van 12 · ~45 min · CSS-track · Eindproject
Stap 1 van 6
Je kent nu alle CSS-tools. Tijd om ze samen te brengen. In dit project bouw je stap voor stap een volledige responsieve landingpagina — met navigatiebalk, hero, features-grid, kaartenrij en footer. Na elke stap zie je het resultaat live.
Wat ga je bouwen?
① Variabelen & reset
② Navigatiebalk
③ Hero-sectie
④ Features-grid
⑤ Kaartenrij
⑥ Footer + afronding
De HTML — je schrijft alleen CSS
Alle stappen gebruiken dezelfde HTML hieronder. Je CSS-editor bouwt de stijl er stap voor stap op.
<!-- nav -->
<nav class="nav">
<a href="#" class="nav__logo">⚡ LearnCSS</a>
<ul class="nav__links">
<li><a href="#features">Features</a></li>
<li><a href="#tracks">Tracks</a></li>
<li><a href="#" class="nav__cta">Begin gratis</a></li>
</ul>
</nav>
<!-- hero -->
<section class="hero">
<div class="hero__inner">
<span class="hero__badge">Gratis · MBO niveau 4</span>
<h1 class="hero__titel">Leer CSS van scratch</h1>
<p class="hero__tekst">12 interactieve lessen. Geen voorkennis nodig. Begin vandaag.</p>
<div class="hero__knoppen">
<a href="#" class="knop knop--primair">Begin nu →</a>
<a href="#features" class="knop knop--ghost">Meer info</a>
</div>
</div>
</section>
<!-- features -->
<section class="features" id="features">
<div class="sectie-inner">
<h2 class="sectie-titel">Waarom LearnCSS?</h2>
<div class="features__grid">
<div class="feature"><span class="feature__icon">🎯</span><h3>Praktisch</h3><p>Elke les bevat live oefeningen.</p></div>
<div class="feature"><span class="feature__icon">📱</span><h3>Responsive</h3><p>Werkt op elk apparaat.</p></div>
<div class="feature"><span class="feature__icon">🆓</span><h3>Gratis</h3><p>Geen account nodig.</p></div>
<div class="feature"><span class="feature__icon">⚡</span><h3>Snel</h3><p>Van nul naar pro in één week.</p></div>
</div>
</div>
</section>
<!-- tracks -->
<section class="tracks" id="tracks">
<div class="sectie-inner">
<h2 class="sectie-titel">Beschikbare tracks</h2>
<div class="tracks__grid">
<div class="track-kaart"><div class="track-kaart__header track-kaart__header--html">🌐</div><h3>HTML</h3><p>De basis van het web.</p></div>
<div class="track-kaart track-kaart--featured"><div class="track-kaart__header track-kaart__header--css">🎨</div><h3>CSS</h3><p>Stijl en lay-out.</p><span class="track-kaart__badge">Jij bent hier</span></div>
<div class="track-kaart"><div class="track-kaart__header track-kaart__header--js">🟡</div><h3>JavaScript</h3><p>Interactiviteit.</p></div>
</div>
</div>
</section>
<!-- footer -->
<footer class="footer">
<div class="sectie-inner footer__inner">
<span class="footer__logo">⚡ LearnCSS</span>
<p class="footer__tekst">Gratis CSS-lessen voor MBO-studenten.</p>
<p class="footer__copy">© 2026 LearnCSS</p>
</div>
</footer>Stap 1 – Variabelen & reset
Begin met de fundering: custom properties en een CSS-reset. Voeg toe:
:root {
--kleur-primair: #2dd4bf;
--kleur-primair-donker: #0d9488;
--kleur-bg: #0f172a;
--kleur-surface: #1e293b;
--kleur-tekst: #e2e8f0;
--kleur-muted: #94a3b8;
--kleur-rand: #334155;
--radius-md: 12px;
--radius-lg: 20px;
--schaduw: 0 4px 24px rgba(0,0,0,0.3);
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: system-ui, sans-serif;
background: var(--kleur-bg);
color: var(--kleur-tekst);
line-height: 1.6;
}
a { text-decoration: none; }
img { max-width: 100%; display: block; }
.sectie-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
.sectie-titel {
text-align: center;
font-size: clamp(1.5rem, 3vw, 2rem);
margin: 0 0 40px;
color: var(--kleur-tekst);
}
Jouw CSS (bouw voort in elke stap)
Live voorbeeld
Stap 2 – Navigatiebalk
Voeg toe aan je CSS (bewaar alles wat je al had):
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
height: 64px;
background: rgba(15,23,42,0.9);
backdrop-filter: blur(12px);
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid var(--kleur-rand);
}
.nav__logo {
color: var(--kleur-primair);
font-weight: 800;
font-size: 1.1rem;
}
.nav__links {
display: flex;
align-items: center;
gap: 24px;
list-style: none;
margin: 0;
padding: 0;
}
.nav__links a {
color: var(--kleur-muted);
font-size: 0.875rem;
transition: color 0.2s;
}
.nav__links a:hover { color: var(--kleur-tekst); }
.nav__cta {
background: var(--kleur-primair) !important;
color: #0f172a !important;
padding: 8px 18px;
border-radius: var(--radius-md);
font-weight: 700;
font-size: 0.875rem;
transition: background 0.2s !important;
}
.nav__cta:hover { background: var(--kleur-primair-donker) !important; }
Jouw CSS (voeg toe aan wat je al had)
Live voorbeeld (scrolt mee met stap 1)
Voeg de nav-CSS toe aan je editor in stap 1 (of in de gezamenlijke editor hieronder) en controleer.
Stap 3 – Hero-sectie
Voeg toe:
.hero {
background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f4c75 100%);
padding: 96px 24px;
text-align: center;
}
.hero__inner { max-width: 700px; margin: 0 auto; }
.hero__badge {
display: inline-block;
background: rgba(45,212,191,0.15);
color: var(--kleur-primair);
border: 1px solid rgba(45,212,191,0.3);
padding: 6px 16px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
margin-bottom: 20px;
letter-spacing: 0.05em;
}
.hero__titel {
font-size: clamp(2rem, 6vw, 3.5rem);
font-weight: 800;
color: #fff;
margin: 0 0 16px;
line-height: 1.1;
}
.hero__tekst {
color: var(--kleur-muted);
font-size: 1.125rem;
margin: 0 0 32px;
}
.hero__knoppen {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.knop {
display: inline-block;
padding: 14px 32px;
border-radius: var(--radius-md);
font-weight: 700;
font-size: 1rem;
transition: all 0.25s ease;
cursor: pointer;
}
.knop--primair {
background: var(--kleur-primair);
color: #0f172a;
}
.knop--primair:hover {
background: var(--kleur-primair-donker);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(45,212,191,0.35);
}
.knop--ghost {
border: 2px solid var(--kleur-rand);
color: var(--kleur-tekst);
}
.knop--ghost:hover {
border-color: var(--kleur-primair);
color: var(--kleur-primair);
}Stap 4 – Features-grid
Voeg toe:
.features {
padding: 80px 0;
background: var(--kleur-bg);
}
.features__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
}
.feature {
background: var(--kleur-surface);
border: 1px solid var(--kleur-rand);
border-radius: var(--radius-lg);
padding: 28px 24px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature:hover {
transform: translateY(-4px);
box-shadow: var(--schaduw);
}
.feature__icon {
font-size: 2rem;
display: block;
margin-bottom: 12px;
}
.feature h3 {
margin: 0 0 8px;
color: var(--kleur-tekst);
font-size: 1rem;
}
.feature p {
margin: 0;
color: var(--kleur-muted);
font-size: 0.875rem;
line-height: 1.6;
}Stap 5 – Tracks & footer
Voeg toe:
.tracks {
padding: 80px 0;
background: var(--kleur-surface);
}
.tracks__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
.track-kaart {
background: var(--kleur-bg);
border: 1px solid var(--kleur-rand);
border-radius: var(--radius-lg);
padding: 24px;
position: relative;
transition: transform 0.25s ease;
}
.track-kaart:hover { transform: translateY(-4px); }
.track-kaart--featured {
border-color: var(--kleur-primair);
box-shadow: 0 0 0 1px var(--kleur-primair), 0 8px 32px rgba(45,212,191,0.2);
}
.track-kaart__header {
height: 80px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-bottom: 16px;
}
.track-kaart__header--html { background: linear-gradient(135deg,#f97316,#ef4444); }
.track-kaart__header--css { background: linear-gradient(135deg,#2dd4bf,#3b82f6); }
.track-kaart__header--js { background: linear-gradient(135deg,#f59e0b,#f97316); }
.track-kaart h3 { margin: 0 0 8px; color: var(--kleur-tekst); }
.track-kaart p { margin: 0; color: var(--kleur-muted); font-size: 0.875rem; }
.track-kaart__badge {
position: absolute;
top: 16px;
right: 16px;
background: var(--kleur-primair);
color: #0f172a;
font-size: 0.65rem;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
}
.footer {
padding: 48px 0;
background: var(--kleur-bg);
border-top: 1px solid var(--kleur-rand);
}
.footer__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.footer__logo {
color: var(--kleur-primair);
font-weight: 800;
font-size: 1rem;
}
.footer__tekst { color: var(--kleur-muted); font-size: 0.875rem; margin: 0; }
.footer__copy { color: var(--kleur-rand); font-size: 0.75rem; margin: 0; }Stap 6 – Alles samen
Plak hieronder al je CSS van de vorige stappen samen en zie de volledige landingpagina live:
Volledige project-CSS
Live voorbeeld — de volledige landingpagina
Afsluiting – 4 vragen over de track
🎉
CSS-track voltooid!
Je kent nu alle fundamenten van CSS — van selectors en het box model, via Flexbox en Grid, tot responsive design, animaties en custom properties. Je hebt een volledige landingpagina gebouwd vanaf nul.
Wat nu?