You only really learn CSS by doing it

Reading an explanation is a start, but you only learn why a rule doesn't work when you write it yourself. That's why everything in Lurndo is about practice.

You get over 350 exercises in eight modules. You type every rule in an editor with the page next to it, and a second, hidden version of the page checks that your code really works.

Start free with the first lessonNo account needed · a lesson takes a few minutes

Why Lurndo suits you

No tricks with fixed sizes
Push an element into place with a fixed margin and the check notices. Your code has to work on a page with longer headings or an extra item too.
Every way of writing counts
The check looks at what the browser draws, not at your text. red, #f00 and rgb(255 0 0) are all fine.
See why a rule loses
An inspector under the page shows the tree, the box model and the cascade, with the losing rules struck through and the reason next to them.
A challenge every day
The daily challenge picks an exercise from what you've already learnt. That way it sticks.

An exercise to start with

Colour only the flavours in the list hotpink. The rest of the page stays as it is.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Cold Comfort ice cream parlour</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="A cone with pink ice cream" width="48" height="48">11      <h1 class="logo">Cold Comfort</h1>12      <p class="slogan">Ice cream on the Brighton seafront</p>13    </header>14    <main>15      <h2>Our flavours</h2>16      <ul class="flavours">17        <li>Vanilla</li>18        <li>Pistachio</li>19        <li>Strawberry</li>20      </ul>21      <p>One scoop costs <span class="price">£2.50</span>, two scoops <span class="price">£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

Where do you start?

Each module is a new client with a site of their own. Start with the first style rules, or pick the topic you want to practise.

Stuck? Ask Lurnie

Lurnie is your AI coach in every lesson. Ask your question during or after an exercise and get an explanation at your level, straight away.

During or after any exerciseLurnie knows which lesson and exercise you're on. Ask why something works, what a mistake means or how else you could do it.
Fresh examples, never the solutionLurnie explains with an example on different data and helps you on with a question to think about. That way you find the solution yourself, and it sticks.
Your conversations are keptRead back later what Lurnie explained. Your conversations stay with your account, course by course.

Lurnie comes with premium, with 30 questions a day.See premium

LurnieYour HTML & CSS coach

Why won't my link turn red? My rule is right there.

Most likely another rule wins. When two rules pick the same element, the more specific one wins: nav a beats a, even if a comes later in your file. Only when they're equal does the last one win.

So look for a selector that points at your link more precisely than yours. Which one do you find?

29 of 30 questions left todayLurnie can make mistakes.

An example of a conversation with Lurnie

Frequently asked questions

Who are these exercises for?

For people just starting out and for people who know some CSS and want it to stick. Every module starts with an explanation, so you can jump in wherever you like.

Which CSS will I learn?

The CSS every major browser knows, from colours and text to selectors, the cascade, the box model, flexbox, grid, media queries, custom properties and transitions.

Is it free?

The first three modules are free, without an account. There's also a daily challenge from what you've already learnt.

Can I practise on my phone?

Yes. On a phone you switch between the code and the page, with helper keys for {, }, : and ;.

Ready to practise?

Your first exercise is waiting. No account, nothing to install.

Start free with the first lesson

You only really learn CSS by doing it

Reading an explanation is a start, but you only learn why a rule doesn't work when you write it yourself. That's why everything in Lurndo is about practice.

You get over 350 exercises in eight modules. You type every rule in an editor with the page next to it, and a second, hidden version of the page checks that your code really works.

Start free with the first lessonNo account needed · a lesson takes a few minutes

Why Lurndo suits you

No tricks with fixed sizes

Push an element into place with a fixed margin and the check notices. Your code has to work on a page with longer headings or an extra item too.

Every way of writing counts

The check looks at what the browser draws, not at your text. red, #f00 and rgb(255 0 0) are all fine.

See why a rule loses

An inspector under the page shows the tree, the box model and the cascade, with the losing rules struck through and the reason next to them.

A challenge every day

The daily challenge picks an exercise from what you've already learnt. That way it sticks.