15 projects · HTML · CSS · JavaScript
Learn the fundamentals by building real things.
See each project run, read the code that built it, and learn the ideas behind it. One small project at a time, from simple to advanced.
Free · No account · Progress saved in your browser
How it works
- 1
See it run
Every project works right on the page. Try it before you read a line.
- 2
Read the code
The exact HTML, CSS, and JavaScript behind it, ready to copy.
- 3
Learn the fundamentals
Every idea, step by step, explained next to the lines of code that use it.
- 4
Go deeper
Read the full article on the blog: each idea in more depth, why the code is written this way, and more.
One project, several ways
Real sites build the same thing in different ways. 5 projects show you more than one, side by side, so you can see what each way costs and what it gives you.
- Accordion · Way 1
No JavaScript
The browser's own
<details>element opens and closes each answer, with no JavaScript at all. Several answers can be open at once. - Accordion · Way 2
Toggle each
A
<button>and a few lines of JavaScript open and close each answer. You control the markup, so each question can be a real heading. - Accordion · Way 3
One at a time
The same HTML and CSS as Toggle each. Only the JavaScript changes: opening one answer now closes the others.
From simple to advanced
See every projectBeginner
Events and the DOM
Intermediate
Arrays, state, and timing
Advanced
Forms, data, and APIs
Questions
Who are these projects for?
Anyone starting out with HTML, CSS, and JavaScript. The projects start simple, and each one builds on the ideas before it.
Do I need to install anything?
No. Every project runs in your browser, next to its code. If you want to work on it yourself, download the project's files and open index.html.
Is it free?
Yes. Every project, its code, and its walkthrough are free, with no account needed.
How is my progress saved?
In your browser, on your device. Ticking an idea or marking a project done is stored locally, so there's nothing to sign up for, and clearing your browser data resets it.
Why are some projects built more than one way?
Some things can be built several ways that real sites use, like an accordion with no JavaScript or one that keeps a single answer open. Seeing them side by side shows what each way costs and gives you.
More to learn
Other projects in the same spirit: see it, read the code, copy it.
- HTML · CSS
Letters with CSS
The 26 capital letters of the alphabet, drawn with nothing but HTML and CSS. View and copy the code for every letter.
Visit
(opens in a new tab) - HTML · CSS
Shapes with CSS
Twenty-six shapes, from a circle to a magnifying glass, drawn with nothing but HTML and CSS. View and copy the code for every shape.
Visit
(opens in a new tab) - ReactComing soon
React Projects for Beginners
The next step after JavaScript: real projects built with React, in the same format as these.