Learn by Building

JavaScript Projects
From Beginner to Advanced

Stop watching tutorials. Start building real things. Each project comes with a plain-English explanation, full source code, and a free download.

Start simple → Build interactive applications → Work with APIs and browser features

18 Projects
3 Difficulty Levels
Free Source Code

Beginner Projects Great to start

Build your first apps with JavaScript fundamentals, DOM manipulation, events, and simple application logic.

Beginner

To-Do List App

Build a task manager where you can add, complete, and delete tasks. Perfect first project - you'll learn how to update the page without refreshing.

HTML CSS JS
Beginner

Calculator

Create a working calculator that can add, subtract, multiply, and divide. A classic starter project that teaches you to handle user input and math operations.

HTML CSS JS
Beginner

Digital Clock

Build a real-time digital clock that shows hours, minutes, and seconds. You'll learn how JavaScript talks to the browser every second to update the display.

HTML CSS JS
Beginner

Color Flipper

Click a button and watch the whole page change to a random color. Simple, visual, and fun - great for understanding DOM manipulation basics.

HTML CSS JS
Beginner

Countdown Timer

Set a time in minutes and seconds, hit start, and watch it count down to zero. Learn how timers work in JavaScript with setInterval and clearInterval.

HTML CSS JS
Beginner

Random Quote Generator

Click a button and get an inspiring quote with its author. A fun first project to learn arrays, objects, DOM manipulation, and event handling.

HTML CSS JS

Intermediate Projects Level up

Build interactive applications by combining concepts, handling user input, and managing browser state.

Intermediate

Quiz App

Build a multi-question quiz with score tracking. You'll work with arrays of questions, show/hide screens, and give users instant feedback on answers.

HTML CSS JS
Intermediate

Tip Calculator

Create a smart tip calculator that splits bills between friends. Practice working with forms, input validation, and number formatting in real time.

HTML CSS JS
Intermediate

Guess The Number

Build an interactive game where the computer picks a secret number and you have to guess it. Great for learning game logic, conditionals, and user feedback.

HTML CSS JS
Intermediate

Password Generator

Build a tool that creates strong, random passwords. Choose length and character types, see a live strength meter, and copy with one click. A must-have portfolio project.

HTML CSS JS
Intermediate

Pomodoro Timer

Build the world's favourite productivity timer with a beautiful glowing SVG ring. Learn CSS variables, setInterval, and state management - with the accent colour changing each mode.

HTML CSS SVG JS
Intermediate

Currency Converter

Convert between popular world currencies with exchange rates. Learn form handling, select elements, objects as lookup tables, and number formatting.

HTML CSS JS

Advanced Projects Go deeper

Work with APIs, persistence, JSON, browser capabilities, and larger multi-feature applications.

Advanced

Expense Tracker

Build a personal finance app that tracks income and expenses. Learn localStorage to save data even after the browser closes, plus dynamic chart rendering.

HTML CSS JS localStorage
Advanced

Memory Card Game

Create a classic flip-and-match memory game. You'll shuffle cards, handle game state, track matches, and add smooth CSS flip animations.

HTML CSS JS Animations
Advanced

Weather App

Build a weather dashboard that fetches real data from an API. Learn how to work with fetch(), async/await, JSON, and display live results beautifully.

HTML CSS JS Fetch API
Advanced

Drawing App

Build a full-featured drawing app using the Canvas API. Freehand pen, shape tools, color picker, adjustable brush size, and undo - all in pure JavaScript.

HTML CSS JS Canvas API
Advanced

Markdown Editor

Build a live Markdown editor that converts text to HTML in real time. Learn regex parsing, split-pane layout, and localStorage - all in pure JavaScript.

HTML CSS JS Regex
Advanced

Kanban Board

Build a drag-and-drop Kanban board with three columns. Master the HTML5 Drag and Drop API, dynamic DOM manipulation, and localStorage persistence.

HTML CSS JS Drag & Drop

Ready to Start Coding?

Pick any project above and follow along. Every guide is written in plain English - no confusing jargon, just clear steps.

Brush Up on Basics First