wesbos/javascript30

★ 29,126HTMLAudience · vibe coderComplexity · 1/5ActiveLicenseSetup · easy

Mindmap

mindmap
  root((JavaScript30))
    What it does
      30 daily projects
      Vanilla JavaScript
      Browser APIs
    Learning approach
      Starter files
      Video lessons
      Reference solutions
    Project types
      Audio playback
      Keyboard input
      Canvas drawing
      Local storage
    Audience
      JavaScript learners
      Self-taught developers
      Framework-curious coders
    Why it matters
      No external libraries
      Core language skills
      Real browser features

mindmap root((JavaScript30)) What it does 30 daily projects Vanilla JavaScript Browser APIs Learning approach Starter files Video lessons Reference solutions Project types Audio playback Keyboard input Canvas drawing Local storage Audience JavaScript learners Self-taught developers Framework-curious coders Why it matters No external libraries Core language skills Real browser features

Things people build with this

USE CASE 1

Build 30 small working projects to practice vanilla JavaScript without frameworks.

USE CASE 2

Learn browser APIs like audio, canvas, local storage, and keyboard events through hands-on exercises.

USE CASE 3

Strengthen core JavaScript fundamentals by seeing how the language works in real browser contexts.

USE CASE 4

Create a portfolio of completed projects while following a structured 30-day learning path.

Tech stack

JavaScriptHTMLCSSBrowser APIs

Getting it running

Difficulty · easy Time to first run · 5min

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

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 want to learn vanilla JavaScript without frameworks. Walk me through the first JavaScript30 project and explain what browser APIs it uses.

Prompt 2

Show me how to build a drum kit using the keyboard event listener from JavaScript30 project 1.

Prompt 3

I'm stuck on the JavaScript30 canvas drawing project. How do I track mouse position and draw on a canvas element?

Prompt 4

Help me understand how localStorage works by building the JavaScript30 project that saves form data to the browser.

Prompt 5

I completed JavaScript30. What's the next step to level up my JavaScript skills beyond vanilla?

Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.