bradtraversy/vanillawebprojects

Analysis updated 2026-06-24

★ 16,025JavaScriptAudience · vibe coderComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((vanillawebprojects))
    Inputs
      Browser only
      No build tools
    Outputs
      20 mini web apps
      Live demos
      Self-contained folders
    Use Cases
      Practice DOM and JS basics
      Follow along with the course
      Use as portfolio starters
    Tech Stack
      HTML
      CSS
      JavaScript

mindmap root((vanillawebprojects)) Inputs Browser only No build tools Outputs 20 mini web apps Live demos Self-contained folders Use Cases Practice DOM and JS basics Follow along with the course Use as portfolio starters Tech Stack HTML CSS JavaScript

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Practice DOM manipulation by reading and tweaking the included projects

USE CASE 2

Use one of the 20 demos as the starting point for a portfolio piece

USE CASE 3

Teach a vanilla JavaScript class from working examples

What is it built with?

HTMLCSSJavaScript

How does it compare?

	bradtraversy/vanillawebprojects	huggingface/transformers.js	yabwe/medium-editor
Stars	16,025	15,998	16,109
Language	JavaScript	JavaScript	JavaScript
Setup difficulty	easy	easy	easy
Complexity	1/5	2/5	2/5
Audience	vibe coder	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

Open any project's index.html in a browser. No build step or install.

In plain English

This repository contains the source code for 20 small web projects built using only HTML, CSS, and plain JavaScript, no external frameworks or libraries. It accompanies a paid video course on building web projects with "vanilla" JavaScript (meaning plain JavaScript without tools like React or Vue). Each project is a self-contained mini web app demonstrating a specific concept or feature. The projects include: a form validator, a movie seat booking interface, a custom video player, an exchange rate calculator, a hangman game, a meal finder app that searches recipes, an expense tracker, a music player, an infinite scrolling blog, a typing speed game, a speech-to-text reader, a memory card game, a lyrics search app, a breakout game, a New Year countdown timer, a voice-controlled number guessing game, and a product filtering UI. Each has a live demo linked from the repository. This is aimed at beginners who want hands-on practice building real, working web projects using only core browser technologies, no need to install any libraries or learn a framework first. Each project is intentionally kept simple and focused so learners can follow along with the course video and understand how it works.

Copy-paste prompts

Prompt 1

Pick the form validator project from vanillawebprojects and walk me through how the validation logic works line by line

Prompt 2

Show me how to add localStorage so the expense tracker from vanillawebprojects keeps data between page reloads

Prompt 3

Refactor the music player project from vanillawebprojects to use ES modules and a clean folder layout

Prompt 4

Adapt the breakout game from vanillawebprojects to run on a touchscreen phone

Frequently asked questions

What is vanillawebprojects?

Source code for 20 small web projects built with plain HTML, CSS, and JavaScript. Companion to a Brad Traversy video course teaching vanilla JS.

What language is vanillawebprojects written in?

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

How hard is vanillawebprojects to set up?

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

Who is vanillawebprojects for?

Mainly vibe coder.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub bradtraversy on gitmyhub

Verify against the repo before relying on details.