gitwtfhub

wtf is vanillawebprojects?

bradtraversy/vanillawebprojects — explained in plain English

Analysis updated 2026-06-24

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

TL;DR

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

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

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Practice DOM manipulation by reading and tweaking the included projects

REASON 2

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

REASON 3

Teach a vanilla JavaScript class from working examples

What's in the stack?

HTMLCSSJavaScript

How it stacks up

bradtraversy/vanillawebprojectshuggingface/transformers.jsyabwe/medium-editor
Stars16,02515,99816,109
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasyeasy
Complexity1/52/52/5
Audiencevibe coderdeveloperdeveloper

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

How do you spin it up?

Difficulty · easy Time to first run · 5min

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

Wtf does this do

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.

Yoink these 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

wtf 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.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.

Other repos in this lane