QR Code Generator Website Built with HTML, CSS & JavaScript

🚀 Day 24 of My 30 Days Web Development Challenge Consistency check ✅ — building something new every day. Today I built a 📑 Tabs Component UI using HTML, CSS & JavaScript This project helped me understand how real-world UI components work and how to make them reusable and interactive. ✨ Features: 📑 Tab switching functionality 🎯 Active tab highlighting 🌗 Dark / Light mode toggle (icon-based) ⚡ Smooth content transitions 📱 Fully responsive design 🎨 Clean and modern UI 💡 What I learned: • Creating reusable UI components • Handling click events and state changes • DOM manipulation for dynamic content • Managing active states in UI • Building responsive layouts 🛠️ Tech Stack: HTML | CSS | JavaScript 🔗 Live Demo: https://lnkd.in/gQEqgsdD 💻 GitHub: https://lnkd.in/gxjgJBvj Learning how small UI components can make a big difference in real applications 🔥 #WebDevelopment #JavaScript #FrontendDeveloper #UIComponents #CodingJourney #BuildInPublic #100DaysOfCode #HTML #CSS #LearnInPublic #Consistency

🚀 Built a Popup Modal using HTML, CSS & JavaScript Excited to share another mini project from my frontend development journey — a Popup Modal Component! 💻✨ Popups (modals) are widely used in modern websites for alerts, confirmations, forms, and notifications. In this project, I built a simple and reusable popup using pure HTML, CSS, and JavaScript. 🔹 Tech Stack Used: ✅ HTML5 – Structured layout ✅ CSS3 – Styling, animations & responsive design ✅ JavaScript – Popup open/close functionality 🔹 Key Features: ✔️ Open and close popup with button click ✔️ Smooth animation effects ✔️ Clean and modern UI design ✔️ Responsive for all screen sizes ✔️ Reusable component for websites Through this project, I improved my understanding of: 👉 DOM Manipulation 👉 Event Handling 👉 UI Component Development 👉 CSS Transitions & Animations Small UI components like this are essential for building interactive and user-friendly web applications. 💡 🔗 Live Demo: https://lnkd.in/gfj99_fa #WebDevelopment #FrontendDeveloper #JavaScript #HTML #CSS #UIDeveloper #ReactDeveloper #BuildInPublic #LearningByBuilding

🚀 Day 19 of My 30 Days Web Development Challenge Consistency check ✅ — showing up every day and building real projects. Today I built a 🎯 Guess The Number Game using HTML, CSS & JavaScript It may look simple, but this project helped me improve how I think about logic, user interaction, and UI structure. ✨ Features: ▶️ Random number generation 🎚️ Difficulty levels (Easy / Medium / Hard) 💬 Smart hints (Too High / Too Low / Close) 📊 Attempts counter 🏆 Best score tracking using localStorage 🔄 Restart game 🌗 Dark / Light mode toggle 📱 Clean & responsive UI 💡 What I learned: • Writing better conditional logic • Handling real-time user input • Using localStorage in projects • Structuring UI in a clean and readable way • Making simple ideas more interactive 🔗 Live Demo: https://lnkd.in/g49B4vU3 💻 GitHub: https://lnkd.in/gQVjh7Sq Still learning. Still building. Still improving. 🔥 #WebDevelopment #JavaScript #FrontendDevelopment #FrontendDeveloper #CodingJourney #BuildInPublic #100DaysOfCode #HTML #CSS #WebDevProjects #LearnInPublic #Consistency #DeveloperLife

🚀 New Project Alert: Calculator Web App I recently built a Calculator Web Application using HTML, CSS, and JavaScript. This project helped me strengthen my understanding of: • DOM Manipulation • JavaScript Event Handling • Responsive UI Design 🔧 Tech Stack: HTML | CSS | JavaScript You can check out the project here: 🔗 GitHub Repository: https://lnkd.in/gFYUSwTx #WebDevelopment #JavaScript #FrontendDevelopment

🚀 **Mini Web Project: Interactive Pet Selector** I recently built a simple yet interactive web application that allows users to select a pet from a dropdown menu and dynamically updates the displayed image based on the selection. 🔹 **Key Features:** * Dynamic image rendering using JavaScript * Event handling with `change` event listener * Clean and responsive UI using Bootstrap * Efficient mapping of data using JavaScript objects 🔹 **Tech Stack:** HTML | CSS | JavaScript | Bootstrap 🔹 **What I Learned:** * Handling DOM manipulation effectively * Working with event-driven programming * Structuring clean and maintainable front-end code * Improving user experience with real-time updates This project helped me strengthen my fundamentals in front-end development and understand how small interactive features can enhance user engagement. Looking forward to building more dynamic and user-friendly applications! 💻✨ #WebDevelopment #JavaScript #Frontend #LearningByDoing #Projects

