50-Projects-In-JavaScript 💻
50 Mini Web Projects using Vanilla HTML, CSS & Javascript. It contains lots of fun and interesting small Projects to understand fundamentals of HTML, CSS and JS. All the Webpages are responsive and build without using any Frameworks.
My Key Learnings 📚
- Webpage Layout and strructuring Using HTML
- CSS Stylings
- Responsive Design
- Key CSS Concepts like Flex, transform (rotate, translate, skew), transition, keyframes, etc
- DOM Manipulations, Javascript Events
- Fetching data & working with 3rd party APIs using Fetch/Axios
- Array methods - map(), filter(), reduce(), etc
- JSON, Promises & Async/Await, Local storage APIs, Canvas API & Animation, etc.
Projects
| # | Status | Project | Problem | Solution | Date |
|---|---|---|---|---|---|
| 01 | ✅ | Expanding Cards | Problem | Solution | Mar 19, 2024 |
| 02 | ✅ | Progress Steps | Problem | Solution | Mar 24, 2024 |
| 03 | ✅ | Rotating Navigation Animation | Problem | Solution | Aug 21, 2024 |
| 04 | ✅ | Hidden Search Widget | Problem | Solution | Aug 22, 2024 |
| 05 | ✅ | Blurry Loading | Problem | Solution | Aug 23, 2024 |
| 06 | ✅ | Scroll Animation | Problem | Solution | Aug 24, 2024 |
| 07 | ✅ | Split Landing Page | Problem | Solution | Aug 24, 2023 |
| 08 | ✅ | Form Wave Animation | Problem | Solution | Aug 25, 2024 |
| 09 | ✅ | Sound Board | Problem | Solution | Aug 27, 2024 |
| 10 | ✅ | Dad Jokes | Problem | Solution | Aug 28, 2024 |
| 11 | ✅ | Event Keycodes | Problem | Solution | Sep 01, 2024 |
| 12 | ✅ | FAQ Collapse | Problem | Solution | Sep 07, 2024 |
| 13 | ✅ | Random Choice Picker | Problem | Solution | Sep 09, 2024 |
| 14 | ✅ | Animated Navigation | Problem | Solution | Sep 09, 2024 |
| 15 | ✅ | Incrementing Counter | Problem | Solution | Sep 09, 2024 |
| 16 | ✅ | Drink Water | Problem | Solution | Sep 11, 2024 |
| 17 | ✅ | Movie App | Problem | Solution | Sep 26, 2024 |