Free HTML Tutorial — learn HTML and CSS in 12 days
Tags, forms, layout and responsive design - topic by topic, with every example editable and rendered right here in the page.
A free, hands-on HTML and CSS course
Twelve short lessons that take you from never having written a tag to building a complete, responsive landing page. Every snippet runs in your browser - edit it, break it, run it again. Nothing to install, no signup, no editor to set up.
Start with Day 1.
The 12 days
Day 1 — What HTML is, and the page skeleton
HTML is not a programming language. It is a way of labelling what things are, and once that …Day 2 — Text, headings and lists
Ninety percent of the web is text. These are the tags you will type more than any others.…Day 3 — Links and images
Links are what make it a web. Images are where most accessibility problems start.…Day 4 — Tables that are actually tables
Tables are for data. If you are using one to position things on a page, stop - that is Day 9…Day 5 — Forms, inputs and labels
Forms are where your page stops being a document and starts being useful. They are also wher…Day 6 — Semantic HTML and page structure
You can build any page out of divs. You should not, and this lesson is why.…Day 7 — CSS - making it look like something
HTML says what things are. CSS says what they look like. Today the pages stop looking like 1…Day 8 — The box model
Every element is a rectangle with four layers. Almost every "why is this not lining up" ques…Day 9 — Layout with Flexbox
Everything people used to do with tables and floats, done properly in about six properties.…Day 10 — Responsive design - one page, every screen
More than half your visitors are on a phone. A page that only works on your laptop is a page…Day 11 — Accessibility and SEO
These two get taught as separate subjects. They are mostly the same work, because both rewar…Day 12 — Build a real page, and interview questions
One page that uses everything - structure, forms, layout, responsiveness and accessibility.…Three panes on every example
| Pane | Shows you |
|---|---|
| Preview | The markup rendered, exactly as a browser draws it. |
| Outline | The element tree the browser actually built - useful the moment the preview is not what you expected. |
| Check | A scan of what you typed for the mistakes beginners make. |
The Check pane is the part that will teach you fastest. A browser silently repairs broken markup, so a page that looks fine can be badly wrong underneath. The checker reads your source, not the repaired version, so it catches the unclosed tag the preview quietly hid from you.
It flags unclosed and mismatched tags with the line they started on, closing tags on empty elements like </br>, duplicate ids, images with no alt, links with no href, inputs no <label> can reach, attribute values left unquoted, and headings that skip a level. On a full document it also checks for the doctype essentials - lang, charset, title and the viewport tag.
What this playground can and cannot do
HTML and CSS both run for real here, because the preview is a genuine browser frame. Layout, Flexbox, media queries, forms, tables and typography all behave exactly as they will on a live site.
Also out of scope: build tools, hosting and deployment, CSS Grid beyond a first look on Day 10, and anything React-shaped.
How to get the most out of it
- Type the markup, do not copy it. The typing is where the learning happens, and the typos teach you to read the Check tab.
- Break things on purpose. Remove a closing tag, delete an alt, duplicate an id. Read what the checker says.
- Watch the Outline whenever the preview surprises you. Nesting problems are obvious there and invisible everywhere else.
- Do the exercises at the end of each day before moving on.