A modern collection of practical vanilla JavaScript projects for learning DOM manipulation, browser APIs, frontend fundamentals, and portfolio-ready JavaScript mini apps.
Build real browser-based projects using only HTML, CSS, and JavaScript. No frameworks. No build tools required. Just hands-on frontend practice with DOM events, canvas, local storage, video controls, speech APIs, geolocation, forms, timers, animations, and interactive UI patterns.
Learning JavaScript or building your frontend portfolio?
Give this repository a ⭐ star to help more developers discover practical vanilla JavaScript projects, DOM exercises, and browser API examples.
Vanilla JavaScript Projects Lab is a beginner-friendly and portfolio-focused collection of 30 hands-on JavaScript projects.
This repository is useful for developers who want to practice real frontend development without relying on React, Vue, Angular, or other frameworks.
You will learn how JavaScript works directly in the browser by building interactive projects with:
- DOM manipulation
- Browser events
- Keyboard interactions
- HTML5 audio and video
- CSS variables
- Canvas drawing
- Fetch API
- Local storage
- Speech recognition
- Speech synthesis
- Geolocation
- Timers
- Drag and drop interactions
- Scroll effects
- Custom UI behavior
This project is designed for developers who want to strengthen core JavaScript skills before moving into modern frontend frameworks.
There are many JavaScript challenge repositories online, but many are basic forks, outdated collections, or simple course copies.
This repository is positioned as a cleaner, more discoverable, and more portfolio-friendly JavaScript project collection.
The goal is to help developers:
- Practice vanilla JavaScript without frameworks
- Build frontend mini projects for learning
- Improve DOM manipulation skills
- Understand browser APIs through real examples
- Prepare frontend portfolio projects
- Learn JavaScript by building instead of only reading
- Refresh HTML, CSS, and JavaScript fundamentals
- Study project-based JavaScript patterns
- Prepare for frontend developer interviews
This repository is ideal for:
- Beginner JavaScript developers
- Frontend engineering students
- Bootcamp students
- Self-taught web developers
- Developers preparing portfolio projects
- Engineers refreshing vanilla JavaScript fundamentals
- React developers who want stronger JavaScript basics
- Job seekers preparing frontend interview projects
- Anyone learning HTML, CSS, and JavaScript through practice
Through these 30 JavaScript projects, you will practice:
- JavaScript DOM manipulation
- Event listeners and keyboard events
- HTML5 audio and video APIs
- CSS variables controlled with JavaScript
- Flexbox interactions
- Canvas drawing
- JavaScript array methods
- Ajax and Fetch API
- Local storage
- Event delegation
- Custom video controls
- Speech synthesis
- Speech recognition
- Mouse movement effects
- Timers and countdowns
- Drag and drop interactions
- Scroll-based animations
- Browser-native APIs
- Frontend UI interaction patterns
| # | Project | Skills Practiced |
|---|---|---|
| 01 | JavaScript Drum Kit | Keyboard events, audio API, DOM updates |
| 02 | CSS + JS Clock | Date object, timing, CSS transforms |
| 03 | CSS Variables | CSS custom properties, inputs, live styling |
| 04 | Array Cardio Day 1 | Map, filter, sort, reduce |
| 05 | Flex Panel Gallery | Flexbox, transitions, click events |
| 06 | Ajax Type Ahead | Fetch API, filtering, regex, dynamic rendering |
| 07 | Array Cardio Day 2 | Some, every, find, findIndex |
| 08 | Fun with HTML5 Canvas | Canvas API, mouse events, drawing |
| 09 | Dev Tools Domination | Console tools, debugging techniques |
| 10 | Hold Shift and Check Checkboxes | Checkbox state, range selection, events |
| 11 | Custom HTML5 Video Player | Video API, progress bar, custom controls |
| 12 | Key Sequence Detection | Keyboard input tracking, secret codes |
| 13 | Slide In on Scroll | Scroll events, viewport detection |
| 14 | JavaScript References vs Copying | Value vs reference behavior |
| 15 | LocalStorage and Event Delegation | Local storage, forms, delegated events |
| 16 | Mouse Move Shadow | Mouse coordinates, dynamic text shadow |
| 17 | Sort Without Articles | String sorting, text normalization |
| 18 | Adding Up Times with Reduce | Reduce, time parsing, totals |
| 19 | Webcam Fun | Webcam API, canvas filters, pixel effects |
| 20 | Speech Detection | Speech recognition API |
| 21 | Geolocation | Geolocation API, position tracking |
| 22 | Follow Along Links | DOM positioning, hover effects |
| 23 | Speech Synthesis | Speech synthesis API, voice controls |
| 24 | Sticky Nav | Scroll position, fixed navigation |
| 25 | Event Capture, Propagation, Bubbling, and Once | Event flow, capture, bubbling |
| 26 | Stripe Follow Along Dropdown | Dropdown UI, hover interactions |
| 27 | Click and Drag | Mouse drag scrolling |
| 28 | Video Speed Controller | Video playback rate control |
| 29 | Countdown Timer | Date math, intervals, countdown UI |
| 30 | Whack A Mole | Game state, timers, randomization |
This repository is useful for developers searching for:
- vanilla JavaScript projects
- JavaScript DOM projects
- beginner JavaScript projects
- frontend portfolio projects
- JavaScript mini projects
- HTML CSS JavaScript projects
- browser API JavaScript examples
- JavaScript projects without frameworks
- DOM manipulation exercises
- frontend development practice
- JavaScript coding challenge
- web development projects for beginners
- JavaScript practice projects
- JavaScript project ideas
- JavaScript interview practice projects
Projects that help you practice selecting, updating, and interacting with HTML elements using JavaScript.
Examples:
- JavaScript Drum Kit
- CSS Variables
- Flex Panel Gallery
- Hold Shift and Check Checkboxes
- Follow Along Links
- Sticky Nav
Projects that teach browser-native APIs without external frameworks.
Examples:
- HTML5 Video Player
- Webcam Fun
- Speech Detection
- Speech Synthesis
- Geolocation
- Local Storage
Projects focused on arrays, objects, timing, state, and data transformation.
Examples:
- Array Cardio Day 1
- Array Cardio Day 2
- Sort Without Articles
- Adding Up Times with Reduce
- Countdown Timer
- Whack A Mole
Projects focused on real frontend interaction patterns.
Examples:
- Slide In on Scroll
- Mouse Move Shadow
- Stripe Follow Along Dropdown
- Click and Drag
- Video Speed Controller
- Flex Panel Gallery
Clone the repository:
git clone https://github.com/your-username/vanilla-javascript-projects-lab.git
cd vanilla-javascript-projects-labOpen any project folder in your browser.
For the best development experience, use a local server:
npx serveOr use the Live Server extension in Visual Studio Code.
If you are new to JavaScript, follow this order.
Start with simple DOM updates and event handling.
- JavaScript Drum Kit
- CSS + JS Clock
- CSS Variables
- Flex Panel Gallery
- Hold Shift and Check Checkboxes
Move into JavaScript logic, array methods, and data transformation.
- Array Cardio Day 1
- Array Cardio Day 2
- Sort Without Articles
- Adding Up Times with Reduce
- Ajax Type Ahead
Practice APIs that are available directly in the browser.
- LocalStorage and Event Delegation
- Custom HTML5 Video Player
- Fun with HTML5 Canvas
- Webcam Fun
- Speech Detection
- Speech Synthesis
- Geolocation
Practice frontend interaction patterns used in real applications.
- Slide In on Scroll
- Mouse Move Shadow
- Follow Along Links
- Sticky Nav
- Stripe Follow Along Dropdown
- Click and Drag
- Video Speed Controller
Finish with projects that combine state, timing, randomness, and UI updates.
- Countdown Timer
- Whack A Mole
These JavaScript projects are useful for learning, but they become much stronger portfolio pieces when you customize and extend them.
Good portfolio upgrades include:
- Redesigning the UI
- Adding responsive layouts
- Improving accessibility
- Adding dark mode
- Adding keyboard support
- Adding TypeScript
- Refactoring repeated logic
- Adding project-level README files
- Adding screenshots and live demos
- Deploying projects with GitHub Pages, Netlify, or Vercel
- Writing short case studies for selected projects
Example portfolio description:
Built a collection of vanilla JavaScript projects focused on DOM manipulation, browser APIs, event handling, canvas, local storage, custom video controls, speech APIs, geolocation, and interactive frontend UI behavior.
To make this project collection more useful than a basic JavaScript exercise repo, future improvements may include:
- Project-by-project explanations
- Screenshots for every project
- Live demo links
- Accessibility improvements
- Mobile responsive designs
- TypeScript versions
- Modern CSS improvements
- Better comments for beginners
- Common bugs and fixes
- Extra challenge ideas
- Interview questions for each project
- Beginner, intermediate, and advanced versions
- GitHub Pages showcase
- Frontend portfolio guide
Each project can include its own README using this structure:
# Project Name
Short description of what the project does.
## Skills Practiced
- DOM manipulation
- Event handling
- Browser API usage
## What I Learned
Explain the main JavaScript concept practiced in this project.
## Possible Improvements
- Add responsive design
- Improve accessibility
- Add TypeScript
- Add testsModern frontend frameworks are powerful, but strong JavaScript fundamentals make every framework easier to understand.
By practicing vanilla JavaScript first, you improve your understanding of:
- How the DOM works
- How browser events work
- How state changes update the UI
- How APIs interact with the browser
- How JavaScript handles arrays, objects, and functions
- How frontend interactions work without abstraction
This makes it easier to later work with React, Vue, Angular, Svelte, Next.js, and other frontend tools.
This repository is inspired by public JavaScript learning challenges and project-based frontend practice resources.
It is not affiliated with, endorsed by, or presented as the official version of any original course, brand, or creator’s repository.
The purpose of this repository is to provide a cleaner, more discoverable, and portfolio-friendly learning structure for developers practicing vanilla JavaScript, DOM manipulation, and browser APIs.
Contributions are welcome if they improve the learning experience.
Good contributions include:
- Better explanations
- Bug fixes
- Accessibility improvements
- Responsive design updates
- Screenshots
- Live demo links
- TypeScript versions
- Additional challenge ideas
- Cleaner code comments
- Documentation improvements
Please avoid spammy links, unrelated promotions, or low-quality additions.
If this repository helped you practice JavaScript, understand DOM manipulation, or build frontend portfolio projects, please give it a ⭐ star.
Your star helps other developers find beginner-friendly vanilla JavaScript projects, browser API examples, and hands-on frontend coding exercises.
Useful for learning JavaScript?
Star this repository ⭐ so more frontend developers can find practical vanilla JavaScript projects.
Use this repository for learning, practice, and portfolio development.
Check the license file for details.