HTML, CSS, and JavaScript projects you can run, read, and learn from in the browser, from a counter to a quote app that calls an API.
I built this so beginners can learn JavaScript the way it's actually used: by building the small, familiar parts of real websites. Every project runs live on its page, next to its full code and a walkthrough of the ideas behind it, so you can see what it does, read how it's done, and copy it to build on.
On the live site, start from the path, which lists every project by level. Each level has its own page with what it covers, what to know before you start, and its projects.
Each project page opens with a banner: what you're building, your progress, and a link to the project's article when it has one. Under it, Why build it names what you can build with these skills, and Skills you'll earn lists what you'll be able to do afterwards. Then come three parts:
- Try it: the project running in a playground you can resize to phone, tablet, or desktop width, next to its HTML, CSS, and JavaScript. Turn the teaching comments off, copy a file, or download the whole project.
- How it works: the ideas behind it, one at a time, each explained in plain words next to the lines of code that use it. Select Find it in the full code to highlight those lines in the playground.
- Wrap up: challenges to try on your own, other articles on the blog that cover the project's ideas, and the project's own article in the blog series, which goes into each idea in more depth.
Some projects are built more than one way, like an accordion with no JavaScript and one that keeps a single answer open, so you can compare them. A switcher above the playground and the walkthrough moves between the ways. Tick ideas off as you learn them and mark projects done; your progress is saved in your browser, with no account needed.
Every project and level page has a Share button for sending the page to someone. When you finish a project, a level, or all of them, Share it draws a card of your progress in your browser, with your name on it if you add one, ready to download, copy, or share.
The projects are ordered from simple to advanced, in three levels:
| Level | Projects | Focus |
|---|---|---|
| Beginner | Counter, Color Flipper, Accordion, Modal Box, Tabs | Events and the DOM |
| Intermediate | Image Slider, Carousel, Calculator, Countdown Timer, To-do List, Search Filter | Arrays, state, and timing |
| Advanced | Form Validation, Quiz App, Expense Tracker, Random Quote | Forms, data, and APIs |
Every project is plain HTML, CSS, and JavaScript, with no libraries, and covers accessibility as it goes: keyboard support, focus, and what screen readers announce.
You need Node.js 20.9 or later and pnpm. Clone the repo and install:
git clone https://github.com/Timonwa/javascript-projects-for-beginners.git
cd javascript-projects-for-beginners
pnpm installThen start the dev server and open the URL it prints, usually http://localhost:3000:
pnpm devBefore the server starts, pnpm dev copies every project's files into public/demos/ so the playground can run them.
| Command | What it does |
|---|---|
pnpm dev |
Copies the demos, then starts the dev server |
pnpm build |
Copies the demos, then builds every page as static HTML |
pnpm start |
Serves the production build |
pnpm lint |
Runs ESLint |
pnpm typecheck |
Checks the types without building |
pnpm format |
Formats the code with Prettier |
pnpm format:check |
Checks formatting without changing files |
The only setting is optional: set APP_ENV=production to load analytics. Leave it unset locally so your own visits aren't counted.
| Folder | What it holds |
|---|---|
src/content/projects/ |
The projects: each one's files and its project.md |
app/ |
The pages, plus the sitemap, share images, and llms.txt |
src/components/ |
The interface, with shared pieces in ui/ |
src/lib/ |
Config, data, types and schemas, loaders, and SEO helpers |
scripts/build-demos.mjs |
Copies each project into public/demos/ and zips it for download |
- Letters with CSS: the 26 capital letters of the alphabet, drawn in pure CSS (source).
- Shapes with CSS: 26 shapes, from a circle to a magnifying glass, drawn in pure CSS (source).
Spotted a bug or a mistake in an explanation? Open an issue. Pull requests that fix a reported bug are welcome; new projects and new content aren't being taken.
MIT © Timonwa Akintokun