🚀 Project Showcase: Calculator using HTML, CSS & JavaScript You can check out the project here: 🔗 GitHub Repository: [https://lnkd.in/g8wPEsiU] 🌐 Live Demo: [https://lnkd.in/gdFkAHFp] I recently built a fully functional Calculator using HTML, CSS, and JavaScript as part of my web development practice. This project helped me strengthen my understanding of DOM manipulation, event handling, and JavaScript logic while creating a clean and responsive UI. 🔹 Key Features: • Perform basic arithmetic operations (+, −, ×, ÷) • Clean user interface • Real-time calculation display ❤️ I’m continuously building projects to improve my JavaScript and frontend development skills. Feedback and suggestions are always welcome! #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #Projects

💼 Frontend Project Showcase — Quiz Application I recently built a fully functional Quiz Application using core web technologies. This project focuses on creating a clean user experience while implementing strong JavaScript fundamentals in a practical way. 🔹 Tech Stack: HTML5 • CSS3 • JavaScript (Vanilla) 🔹 Key Functionalities: Dynamic rendering of questions and answer options Real-time score tracking Instant feedback on answers (correct/incorrect states) Progress tracking with a visual progress bar Multi-screen flow (Start → Quiz → Results) Responsive design for different screen sizes 🔹 What This Project Highlights: ✔ DOM Manipulation ✔ Event Handling ✔ Application logic & state flow ✔ Structured and maintainable code 🎥 A demo video is attached to showcase the full functionality and user experience. 📈 Learning Progress: Completed JavaScript basics Currently building one JavaScript project daily to improve problem-solving and development skills Learning Tailwind CSS alongside to create better and modern UI designs Consistently focusing on building and improving through real projects. More coming soon. 🚀 #JavaScript #WebDevelopment #Frontend #BuildInPublic #CodingJourney

🚀 Built a QR Code Generator with Live Output using HTML, CSS & JavaScript! I’m happy to share my frontend mini project — a QR Code Generator that creates QR codes instantly based on user input like Name or URL, and dynamically displays the generated QR image on the screen. 🔹 Technologies Used: HTML5, CSS3, JavaScript 🔹 Features: ✅ Instant QR Code Output Display ✅ Input Validation (Prevents empty values) ✅ Dynamic Image Generation using API ✅ Clean and Responsive UI 💡 What I Learned: • DOM Manipulation • Event Handling in JavaScript • Working with APIs • Improving logical thinking in JS Seeing the QR code generate instantly after clicking the button was the best part of this project! 🎯 This project strengthened my frontend fundamentals and gave me hands-on experience building real-time interactive web applications. #FrontendDeveloper #JavaScript #WebDevelopment #HTML #CSS #QRCode #Projects #Learning

Recently, I’ve been practicing and strengthening my frontend skills by building a set of small projects. These are not large-scale applications but focused practice projects where I applied key concepts in JavaScript, Bootstrap, CSS, HTML, UI behavior, and responsive design. Here’s a quick overview. 🔹 Advanced Note App A dynamic notes system with: – Add/edit / delete notes – Pin & search functionality – Dark mode – LocalStorage handling 🔗 https://lnkd.in/d-pscjvp 🔹 To-Do List App Focused on logic and validation: – Prevent empty & duplicate tasks – Dynamic rendering – Task status tracking + live counters 🔗 https://lnkd.in/d6F_53xB 🔹 Employees CRUD System Working with APIs and real data behavior: – Fetch, update, delete (REST API) – Search, sorting & pagination – Inline editing 🔗 https://lnkd.in/dGB7SBBx 🔹 HTML & CSS Template One – Responsive layout – Clean structure using Flexbox 🔗 https://lnkd.in/dKE3nuM5 🔹 HTML & CSS Template Two – Multi-section modern UI – More advanced layout & components 🔗 https://lnkd.in/drnEmN7w 💡 Through these projects, I focused on: – Improving JavaScript logic and DOM manipulation – Handling edge cases and validation – Building dynamic, interactive UI – Writing cleaner and more structured code 🎥 Demo video attached. Still learning, building, and improving every day. #javascript #frontend #webdevelopment #html #css #bootstrap #learning

🚀 New Project Deployed – To-Do List Web App I recently built and deployed a To-Do List application using HTML, CSS, and JavaScript. This project helped me strengthen my understanding of DOM manipulation and interactive UI behavior in JavaScript. You can check it out here: 🔗 [https://lnkd.in/geExcau9] github: [https://lnkd.in/gVRsq3xk] Key Features: • ➕ Add a new task instantly by pressing Enter • ✏️ Edit any task by simply double-clicking on it • ✅ Mark tasks as completed using the checkbox (with strikethrough effect) • 🗑️ Delete tasks easily using the delete button • ⚡ Smooth and simple user experience with real-time updates Building small projects like this helps me improve my JavaScript logic and front-end development skills. I’d love to hear your feedback! 🙌 #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment