SQLExcelHTML & CSSBlind typenKies een cursus
Lurndo › HTML & CSS › HTML en CSS voor beginners

Nog nooit een regel code geschreven? Perfect.

Lurndo gaat ervan uit dat je nog niets weet. De eerste les begint bij de vraag wat een tag is, en elk nieuw begrip komt pas als het vorige zit.

Je hoeft niets te installeren. Je typt echte HTML en CSS in je browser, en de pagina ernaast verandert terwijl je typt.

Begin gratis met de eerste lesGeen account nodig · een les duurt een paar minuten

Waarom Lurndo bij jou past

  • Eén ding tegelijk

    Elke les leert je één nieuw begrip. Eerst een korte uitleg met een pagina waarin de elementen oplichten, dan oefeningen die stilaan moeilijker worden.

  • Je ziet wat je code doet

    Naast je code staat de pagina zelf. Typ je een regel CSS, dan zie je meteen welk element verandert.

  • Uitleg bij elke fout

    Een vergeten ;, een tag die niet sluit of een class met een hoofdletter? De controle zegt waar het misloopt, in gewone taal.

  • Fouten maken mag

    Hints worden stap voor stap concreter, en na een paar pogingen mag je de oplossing bekijken. Een les stopt nooit omdat je een fout maakte.

Je eerste regel CSS

De prijzen van de ijssalon mogen opvallen. Maak alles met de class prijs vet.

1/* Jouw CSS komt hier. */
1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>IJssalon De Koude Kant</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <img src="hoorntje.svg" alt="Een hoorntje met roze ijs" width="48" height="48">11      <h1 class="logo">De Koude Kant</h1>12      <p class="slogan">IJssalon op de zeedijk van Oostende</p>13    </header>14    <main>15      <h2>Onze smaken</h2>16      <ul class="smaken">17        <li>Vanille</li>18        <li>Pistache</li>19        <li>Aardbei</li>20      </ul>21      <p>Eén bol kost <span class="prijs">€ 2,50</span>, twee bollen <span class="prijs">€ 4,50</span>.</p>22    </main>23  </body>24</html>
1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fff8f0;5  color: #3b2a1a;6}7header {8  padding: 24px 16px;9  background: #ffd6e0;10}11.logo {12  display: inline-block;13  margin: 8px 0 0;14  padding: 6px 18px;15  border-radius: 999px;16  background: #ffffff;17  font-size: 28px;18}19.slogan {20  margin: 8px 0 0;21}22main {23  padding: 8px 16px 24px;24}
ijssalon.example

Zo begin je

De eerste drie modules leggen de basis, en ze zijn gratis. Daarna bouw je met flexbox, grid en media queries een site die op elke gsm past.

  1. 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.
  2. 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.
  3. 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.

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

LurnieJe coach voor HTML & CSS

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 vandaag · Lurnie kan zich vergissen.

Een voorbeeld van een gesprek met Lurnie

Veelgestelde vragen

Heb ik voorkennis nodig?

Nee. Je moet een beetje kunnen typen, meer niet. Alles wordt uitgelegd vanaf nul.

Moet ik iets installeren?

Nee. Je schrijft je code in de browser, en de pagina rendert ernaast. Ook op een tablet of gsm.

Is het gratis?

De eerste drie modules zijn gratis, zonder account. Daarmee leer je HTML, je eerste CSS en hoe je een pagina opbouwt met betekenis.

Leer ik ook JavaScript?

Nee, deze cursus gaat over HTML en CSS. Daarmee bouw je al een volledige site die er goed uitziet en op elk scherm past.

Klaar om te beginnen?

Je eerste regel code typ je binnen een minuut. Geen account, geen installatie.

Begin gratis met de eerste les

SQL

  • Onderwerpen
  • Alle lessen
  • Spiekbriefje

Excel

  • Onderwerpen
  • Alle lessen
  • Sneltoetsen

HTML & CSS

  • Onderwerpen
  • Alle lessen
  • Spiekbriefje

Blind typen

  • Over de cursus
  • Alle lessen

Lurndo

  • Dashboard
  • Ranglijst
  • Premium
  • Account
  • Contact en support
  • Privacy
English