wesbos/javascript30

Analysis updated 2026-06-20

★ 29,114HTMLAudience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((javascript30))
    What it does
      30 daily projects
      Vanilla JS only
      No frameworks
    Tech Stack
      JavaScript
      HTML and CSS
      Browser APIs
    Use Cases
      Self-study practice
      Browser API learning
      Front-end fundamentals
    Audience
      JS beginners
      Self-taught devs
      Bootcamp students

mindmap root((javascript30)) What it does 30 daily projects Vanilla JS only No frameworks Tech Stack JavaScript HTML and CSS Browser APIs Use Cases Self-study practice Browser API learning Front-end fundamentals Audience JS beginners Self-taught devs Bootcamp students

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Work through 30 daily mini-projects to strengthen your understanding of vanilla JavaScript and browser APIs.

USE CASE 2

Use the starter files to practice audio, canvas, local storage, and fetch without any framework.

USE CASE 3

Reference completed solutions to compare your own approach on each of the 30 challenges.

USE CASE 4

Follow a structured daily curriculum to teach yourself front-end development from first principles.

What is it built with?

JavaScriptHTMLCSS

How does it compare?

	wesbos/javascript30	foundation/foundation-sites	tencent/weui
Stars	29,114	29,765	27,370
Language	HTML	HTML	HTML
Setup difficulty	easy	moderate	easy
Complexity	1/5	2/5	1/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

License not specified in the explanation.

In plain English

JavaScript30 is a free 30-day coding challenge and course that teaches plain JavaScript by building 30 small browser-based projects from scratch, one per day. The problem it addresses is that most JavaScript learners rely heavily on frameworks and libraries from the start, and end up with gaps in their understanding of what the language itself can do. Each exercise uses only vanilla JavaScript, meaning no external libraries are involved. The repository contains starter files for each of the 30 projects as well as completed reference solutions. The actual video lessons that walk through building each project are hosted externally at javascript30.com. The README is largely a community list of people who have shared their own recaps, notes, guides, and alternative implementations of the challenges, showing a broad base of learners working through the same material. Projects cover a range of browser fundamentals, working with audio, the keyboard, CSS transitions, local storage, canvas drawing, fetching data, and other browser APIs. The files are plain HTML, and each exercise is self-contained. You would use this if you know the basics of JavaScript and want to strengthen your understanding of what browsers can do without any framework involved, or if you are teaching yourself front-end development and want structured daily practice with real, working mini-projects. The entire course is free.

Copy-paste prompts

Prompt 1

I'm working on the JavaScript30 drum kit project, help me wire up keyboard events to trigger audio playback using only vanilla JS, no libraries.

Prompt 2

Using the JavaScript30 local storage project as a base, show me how to persist a to-do list in the browser so it survives a page refresh.

Prompt 3

Walk me through the JavaScript30 canvas drawing exercise, I want to draw smooth lines with mouse events using the HTML5 Canvas API.

Prompt 4

Explain how classList toggling and CSS transitions work together in the JavaScript30 accordion project.

Prompt 5

Show me how to fetch JSON from an API and render the results as HTML elements without using jQuery or React, as in the JavaScript30 fetch exercise.

Frequently asked questions

What is javascript30?

A free 30-day challenge to learn vanilla JavaScript by building 30 small browser projects from scratch, one per day, with no frameworks or libraries involved.

What language is javascript30 written in?

Mainly HTML. The stack also includes JavaScript, HTML, CSS.

What license does javascript30 use?

License not specified in the explanation.

How hard is javascript30 to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is javascript30 for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub wesbos on gitmyhub

Verify against the repo before relying on details.