Learn HTML & CSS From Scratch

Ever looked at a nice website and wondered if you could make your own? Wonder no longer!

Each module is short explanation plus a live demo with copy-pasteable code. Then you can see why it works and do an exercise. Open DevTools on any demo, change stuff, and watch it break. That's the point.
See what you can build: Corner Shelf (Example Site)

A tiny bookshop demo built with only HTML & CSS from this course. Semantic HTML, flex/grid, responsive, variables, forms & transitions. View source to see how. (This is NOT an actual business!)

Open demo
Phase 0: Foundations
0

How The Web Actually Works

Spoiler alert: it's literally just files on someone else's computer.

1

Your First HTML Tag

Hello World but HTMLified. Boilerplate, tags, headings & paragraphs.

Phase 1: HTML
2

Links, Images & Not Breaking Paths

Why is my image a broken icon? <a>, <img> & the ../ maze.

3

Lists, Tables & Semantic HTML

Div soup. Lists, tables, and tags that actually mean something.

4

Containers: div, span & When to Care

The two most boring tags that run the internet. Block vs. inline, id vs. class.

Phase 2: CSS
5

Your First CSS Rule

Why is nothing changing? Oh, specificity. Selectors, cascade & instant gratification.

6

The Box Model

Everything is a rectangle.

7

How to Actually Center a Div

You've heard the joke, but what does it mean?

8

Display, Flow & Why Inline Feels Broken

Why can't I set width on this span? block / inline / none / flex preview.

Phase 3: CSS Layout
9

Flexbox

The reason we stopped using floats.

10

Grid

Spreadsheets, but good. Columns, rows, areas & the flex-vs-grid flowchart.

11

Position & Stacking

How to put things on top of other things without regret. z-index demystified.

12

Responsive or It Didn't Happen

Your site on your phone should not be a war crime. Media queries & clamp().

Phase 4: Making It Not Ugly
13

Typography That Doesn't Hurt Eyes

Pick two fonts. Not five. Hierarchy with size / weight / spacing.

14

Color, Backgrounds & Borders

Why your pretty color looks muddy. hex/hsl, gradients, shadows & variables.

15

Forms, Inputs & Pseudo-Classes

The browser gives you 80% of validation for free. :hover, :focus, ::before.

16

Transitions & "Wow" Without JS

Motion for polish, not nausea. transform, transition & keyframes.

17

Putting It All Together

You can stop following tutorials now. Ship a page. Send the link.


Found a bug or typo? Open DevTools, edit locally, and send a PR. That's literally lesson 0.