Learn to code
by changing code.

Hands-on lessons in HTML, CSS and JavaScript, woven together one thread at a time. Every example runs right in your browser. No installs, no credit card.

Start learning free Open the code editor

No account needed
Works on any laptop or phone
Made for total beginners

HTML · Lesson 2 of 10 · ElementsRun

</>

Your turn. Write a heading with your name, add a button, then give them some style.

index.html

1<h1>Hi, I'm Maya</h1>
2<p>I'm learning to code.</p>
3<button>Say hello</button>
4
5<style>
6 h1 { color: teal; }
7 button { border-radius: 99px; }
8</style>

Result

Your page appears here.

Hi, I'm Maya

I'm learning to code.

Say hello

Code ran 0.02s
Exercise checked 3 of 3 correct
Lesson complete Progress saved

Scroll & explore

30Lessons
64Live examples
85Exercises
92Quiz questions
$0Cost, forever

How LogicLoom works

Most tutorials make you read about code. At LogicLoom, every lesson is a working page you can change, run and break, right in your browser.

Read.

Short lessons in plain English. One idea at a time, with no jargon left unexplained.

A tag tells the browser what something is:<h1> is the main heading.

Run.

Every example is a live editor. Change anything, press Run, and see the result instantly.

<h1>Hi, Sam</h1>▶ Run

Practice.

Fill-in-the-blank exercises and quick quizzes check your answer the moment you try.

fruits.push("kiwi");✓ Correct

Three threads, woven into one page.

HTML, CSS and JavaScript each add a layer to the same thing. Follow this button from plain HTML to something you can actually click.

1
index.html
```
<button>Add to cart</button>
```
HTMLStructure
The structure of every web page: headings, paragraphs, links and images.
10 lessons, not started
Start HTML
2
style.css
```
button { background: teal; }
```
CSSStyle
Colors, spacing and layout. Make your HTML look the way you want.
10 lessons, not started
Start CSS
3
script.jsCart: 0
Honeycrisp apple$2.99 a pound
```
button.addEventListener("click", add);
```
JavaScriptBehavior
Make pages respond: store values, make decisions, react to clicks.
Try the button above. That's what you'll build.
10 lessons, not started
Start JavaScript

Try it right now

This is a real editor.
Go ahead, change it.

No sign-up, no downloads. The same editor is built into every lesson.

Edit the code. Click anywhere in it and type.
Press Run (or Ctrl+Enter). Made a mess? Press Reset.
See the result right below, instantly.

Your first challenge: change world to your name and make the headingorange.

index.html

Open in editor

<h1>Hello, world!</h1>
<p>Change "world" to your name, then press Run.</p>
<button onclick="this.textContent = 'You clicked me!'">
  Click me
</button>

<style>
  h1 { color: teal; font-family: sans-serif; }
</style>

Result

Built around you

Learn at your pace, on any device.

Your progress follows you.

Lessons you finish are checked off as you go. Your browser remembers them, so you can close the tab and pick up right where you left off.

Laptop or phone.

Every page and every editor works on small screens too.

Search that gets you.

Typo in “flexbx”? It still finds Flexbox. Press / to search from anywhere.

Instant feedback.

Exercises tell you right away if you’re right, with a hint if you’re stuck.

Share what you make.

Copy a link to any code in the editor and send it to a friend or a mentor.

From zero to your first web page.

Start with HTML, style it with CSS, then make it interactive with JavaScript. Each course builds on the last, so you always know what to learn next.

Private.

No ads and no tracking cookies. Your code runs in your own browser and is never uploaded.

Free.

Every lesson, exercise and quiz. No paywall, no trial, no credit card.

For everyone.

Readable fonts, strong contrast, and full keyboard and screen reader support.

Ready when you are

Your first web page is
five minutes away.

Start lesson one

Learn to codeby changing code.