Bouw je eigen website, en weet hoe ze werkt
Een sitebouwer met sjablonen is snel, tot je iets wil wat het sjabloon niet kan. Wie HTML en CSS begrijpt, past elke site aan, en weet wat er gebeurt als iets scheef staat.
In Lurndo bouw je acht sites voor acht verzonnen klanten: een ijssalon, een kapsalon, een dierenasiel, een klimzaal en meer. Elke module voegt iets toe, tot je een volledige pagina bouwt die op elk scherm past.
Waarom Lurndo bij jou past
Van tekst tot layout
Je begint met koppen, alinea's, links en afbeeldingen, en eindigt met flexbox, grid, media queries en formulieren.
Echte code, geen blokjes
Je typt echte HTML en CSS, zoals in elke editor. Wat je leert, werkt meteen op je eigen site.
Op elk scherm
Elke oefening wordt gecontroleerd op een gsm en op een groot scherm. Zo leer je een site die nergens uit zijn voegen barst.
Netjes en toegankelijk
Je leert ook wat zoekmachines en schermlezers nodig hebben, zoals een
altbij elke afbeelding en een label bij elk veld.
Zet iets op de pagina
Zet onder de lijst met smaken een alinea met de tekst Elke dag open van 11 tot 22 uur.
<!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;}Zo bouw je je site
Begin bij de eerste pagina en voeg module per module iets toe. De laatste module maakt je site klaar voor elke gsm.
- 1Eerste paginaJe eerste klant met een website: ijssalon De Koude Kant in Oostende. Je leert wat HTML is, schrijft koppen en alinea's, nest elementen, legt nadruk, maakt links en zet afbeeldingen op de pagina.
- 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.
- 3Structuur en betekenisJe derde klant: dierenasiel Het Warme Mandje in Roeselare. Je maakt lijsten en tabellen, verdeelt de pagina in blokken die zeggen wat ze zijn, leert wanneer een div past, schrijft geldige HTML en bouwt een menu voor een site met meerdere pagina's.
- 8Positioneren en responsiefJe achtste klant: repaircafé Kapot? Mag Niet! in Dendermonde. Je hangt etiketten waar ze horen, laat de kop bovenaan plakken, maakt de site mobiel eerst met media queries en afbeeldingen die meeschalen, bouwt een toegankelijk aanmeldformulier en geeft alles een eigen kleur en een zachte overgang.
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
Moet ik daarna nog iets anders leren?
Met HTML en CSS bouw je een volledige site die er goed uitziet en op elke gsm past. JavaScript, voor knoppen die iets doen, is een andere cursus.
Hoe zet ik mijn site online?
Dat leert deze cursus niet. Je site bestaat uit gewone bestanden, die je bij elke webhost of een gratis dienst kan zetten.
Is het gratis?
De eerste drie modules zijn gratis, zonder account. Daarmee bouw je al een pagina met tekst, links, afbeeldingen, lijsten en kleur.
Werkt het op mijn gsm?
Ja. Op een gsm wissel je tussen de code en de pagina, met een rij hulptoetsen voor de tekens die je vaak nodig hebt.
Begin aan je eerste pagina
Je eerste kop staat binnen een minuut op het scherm. Geen account, geen installatie.
Begin gratis met de eerste les