CSS leer je pas echt door het te doen
Een uitleg lezen is een begin, maar waarom een regel niet werkt, leer je pas als je hem zelf schrijft. Daarom draait alles in Lurndo om oefenen.
Je krijgt meer dan 350 oefeningen in acht modules. Je typt elke regel in een editor met de pagina ernaast, en een tweede, verborgen versie van de pagina controleert of je code echt werkt.
Waarom Lurndo bij jou past
Geen trucjes met vaste maten
Zet je een element met een vaste
marginop zijn plaats, dan merkt de controle dat. Je code moet ook kloppen op een pagina met langere titels of een item meer.Elke schrijfwijze telt
De controle kijkt naar wat de browser tekent, niet naar je tekst.
red,#f00enrgb(255 0 0)zijn allemaal goed.Zie waarom een regel verliest
Een inspector onder de pagina toont de boom, het boxmodel en de cascade, met de regels die verliezen doorgestreept en de reden erbij.
Elke dag een uitdaging
De uitdaging van de dag kiest een oefening uit wat je al geleerd hebt. Zo blijft het zitten.
Een oefening om mee te beginnen
Kleur alleen de smaken in de lijst hotpink. De rest van de pagina blijft zoals ze is.
/* Jouw CSS komt hier. */<!DOCTYPE html><html lang="nl"> <head> <title>IJssalon De Koude Kant</title> <link rel="stylesheet" href="basis.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <img src="hoorntje.svg" alt="Een hoorntje met roze ijs" width="48" height="48"> <h1 class="logo">De Koude Kant</h1> <p class="slogan">IJssalon op de zeedijk van Oostende</p> </header> <main> <h2>Onze smaken</h2> <ul class="smaken"> <li>Vanille</li> <li>Pistache</li> <li>Aardbei</li> </ul> <p>Eén bol kost <span class="prijs">€ 2,50</span>, twee bollen <span class="prijs">€ 4,50</span>.</p> </main> </body></html>body { margin: 0; font-family: system-ui, sans-serif; background: #fff8f0; color: #3b2a1a;}header { padding: 24px 16px; background: #ffd6e0;}.logo { display: inline-block; margin: 8px 0 0; padding: 6px 18px; border-radius: 999px; background: #ffffff; font-size: 28px;}.slogan { margin: 8px 0 0;}main { padding: 8px 16px 24px;}Waar begin je?
Elke module is een nieuwe klant met een eigen site. Begin bij de eerste stijlregels, of kies het onderwerp dat je wil oefenen.
- 2Eerste stijlJe tweede klant: kapsalon Knip & Krul in Genk. Je leert wat CSS is, hoe je een stijlblad koppelt, en je geeft de site kleuren, mooie tekst, achtergronden en de juiste maten.
- 4Selectors en de cascadeJe vierde klant: toneelkring Doek Open in Geel. Je combineert selectors, kiest elementen op hun attributen, hun plaats en hun toestand, en leert waarom een regel wint of verliest: overerving, de cascade en specificiteit.
- 5Het boxmodelJe vijfde klant: klimzaal De Steile Wand in Ieper. Je leert dat elk element een vak is, met inhoud, padding, een rand en een marge. Je houdt vakken binnen hun breedte, zet ze in het midden, ontdekt waarom marges samenvallen en kiest hoe een element zich gedraagt met `display`.
Vastgelopen? Vraag het Lurnie
Lurnie is je AI-coach in elke les. Stel je vraag tijdens of na een oefening en krijg meteen uitleg op jouw niveau.
- Tijdens of na elke oefeningLurnie weet welke les en oefening je doet. Vraag waarom iets werkt, wat een fout betekent of hoe het ook anders kan.
- Eigen voorbeelden, nooit de oplossingLurnie legt uit met een voorbeeld op andere data en helpt je verder met een denkvraag. Zo vind je de oplossing zelf, en dat onthoud je.
- Je gesprekken blijven bewaardLees later terug wat Lurnie uitlegde. Je gesprekken staan per cursus bij je account.
Lurnie hoort bij premium, met 30 vragen per dag.Bekijk premium
Waarom wordt mijn link niet rood? Mijn regel staat er toch?
Waarschijnlijk wint een andere regel. Kiezen twee regels hetzelfde element, dan wint de specifiekste: nav a gaat voor op a, ook als a lager in je bestand staat. Pas bij een gelijke stand wint de laatste.
Zoek dus een selector die je link preciezer aanwijst dan de jouwe. Welke vind je?
Nog 29 van 30 vragen vandaagLurnie kan zich vergissen.
Veelgestelde vragen
Voor wie zijn deze oefeningen?
Voor wie net begint en voor wie al wat CSS kent en het wil laten zitten. Elke module begint met uitleg, dus je kan instappen waar je wil.
Welke CSS leer ik?
De CSS die alle grote browsers kennen, van kleuren en tekst tot selectors, de cascade, het boxmodel, flexbox, grid, media queries, custom properties en transitions.
Is het gratis?
De eerste drie modules zijn gratis, zonder account. Elke dag is er ook een uitdaging uit wat je al geleerd hebt.
Kan ik op mijn gsm oefenen?
Ja. Op een gsm wissel je tussen de code en de pagina, met hulptoetsen voor {, }, : en ;.
Klaar om te oefenen?
Je eerste oefening staat klaar. Geen account, geen installatie.
Begin gratis met de eerste les