Build your own website, and know how it works
A site builder with templates is quick, until you want something the template can't do. If you understand HTML and CSS, you can change any site, and you know what's going on when something sits askew.
In Lurndo you build eight sites for eight made-up clients: an ice cream parlour, a hair salon, an animal shelter, a climbing centre and more. Each module adds something, until you build a whole page that fits every screen.
Why Lurndo suits you
From text to layout
You start with headings, paragraphs, links and images, and finish with flexbox, grid, media queries and forms.
Real code, not blocks
You type real HTML and CSS, as in any editor. What you learn works on your own site straight away.
On every screen
Every exercise is checked on a phone and on a big screen. That way you learn to build a site that never falls apart.
Tidy and accessible
You also learn what search engines and screen readers need, like an
alton every image and a label on every field.
Put something on the page
Under the list of flavours, add a paragraph with the text Open every day from 11 am to 10 pm.
<!DOCTYPE html><html lang="en"> <head> <title>Cold Comfort ice cream parlour</title> <link rel="stylesheet" href="basis.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <img src="hoorntje.svg" alt="A cone with pink ice cream" width="48" height="48"> <h1 class="logo">Cold Comfort</h1> <p class="slogan">Ice cream on the Brighton seafront</p> </header> <main> <h2>Our flavours</h2> <ul class="flavours"> <li>Vanilla</li> <li>Pistachio</li> <li>Strawberry</li> </ul> <p>One scoop costs <span class="price">£2.50</span>, two scoops <span class="price">£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;}How you build your site
Start with the first page and add something module by module. The last module gets your site ready for every phone.
- 1First pageYour first client with a website: Cold Comfort, an ice cream parlour in Brighton. You learn what HTML is, write headings and paragraphs, nest elements, add emphasis, make links and put images on the page.
- 2First styleYour second client: the Snip & Curl hair salon in Leeds. You learn what CSS is, how to link a stylesheet, and you give the site colours, good-looking text, backgrounds and the right sizes.
- 3Structure and meaningYour third client: The Cosy Basket, an animal shelter in Rochdale. You make lists and tables, divide the page into blocks that say what they are, learn when a div fits, write valid HTML and build a menu for a site with several pages.
- 8Positioning and responsiveYour eighth client: Broken? Not Today!, a repair café in Dorchester. You hang tags where they belong, make the header stick to the top, build the site mobile first with media queries and images that scale, make an accessible sign-up form and give everything its own colour and a soft transition.
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
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.
Frequently asked questions
Do I need to learn anything else after this?
With HTML and CSS you build a whole site that looks good and fits every phone. JavaScript, for buttons that do something, is another course.
How do I put my site online?
This course doesn't teach that. Your site is made of plain files, which you can put on any web host or a free service.
Is it free?
The first three modules are free, without an account. With them you already build a page with text, links, images, lists and colour.
Does it work on my phone?
Yes. On a phone you switch between the code and the page, with a row of helper keys for the characters you need most.
Start your first page
Your first heading is on the screen within a minute. No account, nothing to install.
Start free with the first lesson