Welcome! 👋
This repository showcases my personal journey of completing 30 HTML, CSS & JavaScript projects in 30 days as part of the amazing Udemy course created by Vijay Kumar.
🛠 Build HTML, CSS & JavaScript Projects each day for 30 Days and create your portfolio as a Beginner Front-End Web Developer.
This challenge is designed to strengthen my frontend development skills by building a new project from scratch every single day using just HTML, CSS, and JavaScript.
| Day | Project | Description | Preview |
|---|---|---|---|
| 1 | Speech-to-Text 🗣️ | Convert voice to text using Web Speech API | Preview |
| 2 | Piano Application 🎹 | Interactive virtual piano keyboard | Preview |
| 3 | Text-to-Voice 🔊 | Text-to-speech functionality | Preview |
| 4 | Robot Joke Generator 🤖 | Fetch and read robot‑style jokes | Preview |
| 5 | HSL Color Generator 🎨 | Generate HSL color values dynamically | Preview |
| 6 | Modal Application 🪟 | Reusable modal popup component | Preview |
| 7 | Digital Clock ⏰ | Real‑time live clock using JavaScript | Preview |
| 8 | Color Flipper 🎲 | Generate random background colors | Preview |
| 9 | Percentage Calculator 📊 | Basic percentage calculations | Preview |
| 10 | Calculator App ➕ | Arithmetic calculator | Preview |
| 11 | Read More / Read Less 📖 | Expand/collapse long text blocks | Preview |
| 12 | Star Rating Component ⭐ | Interactive star‑based rating system | Preview |
| 13 | Animated Counter 🔢 | Animate numbers on page load | Preview |
| 14 | Hex‑to‑Binary Converter 🔁 | Convert hex values to binary | Preview |
| 15 | Awesome Cursor 🖱️ | Fun and creative custom cursor effects | Preview |
| 16 | Quick URL Saver 🔗 | Save URLs for quick reference | Preview |
| 17 | Typing Text Effect ⌨️ | Auto typing text animation | Preview |
| 18 | Image Comparison Slider 🖼️ | Compare two images with a draggable slider | Preview |
| 19 | Search Functionality 🔍 | Search through a dataset in real time | Preview |
| 20 | Words Counter ✍️ | Count characters, words, and sentences | Preview |
| 21 | Dynamic Color Changer 🌈 | Change page colors on interaction | Preview |
| 22 | Box Shadow Generator 💠 | Generate and copy CSS box-shadow styles | Preview |
| 23 | Image Carousel 🖼️ | Slide-based image carousel | Preview |
| 24 | Browse Image Upload 📁 | Upload and preview images locally | Preview |
| 25 | Fun with String 🧵 | Reverse, count, and manipulate text | Preview |
| 26 | Cash Calculator 💰 | Simple money management calculator | Preview |
| 27 | Age Calculator 🎂 | Calculate age from birth date | Preview |
| 28 | Finance Deposit Calculator 🏦 | Compound interest/FD calculator | Preview |
| 29 | BMI Calculator ⚖️ | Body Mass Index calculator UI | Preview |
| 30 | Love Calculator ❤️ | Fun app to calculate love percentage | Preview |
I’ll update this table as I finish each day’s project. Follow the journey!
- ✅ DOM manipulation and event handling
- ✅ CSS animations and visual effects
- ✅ Responsive layout techniques
- ✅ JavaScript logic and functionality
- ✅ Real-world mini projects to enhance user interaction
- ✅ Writing clean, maintainable, and modular code
🎓 Course: Build HTML, CSS & JavaScript Projects each day for 30 Days
👨🏫 Instructor: Vijay Kumar – Web & Android Developer
📋 Course Format: 30 Real-World Beginner Projects
🌐 Tech Used: HTML5, CSS3, Vanilla JavaScript
All project ideas and structure are originally from the course. I am using it to build and solidify my web development skills.
- 🔨 Practice by building hands-on projects
- 🧠 Reinforce core web development concepts
- 🗂 Build a portfolio for my resume and GitHub
- 🎯 Stay consistent with daily learning
- 🚀 Push myself to learn, debug, and improve every day
- HTML5
- CSS3
- JavaScript (ES6+)
- Clone the repo:
git clone https://github.com/akash199699/30-Basic-HTML-CSS-JavaScript-Projects.gitNavigate to any project folder:
cd 01-SpeechToText
Open index.html in your browser.
📜 License & Attribution This repository is for educational and personal learning purposes only.
🙌 Let’s Connect! Feel free to follow my journey, fork this repository, or star it if you find the idea motivating! I'll be sharing each day’s project as I complete it.
Let’s build. Let’s grow. One project at a time. 💪