Responsive To-Do List App Built with HTML, CSS, and JavaScript

🚀 Project Update: Textarea Character Counter I recently built a Textarea Character Counter using HTML, CSS, and JavaScript as part of my front-end development practice. This project helped me understand how to work with JavaScript events and DOM manipulation to create interactive web features. Live demo:https://lnkd.in/g9V42Hhj 🔹 Key Features ✅ Live character counter inside the textarea ✅ Maximum character limit ✅ Red border indication when the limit is reached ✅ Copy button to copy the entered text ✅ Message displayed after copying text 💡 What I learned • Handling user input using JavaScript • Using event listeners for real-time updates • Implementing character limits in forms • Improving UI feedback for better user experience Small projects like this help me improve my front-end development skills and gain practical experience. More projects coming soon as I continue my learning journey in Web Development 💻 💻 Technologies Used: HTML | CSS | JavaScript #WebDevelopment #FrontendDevelopment #JavaScript #HTML #CSS #LearningJourney #CodingPractice

⏰ Build Your Own Digital Clock with HTML, CSS & JavaScript! Ever wondered how a live digital clock works on a website? I recently created one from scratch using basic web technologies — and it’s a great beginner-friendly project! 💡 What I used: HTML for structure CSS for styling JavaScript for real-time functionality 🚀 Key Features: Displays current time (hours, minutes, seconds) Updates every second automatically Clean and responsive design 🔧 What I learned: Working with the Date object in JavaScript Using setInterval() for real-time updates Improving UI with simple CSS styling This project is perfect if you're starting your web development journey and want to understand how dynamic content works. If you're learning JavaScript, give this a try — small projects like this build strong fundamentals! 🚀 Here check my GitHub repo: 🔗 https://lnkd.in/gCz98WpX 🚀 Day 15 of #100DaysOfCode #WebDevelopment #JavaScript #HTML #CSS #Coding #FrontendDevelopment #100DaysOfCode

Day 12 – Built a Rock Paper Scissors Game with HTML, CSS & JavaScript Today I built a simple but fun Rock Paper Scissors game using pure HTML, CSS, and JavaScript. The game allows a user to choose Rock, Paper, or Scissors, and the bot randomly selects its move. The result is instantly displayed showing whether the player wins, the bot wins, or it’s a draw. What I practiced in this project: • DOM manipulation using JavaScript • Generating random choices for the bot • Game logic implementation • Interactive UI design with CSS • Handling user events (click interactions) Tech Stack HTML | CSS | JavaScript If you’re learning JavaScript, this is a great beginner project to understand how frontend logic works in real-time. #JavaScript #WebDevelopment #FrontendDevelopment #HTML #CSS #CodingJourney #BuildInPublic

🚀 Project Showcase: Dark Mode Toggle (HTML, CSS & JavaScript) I recently built a Dark Mode Toggle feature using HTML, CSS, and JavaScript to enhance user experience by allowing users to switch between light and dark themes effortlessly. 💡 Key Highlights: 🌗 Smooth Light/Dark mode switching 🎨 Clean and responsive UI design using CSS ⚡ JavaScript functionality for real-time theme toggling 💾 User preference can be easily extended to local storage for persistent settings This small project helped me better understand DOM manipulation, event handling, and UI state management in JavaScript while improving front-end design practices. 🔧 Tech Stack: HTML | CSS | JavaScript Projects like this show how small features can significantly improve usability and accessibility in modern web applications. I’m continuously exploring and building more front-end projects to strengthen my development skills. here checks my GitHub repo: 🔗 https://lnkd.in/gCz98WpX 🚀 Day 6 of #100DaysOfCode #WebDevelopment #FrontendDevelopment #JavaScript #HTML #CSS #DarkMode #Coding #LearningInPublic

After my last post about Vanilla CSS, a few people asked: "But how do you handle the 'click' state without JavaScript?" The answer is simpler than you think: The Checkbox Hack. By using a hidden <input type="checkbox"> and the :checked pseudo-class, you can: Toggle menus with zero JS. Keep your HTML semantic. Ensure 100% performance on low-end devices. Here’s the 3-step logic: 1.HTML: Wrap your menu in a label connected to a hidden checkbox. 2.CSS: Set the menu to display: none (or transform: scale(0) for better animation). 3.The Magic: Use input:checked ~ .menu { display: block; }. Modern CSS features like :focus-within and the new popover API are making JavaScript "glue code" a thing of the past. Are you still writing document.querySelector for basic UI toggles, or have you explored these native CSS alternatives? Let’s chat in the comments—I’m looking to connect with more devs who love building lightweight, high-performance web apps! #WebDevelopment #CSS #Frontend #CleanCode #ProgrammingTips #VanillaCSS

🚀 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

🚀 Built a Background Changer using HTML, CSS & JavaScript Excited to share my latest mini project where I created a Background Color Changer 🎨 💡 With just a click, the entire background changes — simple idea, but a great way to strengthen core concepts! 🔹 What I used: • HTML for structure • CSS for styling • JavaScript for interactivity 🔹 Key Learnings: • DOM manipulation in JavaScript • Handling events like clicks • Writing clean and interactive UI logic • Improving user experience with small features 🔗 Live Demo: https://lnkd.in/eSmF8Qdw 💻 GitHub Repo: https://lnkd.in/eU-N3P2J This project reminded me that even small builds can teach big concepts 💯 I’m focusing on building consistently and improving step by step 🚀 💬 What was the first JavaScript project you built? #WebDevelopment #JavaScript #HTML #CSS #Frontend #CodingJourney #BuildInPublic

Build an Animated Expandable Search Bar with HTML & CSS (No JavaScript) | Day 5/100 Projects In this tutorial, we build a modern animated expandable search bar using HTML and CSS only. This project is part of my 100 Days Web Development Challenge, where I create real frontend projects to improve my coding skills and help beginners learn HTML, CSS, and JavaScript through practical projects. In this video you will learn: • How to create an expandable search bar UI • CSS transitions and smooth animation effects • How the :focus-within selector works in CSS • Modern UI design using pure HTML and CSS This project is perfect for beginners who want to practice real frontend development projects and build a strong portfolio. 📁 Source Code: https://lnkd.in/gw3JzN5x Follow the full 100 Days Web Development Projects Playlist to learn step-by-step frontend development. 📅 Challenge Progress: Day 5 / 100 📢 Connect With Me GitHub: https://lnkd.in/g_ej-272 LinkedIn: https://lnkd.in/g6mqgEfv Facebook: https://lnkd.in/gdQGzdwn X {Twitter}: https://lnkd.in/gJSiMPf5 #100DaysOfCode #WebDevelopmentProjects #CSSAnimation #HTMLCSSButton #FrontendDevelopment #ExpandableSearchBoxCSS

🚀 Just Built a Live Code Editor in the Browser! Share my latest mini project — a Live HTML, CSS & JavaScript Editor 💻✨ 🔹 Real-time preview using iframe 🔹 Clean dark/light theme toggle 🌗 🔹 One-click copy & download 🔹 Fully responsive layout 📱 🔹 Preloaded landing page template to get started instantly This project helped me sharpen my skills in: ✔️ DOM manipulation ✔️ UI/UX design ✔️ JavaScript event handling ✔️ Responsive layouts 💡 It’s amazing how powerful pure HTML, CSS, and JavaScript can be without any frameworks! Would love your feedback and suggestions 🙌 What feature should I add next? 🤔 #WebDevelopment #JavaScript #Frontend #Coding #BuildInPublic #Developer #HTML #CSS #Editor #LiveEditor #MiniProject #VEDESH