Just tell me which projects you want to highlight most and I’ll tweak the table + add demo sections for them.
A collection of 25+ mini projects built with HTML, CSS, and Vanilla JavaScript ES6+.
Each project is self-contained, has its own README, and focuses on a specific concept like DOM manipulation, API calls, or UI components. This repo works great as a learning resource or a public template for your own projects.
Since these are static projects, just clone and open any index.html file in your browser. Or use VS Code + Live Server extension.
| # | Project | Concepts Covered |
|---|---|---|
| 02 | Counter | DOM, addEventListener, conditional logic |
| 03 | Reviews | Arrays, DOM, event listeners |
| 04 | Navbar | Responsive navbar, classList.toggle |
| 05 | Sidebar | Sidebar toggle, CSS transitions |
| 06 | Modal | Modal/overlay, event propagation |
| 07 | FAQ Accordion | Hide/show content, selectors |
| 08 | Restaurant Menu | Filter with array methods, dynamic rendering |
| 09 | Video | Video play/pause, preloader |
| 10 | Scroll | Smooth scroll, dynamic navbar |
| 11 | Tabs | Tabbed content, dataset |
| 12 | Countdown Timer | Date object, setInterval, countdown logic |
| 13 | Lorem Ipsum | Forms, string methods |
| 14 | Grocery Bud | CRUD, localStorage, DOM manipulation |
| 15 | Slider | Carousel logic, manual controls |
| 16 | Counter | State management practice |
| 17 | Dad Jokes | Fetch API, async/await, promises |
| 18 | Notes App | CRUD, localStorage, JSON |
| 19 | Random User | Fetch API, display random data |
| 20 | Cocktails | Fetch API, search/filter, dynamic routing |
| 21 | Slider | Auto-play slider, advanced carousel |
| 22 | Stripe Submenus | Hover menus, dynamic positioning |
| 23 | Pagination | Array slicing, page logic |
| 24 | Collapsable | Accordion pattern, accessibility |
| 25 | Placeholder | Loading skeletons, setTimeout |
- JavaScript ES6+: Arrow functions, destructuring, modules, async/await
- CSS3/SCSS/Less: Flexbox, Grid, animations, responsive design
- HTML5: Semantic markup
- Clone the repo
git clone https://github.com/karthikbilaspur/javascript-projects-.git
- Navigate to any project
cd javascript-projects-/02-counter - Open
index.htmlin your browser or use Live Server
Each folder has its own README.md with setup and feature details.
To practice core JavaScript concepts without frameworks. Every project solves one specific problem and was recently upgraded to modern ES6+ syntax for cleaner, more maintainable code.
This repo is a public template. Click the green Use this template button on GitHub to create your own version and start coding.
V. Karthik - @karthikbilaspur
If you found this helpful, leave a star. It helps others discover the repo.
Feel free to fork, contribute, or suggest new mini project ideas via Issues.
---