40-web-mini-projects
🚀 40 Days 40 Web Mini Projects
Curated collection of 40 responsive, modern vanilla HTML5, CSS3, and JavaScript web mini-projects.
git clone https://github.com/atharhive/40-web-mini-projects && cd 40-web-mini-projects && npx serve
✨ Overview
Welcome to 40 Days 40 Projects — a journey through 40 mini web projects built with HTML, CSS, and JavaScript.
Each project focuses on a unique UI concept or JavaScript logic.
Together, they serve as an excellent playground to learn, practice, and master frontend development. 🌱
🌟 Projects
| 🚀 Project | 📂 Folder | 🌐 Live Demo |
|---|---|---|
| 🎴 Pokedex & Pokemon Finder | Code | Demo |
| 🔥 Random Choice Picker Tool | Code | Demo |
| 🔐 Random Password Generator | Code | Demo |
| 📝 GitHub Profile Viewer | Code | Demo |
| 📽️ Movie Information App | Code | Demo |
| 📦 3D Background Boxes | Code | Demo |
| ✅ Account Verification UI | Code | Demo |
| 🕰️ Analog Theme Clock | Code | Demo |
| ⏳ Animated Countdown Timer | Code | Demo |
| 📜 Animated Navigation Menu | Code | Demo |
| 🖼️ Background Image Slider | Code | Demo |
| 📰 Content Loading Placeholder | Code | Demo |
| 🎚️ Custom Range Input Slider | Code | Demo |
| ❤️ Double Click Heart Animation | Code | Demo |
| ⬆️ Double Vertical Content Slider | Code | Demo |
| 🔗 Drag and Drop Interface | Code | Demo |
| 🖼️ Expanding Image Cards | Code | Demo |
| ❓ FAQ Accordion Collapse | Code | Demo |
| 😊 Feedback UI Component | Code | Demo |
| 🌊 Form Input Wave Animation | Code | Demo |
| ⚙️ Good Cheap Fast Toggles | Code | Demo |
| 🖼️ Image Carousel Gallery | Code | Demo |
| 🔍 Live User Search Filter | Code | Demo |
| 📱 Mobile Tab Navigation Bar | Code | Demo |
| 📺 Netflix Style Mobile Navigation | Code | Demo |
| 🔑 Password Strength Background | Code | Demo |
| 🌄 Random Image Feed Generator | Code | Demo |
| 🔄 Rotating Navigation Animation | Code | Demo |
| 🎯 Scroll Triggered Animations | Code | Demo |
| ✏️ Simple Drawing Application | Code | Demo |
| 📝 Simple Notes Application | Code | Demo |
| ✅ Simple Todo List Application | Code | Demo |
| 🖥️ Split Screen Landing Page | Code | Demo |
| 🪄 Step-by-Step Progress Bar | Code | Demo |
| 📌 Sticky Navigation Bar | Code | Demo |
| 💬 Testimonial Box Switcher | Code | Demo |
| 🔔 Toast Notification System | Code | Demo |
| 💧 Water Intake Tracker | Code | Demo |
| 🎯 Insect Catching Game | Code | Demo |
| 🎨 Interactive Hoverboard | Code | Demo |
📖 Documentation
Each project comes with its own dedicated README.md inside its folder.
These include:
- 🛠 Setup instructions to run locally,
- 💡 Insights and key concepts behind each project,
- 🔄 Guides to rebuild from scratch so you can learn by doing.
i Tried making this repository not just a showcase, but also a learning playground to dive deep into JavaScript, HTML, and CSS.
Happy coding! 🚀
📜 License
Released under the MIT License — free to use, modify, and distribute.
If you find this helpful, please ⭐ star the repo!
🚀 Made with ❤️ by [atharhive](https://github.com/atharhive)