A collection of 29 beginner-to-intermediate JavaScript projects built with plain HTML, CSS, and JavaScript — no frameworks, no build tools. Each project has a setup/starter folder (blank starting point) and a final folder (completed solution).
- HTML5
- CSS3 (custom properties, flexbox, grid)
- Vanilla JavaScript (ES6+)
- Font Awesome icons
- Public REST APIs (for select projects)
| # | Project | Key Concepts |
|---|---|---|
| 01 | Color Flipper | DOM manipulation, arrays, random values |
| 02 | Counter | Event listeners, classList, conditional styling |
| 03 | Reviews | Arrays of objects, dynamic rendering, random index |
| 04 | Navbar | Toggle classes, responsive navigation |
| 05 | Sidebar | Overlay/drawer pattern, classList toggle |
| 06 | Modal | Show/hide overlay, event delegation |
| 07 | Questions | Accordion/FAQ pattern, toggle content |
| 08 | Menu | Filter by category, data attributes |
| 09 | Video | HTML5 video API, play/pause/mute controls |
| 10 | Scroll | scrollY, fixed navbar, smooth scroll, back-to-top |
| 11 | Tabs | Tab switching, active state management |
| 12 | Countdown Timer | setInterval, date math, DOM updates |
| 13 | Lorem Ipsum | Text generation, form validation, slice |
| 14 | Grocery Bud | CRUD, localStorage, edit/delete, input validation |
| 15 | Slider | CSS transitions, auto-play, prev/next logic |
| 16 | Counters (OOP) | Classes, IntersectionObserver, animation |
| 17 | Gallery (OOP) | Lightbox, OOP pattern, keyboard navigation |
| 18 | Numbers | Animated number counting on scroll |
| 19 | Dark Mode | localStorage theme persistence, CSS variables |
| 20 | Filters | Array filter, dynamic rendering, category buttons |
| 21 | Dad Jokes | Fetch API, async/await, custom request headers |
| 22 | Products | Fetch API, product cards, dynamic rendering |
| 23 | Random User | Fetch API, external API consumption |
| 24 | Cocktails | Fetch API, search, dynamic card rendering |
| 25 | Slider | Advanced slider with testimonials |
| 26 | Stripe Submenus | Animated dropdown menus, mouse position tracking |
| 27 | Pagination | Client-side pagination, dynamic page buttons |
| 28 | Wikipedia | Wikipedia API, search debouncing |
| 29 | Comfy Store | Full shopping UI, cart, filters, localStorage |
No installation or build step required. Open any project directly in a browser:
# Open a project's final version
open 01-color-flipper/final/index.html
# Or use the VS Code Live Server extension for hot reloadEach project folder contains:
project-name/
├── final/ ← completed solution
│ ├── index.html
│ ├── app.js
│ └── styles.css
└── setup/ ← blank starting point (starter/)
├── index.html
├── app.js
└── styles.css
These projects accompany the Udemy course:
The Complete JavaScript Course for Beginners
Find this useful? Buy me a coffee ☕