JavaScript Projects for Beginners (2026): 20 Ranked Ideas

Beginner JavaScript projects, todo lists, timers, quiz flows, API readers, teach more than tutorials because you type the logic, hit the edge cases, and deploy something real. The 20 below are ranked by what they train, state, fetch, deploy discipline, so a portfolio site outranks a calculator even though the calculator is simpler to build.

The Scrimba specifics below (module names, scrim counts, instructors) come from our own course reviews, each written after going through the course inside a Pro account. Full sourcing is in data/courses.json and the linked review pages.

Use it alongside /docs/courses/javascript/ and /docs/courses/react/ on this site, and our escape tutorial hell playbook when projects stall.

How we ranked "learning value"

Higher rank means more transfer to job tasks: persistence, async UX, security instincts, deploy discipline. "Beginner" and "intermediate" describe complexity, not quality. A narrow, well-scoped intermediate build still counts.

Master table (all 20 projects)

Rank	Project	What it teaches	Difficulty	Scrimba-aligned starting point
1	Portfolio site	Deploy pipeline, content hierarchy, performance basics	Beginner	Frontend Developer Path capstones + Deploying with Netlify
2	Expense tracker	CRUD, validation, totals, persistence	Intermediate	Learn JavaScript projects lane
3	Weather app	fetch, loading/error UI, env vars	Beginner	Vanilla fetch drills in Learn JavaScript
4	To-do list	State, filters, localStorage	Beginner	Classic path milestone
5	Flashcard app	Data modeling, study flows	Intermediate	Learn React after JS core
6	Pomodoro timer	Timers, pause/resume, edge cases	Beginner	DOM + interval practice
7	Quiz app	Routing or steps, scoring	Beginner	Component/state patterns
8	Markdown previewer	Parsing, sanitization mindset	Intermediate	Markdown course
9	GitHub profile viewer	REST JSON, empty states	Intermediate	API shaping
10	Image search (Unsplash)	Keys, quotas, query UX	Intermediate	API + images
11	Recipe finder	Nested data, filters	Intermediate	JSON transforms
12	URL shortener	IDs, collisions, optional serverless	Intermediate	Backend-light variant OK
13	Mini social feed	Lists, optimistic UI	Intermediate	React Challenges
14	Typing speed test	Keyboard events, timing	Beginner	Input handling
15	Budgeting tool	Forms, categories, exports	Intermediate	Data entry UX
16	Password generator	Randomness, clipboard	Beginner	Crypto getRandomValues
17	Color palette generator	Color spaces, contrast	Beginner	Color tool in vanilla JS
18	Calculator	Parsing, keyboard UX	Beginner	State machine lite
19	Random quote generator	fetch, retries	Beginner	Smallest useful API app
20	Drum machine	Audio timing	Intermediate	Media APIs

Group A, pure JavaScript (no framework)

Build these first if you still pause on events, DOM updates, and async/await.

• Calculator: forces you to handle bad input and reset state without React masking the data flow. Learn JavaScript's blackjack game module runs the same muscle for 2.7 hours across 55 scrims, holding card state and betting logic by hand before you ever meet useState.
• Random quote generator: minimal surface area, good for fetch-and-render repetition.
• Typing speed test: timer literacy and focus edge cases.
• Password generator: a practical Web Crypto or getRandomValues introduction.
• Color palette generator: HSL and RGB intuition and contrast thinking for real UIs.
• Drum machine: makes timing bugs obvious, and it is fun if you like tactile feedback loops.

Anchor your reading with Learn JavaScript, Per Borgen's free 9.4-hour course, and keep how to escape tutorial hell open when you want to peek at a solution without copying it.

Group B, React projects (after JS clicks)

Move here once you can scaffold createRoot, useState, and useEffect on purpose, not from muscle memory left over from a video.

• To-do list (React version): still the best state-lifting teaching tool.
• Flashcard app: good for component boundaries (card, deck, session summary). Learn React's Tenzies capstone builds a similar boundary problem, a Die component feeding a parent's win check, in 19 scrims.
• Quiz app: practice controlled flows and derived state. The same course's Assembly: Endgame capstone (28 scrims) is a hangman clone that tracks guessed letters, disables the keyboard on game over, and picks a new word on reset, the closest Scrimba analog to a quiz engine.
• Mini social feed: list rendering, keys, and empty states that feel social.
• Markdown previewer: pairs React with sanitized-HTML habits. Dylan C. Israel's Markdown course covers the syntax itself in 26 scrims if you need the reference before wiring up a renderer.

Deep links: Learn React, taught by Bob Ziroll across six projects and about 15 hours, React Router, and the Movie Search App project write-up.

Group C, API and integration projects

These still need vanilla fetch clarity even when the UI is React. Debugging a network request is a career-long skill.

• Weather app: the classic loading, success, failure triad.
• GitHub profile viewer: pagination and schema drift (API fields change on you).
• Image search: rate limits and lazy loading stress your layout skills.
• Recipe finder: nested attributes train defensive rendering with ?. patterns. Learn React's own recipe app, the Chef Claude project inside the React State module, does exactly this: 58 scrims that end by wiring a form to the Claude API and rendering whatever comes back.
• URL shortener: even a mock-persistence version teaches ID design, and a small serverless function is a bonus.

James Q Quick's Movie Search App project is the closest single Scrimba build to this whole group: 13 scrims fetching from The Movie Database API, handling loading and empty states, and rendering a results grid.

Making Scrimba course projects "yours"

Scrimba's courses already include working versions of a movie search app, a recipe finder, dice and word games, and several React builds. Submitting one of them unchanged is the hiring mistake: a reviewer who has seen the course recognizes the layout in ten seconds.

Fork the idea, not the file. Re-theme it, add one real data source of your own, add one feature the course never asked for (an analytics event, a keyboard shortcut, a contrast fix), and rewrite the README as if you were handing the repo to a teammate who has never seen the course.

Scrimba's paths bundle these projects with the surrounding curriculum; see current plans↗ (opens in a new tab) for what that costs where you live.

Suggested 4-week rotation (10–12 hours/week)

Week	Focus	Deliverable
1	Vanilla DOM + fetch	Quote generator + weather skeleton
2	State + persistence	Todo or expense MVP
3	React port	Rebuild week 2 app with components
4	Polish + deploy	README, Lighthouse pass, mobile check

Comparison: practice project vs portfolio project

Dimension	Practice project	Portfolio project
Goal	Reps and recall	Proof for employers
Scope	Small, disposable	Narrow but polished
README	Bullet notes	Setup, decisions, tradeoffs
Deploy	Optional	Expected

Tie-ins across this site

• Roadmap timing: How long it takes to learn web development
• Career context: Is software engineering dead in 2026?
• Format comparison: Scrimba vs freeCodeCamp

Bottom line

Pick one project from the master table, finish it in a single vertical slice per sitting, and deploy it before you move on. Twenty small builds are training. Three customized ones, with a README and a live URL, are the signal a hiring manager actually reads.

Want guided versions of these builds?

Scrimba's courses include projects like these with a written brief and a recorded solution. Customize them so your GitHub tells your story, not the instructor's.

Try Scrimba free↗ (opens in a new tab)