git404hub

what is vanillawebprojects fr?

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.

vibe map

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

what do people make with this?

VIBE 1

Practice DOM manipulation by reading and tweaking the included projects

VIBE 2

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

VIBE 3

Teach a vanilla JavaScript class from working examples

what's the stack?

HTMLCSSJavaScript

how it stacks up fr

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 i run it?

Difficulty · easy time til it works · 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.

prompts (copy fr)

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 fr?

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.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.

similar repos, if this ain't it