20 projects • 5 levels • 10 achievements
100% Free & Open Source

Master JavaScript
Through Projects

Build real projects, earn XP, unlock achievements, and level up from Rookie to Legend— one app at a time.

Start LearningView on GitHub
20
Projects
5
Levels
10
Achievements
100%
Free

How It Works

Three steps to mastery

No setup, no downloads. Just pick a project and start coding.

Choose a Project

Pick from 15 projects across 5 difficulty levels — from a simple Number Generator to a full Pomodoro Timer.

Write Real Code

Follow step-by-step instructions for HTML, CSS, and JavaScript. Type your solution and get instant feedback with built-in validation.

Earn XP & Level Up

Earn 15 XP per step and 100 XP per project. Level up from Beginner to Legend, unlock achievements, and track your streak.

Why JS-APPS

Learn JavaScript the fun way

Ditch the boring tutorials. Build real projects, earn rewards, and track your progress like a game.

Learn by Doing

Build 15 real projects from scratch — no copy-paste. Each project teaches you HTML, CSS, and JavaScript hands-on.

Gamified Progression

Earn XP for every completed step, unlock achievements, track your streak, and level up from Rookie to Legend.

Step-by-Step Lessons

Each project is broken into 4 guided steps (HTML → CSS → JS → Final). Get hints, write real code, and see it run live.

Instant Feedback

Code validation checks your work in real time. Get clear error messages when something's wrong and fix it right away.

10 Achievements

Unlock badges like 'First Steps', 'Code Machine', and 'Legend in the Making' as you hit milestones in your journey.

Beginner Friendly

No prior experience needed. Projects start simple (Level 1) and gradually increase in complexity up to Level 5.

Progression Path

Your learning roadmap

Start as a Rookie and work your way up to Ninja. Each level unlocks harder, more rewarding projects.

Level 1
Rookie
4 projects
Number Generator
Color Generator
String Generator
Gradient Generator
Level 2
Novice
5 projects
Theme Switcher
Counter App
Todo List
Palindrome Checker
Vowel Counter
Level 3
Pro
4 projects
Calculator
Digital Clock
Tip Calculator
Expense Tracker
Level 4
Master
4 projects
Tic-Tac-Toe
Quiz App
Memory Game
Rock Paper Scissors
Level 5
Ninja
3 projects
Pomodoro Timer
Countdown Timer
Typing Speed Test

Featured Projects

Kickstart your journey with these hand-picked beginner-friendly projects. Each one includes guided steps, code validation, and instant feedback.

Number Generator
Level 1

Number Generator

Generate a random number between 1 and 100.

5 stars
Start project
Color Generator
Level 1

Color Generator

Generate random colors with automatic contrast detection.

5 stars
Start project
String Generator
Level 1

String Generator

Generate a random alphanumeric string.

5 stars
Start project
Gradient Generator
Level 1

Gradient Generator

Generate a random gradient to visualize color schemes.

5 stars
Start project
Theme Switcher
Level 2

Theme Switcher

Toggle between light and dark themes.

5 stars
Start project
Counter App
Level 2

Counter App

Interactive counter with increment, decrement, and reset.

5 stars
Start project
View All Projects

Built With

Modern tech stack

JS-APPS is built with the tools you already want to learn.

HTML5
CSS3
JavaScript
TypeScript
React
Next.js
Tailwind CSS
Node.js

Gamification

Learning feels like a game

Earn XP, track streaks, unlock achievements, and watch yourself level up in real time.

Level 3 — Coder
450 XP
5 day streak
3 achievements
Level 3Level 4
1
Beginner
2
Apprentice
3
Coder
4
Developer
5
Architect
6
Master
7
Legend

Star on GitHub

JS-APPS is open source. Contributions, issues, and stars are always welcome!

—
—

Ready to level up?

Start building real JavaScript projects today. No sign-up required — just pick a project and start coding.

Start Now Star on GitHub

Frequently Asked Questions

Everything you need to know about JS-APPS.

What is JS-APPS?+
JS-APPS is a hands-on learning platform with 15 JavaScript projects. Each project has 4 guided steps (HTML, CSS, JS, and a final result) with real-time code validation. You earn XP, unlock achievements, and track your progress as you learn.
Do I need prior experience?+
Not at all! Projects start at Level 1 (Rookie) with simple generators and progress to Level 5 (Ninja) with games and timers. Each step includes hints and starter code to help you along the way.
How does the gamification work?+
You earn 15 XP for each completed lesson step and 100 XP for finishing a full project. As you accumulate XP, you level up through 7 ranks: Beginner, Apprentice, Coder, Developer, Architect, Master, and Legend. There are also 10 achievements to unlock, and your daily streak is tracked.
Do I need to install anything?+
No installation needed. Everything runs in your browser — write code, see it validated, and preview the result live. Just open the page and start coding.
What projects are included?+
There are 15 projects across 5 levels: Number Generator, Color Generator, String Generator, Gradient Generator, Theme Switcher (Level 1), Counter App, Todo List (Level 2), Calculator, Digital Clock, Tip Calculator (Level 3), Tic-Tac-Toe, Quiz App, Memory Game (Level 4), Pomodoro Timer, and Countdown Timer (Level 5).
Is my progress saved?+
Yes! Your lesson progress, XP, level, streak, and achievements are all saved in your browser using localStorage. Come back anytime and pick up where you left off.
Can I contribute?+
Absolutely! JS-APPS is open source. Check the contribution guide in our GitHub repository to add projects, fix bugs, or suggest improvements.