Excited to share a small but practical front-end project: a Metric ↔ Imperial Unit Converter built with HTML, CSS and vanilla JavaScript. 🚀 What I built * Converts length (meters ↔ feet), volume (liters ↔ gallons) and mass (kilograms ↔ pounds). * Simple, focused UI with an input, convert button and live result cards. * Clean conversion functions, DOM manipulation and number formatting for readable output. 👨💻 Tech & learnings Tech: HTML, CSS, plain JS — no framework required. Learned: Clear separation of conversion logic from UI code, handling numeric input, and producing consistent decimal precision for display (toFixed / Math.round). Outcome: a compact utility that demonstrates DOM APIs, modular functions and attention to UX. GitHub Repo: https://lnkd.in/gQhyTZW2 Demo URL: https://lnkd.in/gxDZb5HP #UnitConverter #FrontEndDevelopment #WebDevelopment #JavaScript #HTML #CSS #CodingProject #DevCommunity #TechForGood #UXDesign #LearnToCode #WebDesign #ProgrammingLife #JavaScriptDeveloper #WebDev #CodeNewbie #TechInnovation #DigitalTools #CodingJourney #SoftwareDevelopment #TechSkills #CreativeCoding #WebApp #OpenSource #CodeWithMe #DeveloperLife #TechEducation #Frontend #TechInspiration #CodingIsFun #MetricImperial

💥 I I Tried 3 href Styles - And Only Two Worked Smoothly! Ever added an Edit button and wondered why your popup suddenly disappears or your page scrolls to the top? 😅 It all comes down to one tiny detail - the href value in your <a> tag. 💡 Here’s what’s really happening (see image 👇) 🔴 href="#" → Scrolls your page back to the top 🔴 href="" → Refreshes the page and closes your popup 😬 🟢 href="" return false; → Stops the refresh 🟢 href="javascript:void(0);" → The clean, modern way — no scroll, no refresh 🎯 ⚙️ Why It Matters When you’re triggering a JavaScript function like EditAccount(1), you don’t actually need your link to navigate anywhere you just need a click action. That’s where javascript:void(0); or return false; come in to save your UX! 🙌 🎯 Takeaway Small details make big differences. Even a tiny href tweak can stop reloads, prevent popups from closing, and make your front-end feel smoother and more professional. ✨ #WebDevelopment #JavaScript #FrontendTips #HTML #CodingBestPractices #WebDesign #UXDesign #Developers #LearnByDoing #CodeTips #DevCommunity

Back to basics! I just wrapped up this sleek, modern login page and wanted to share the process. 🚀 While it's easy to reach for a framework, I challenged myself to build this from the ground up using only vanilla HTML, CSS, and JavaScript. The main goal was to get hands-on with CSS Flexbox to create a layout that’s fully responsive and looks sharp on any device. One feature I particularly enjoyed implementing was the password visibility toggle. It’s a small UX enhancement, but it’s a great example of how a little bit of JavaScript and DOM manipulation can make a big difference for the user. This project was a fantastic exercise in strengthening my core front-end skills. I'd love to hear what you think! Check out the live demo and feel free to explore the code on GitHub. 🔗 Live Demo: https://lnkd.in/dpxDGB_j 💻 Source Code: https://lnkd.in/d7ZrhkAR #Frontend #WebDevelopment #HTML #CSS #JavaScript #Flexbox #UI #ResponsiveDesign #PortfolioProject

🚀 Day 89 of #100Days100ProjectsChallenge — CAPTCHA Generator 🔒✨ Today, I built a simple yet powerful CAPTCHA Generator — a web app that adds an extra layer of security by verifying that the user is human 👨💻🤖 This project demonstrates how frontend validation and randomized challenges can protect websites from bots, using elegant design and smooth React logic — all without external libraries! 💡 My Approach: The goal was to create a lightweight, client-side CAPTCHA system that’s easy to integrate into any signup or login form. It generates random text-based CAPTCHAs on a canvas, lets users input the code, and verifies correctness instantly — with options to refresh and retry. 📄 Project Highlights: 🔐 Generate random CAPTCHA strings (letters + numbers) 🎨 Draw CAPTCHA dynamically on HTML canvas 🧩 Verify user input in real time 🔁 Refresh CAPTCHA on incorrect attempts ✨ Clean, beautiful UI built with pure CSS (no Tailwind) ⚡ 100% client-side — no backend required 🧠 What I Learned: ✅ Using React state hooks (useState) for instant UI updates ✅ Drawing text programmatically on a canvas ✅ Handling form validation and event-driven UI ✅ Designing accessible and aesthetic components without Tailwind 🛠️ Tech Stack: React + JavaScript + HTML5 Canvas + CSS 🌟 Key Highlights: 🧠 Simple but practical security concept 🎨 Pure CSS styling — lightweight and minimal 💡 Ready to embed into any form (login, contact, signup) 🔔 Coming Next: I’ll extend this project with a Math-based CAPTCHA and image-click challenge for more robust human verification! 🔗 Explore the Project: 📂 GitHub: https://lnkd.in/ddHsBVdf 🌐 Live Demo: https://lnkd.in/dejmfMg5 💼 Portfolio: https://lnkd.in/dkzd6eeH 📩 Email: tejbhagat2001@gmail.com #100Days100Projects #Day89 #WebDevelopment #React #JavaScript #FrontendDevelopment #UIDesign #Security #Captcha #ProblemSolving #Innovation #CodingJourney #LearnBuildShare

🚀 Project 3/30 — Quote Generator (HTML, CSS & JavaScript) For my third project in the 30-project journey, I built a Quote Generator from scratch — a clean, minimal app that fetches random quotes in real time using the fetch() API, and enhances user interaction with smart features like voice playback, copy-to-clipboard, and keyboard shortcuts. 💡 What I Built:  • Dynamic Quote Generator fetching data from an API  • Built-in Text-to-Speech — listen to any quote with a single click  • Copy-to-Clipboard feature for quick sharing  • X (Twitter) sharing integration  • Keyboard shortcuts for fast interaction:  → Space = New Quote  → S = Speak Quote  → C = Copy Quote  • Smooth UI transitions, elegant shadows, and responsive layout 🧠 What I Focused On:  • Strengthening DOM manipulation and API handling fundamentals  • Implementing browser features like SpeechSynthesis and Clipboard API  • Writing modular and reusable JavaScript functions  • Enhancing UX through accessibility and keyboard navigation  • Building something simple yet polished — every interaction feels intentional For me, this project was about refining user experience through logic, not libraries. Every line of code brings me closer to mastering the craft of front-end development. 💪 🔍 Keywords:  Quote Generator, Text-to-Speech, Clipboard API, Keyboard Shortcuts, Fetch API, Vanilla JavaScript, DOM Manipulation, Front-end Development, UI Design, Developer Portfolio, 30 Projects Challenge 🔖 Hashtags: #FrontendDevelopment #WebDevelopment #JavaScript #HTML #CSS #VanillaJS #QuoteGenerator #CodingJourney #DeveloperChallenge #30DaysOfCode #WebDevProjects #LearnToCode #TalhaCodes

💻 Day 28 of #100DaysLearningChallenge by Saurabh Shukla Sir 📚 Learning Topic: Tailwind CSS – Utility-First Styling Framework 🧠 What I Learned Today: Today, I explored Tailwind CSS, one of the most powerful and modern CSS frameworks for building responsive, beautiful UIs fast. Unlike traditional CSS frameworks,Tailwind is utility-first, meaning we can design directly in our HTML using small, reusable classes — no need to switch between files or write long custom CSS! 💡 Concepts Covered: 👉 What Tailwind CSS is and why it’s used 👉 Installing and configuring Tailwind in a project 👉 Utility-first approach and responsive design 👉 Customizing themes, colors, and breakpoints 👉 Using dark mode, hover states, and reusable components ⚙️ Key Takeaways: ✅ Tailwind provides small utility classes like p-4, bg-blue-500, text-center for quick styling ✅ Helps build responsive designs using prefixes like sm:, md:, lg: ✅ Dark mode and animation support make UI more dynamic ✅ Eliminates CSS bloat with automatic tree-shaking in production 💡 Insight: Tailwind CSS completely changes how we approach styling — it’s like having design directly in code. The utility-first approach speeds up development, keeps code consistent, and is perfect for modern frameworks like React, Next.js, or Django. 🎨⚡ #100DaysLearningChallenge #TailwindCSS #WebDevelopment #Frontend #UIUX #CSSFramework #Coding #LearningEveryday #ProgrammingJourney #Developers #TechLearning #BuildInPublic #CodeEveryday

🚀 I’m excited to share the final project in my Tailwind CSS learning series. In this video, I walk through building a complete and modern AI-focused landing page using React 19, Tailwind CSS 4, and Vite, followed by deploying the project on Vercel. The tutorial is fully practical, structured, and beginner-friendly — covering environment setup, project structure, component creation, styling, Git/GitHub workflow, and deployment. 📌 Live Demo (AI Rev): https://lnkd.in/ekvYHwaX 📺 The full video is available on YouTube — link in the first comment. If you’re interested in frontend development, UI design, or modern web tooling, I hope this project provides real value and clear guidance. #WebDevelopment #FrontendDevelopment #ReactJS #TailwindCSS #JavaScript #Vercel #SoftwareEngineering

One of our bootcamp projects at Dev & Design was to build a functional dashboard, something simple, clean, and easy to use. I created this to-do dashboard using HTML, CSS, and JavaScript, with a focus on clarity, structure, and smooth interactions. The idea was to design a calm, minimal workspace that keeps you productive without distractions. Every part of the layout was carefully thought out, from the spacing and colors to the subtle hover effects. It’s fully responsive and built to adapt nicely across all screen sizes. Take a look 🔗 https://lnkd.in/dRyBkvC7 #DevAndDesign #FrontendDevelopment #DashboardDesign #HTML #CSS #JavaScript #UIUX

🗂️ Revisiting the Basics — Building a Task Manager with Vanilla JS, HTML & CSS Sometimes you’ve got to strip things back to the raw essentials. I’ve been working on a Task Manager app — built entirely with vanilla JavaScript, HTML, and CSS, using localStorage for persistence. Not because I had to, but because I wanted to stay sharp on the fundamentals before leaning too much on frameworks. It’s crazy how much you learn when you can’t rely on React or Next.js to manage state for you. You start appreciating the flow of data, event handling, DOM rendering, and user feedback at the most granular level. Core features I implemented: ~ Add / edit / delete tasks ~ Mark complete / incomplete ~ Daily counts and summaries ~ Persistent data via localStorage It’s a clean, minimal app — but the learning came from the edges: handling empty inputs, syncing UI state properly, and keeping the interface fast and intuitive without any library overhead. Each project like this feels like a reset — a reminder that true skill isn’t about stacking frameworks; it’s about understanding what happens under the hood. Next up: refining the UX, adding keyboard shortcuts, and experimenting with syncing across devices. If you’re building too, don’t underestimate the power of going back to basics. Frameworks make us fast — fundamentals make us solid. #WebDevelopment #VanillaJS #Frontend #LearningByBuilding #BuildInPublic #JavaScript

🚀 Day 54 of #100DaysOfCodingChallenge Today, I created a To-Do List Web Application using HTML, CSS, Bootstrap, and JavaScript 📝 This project might look simple at first glance, but it’s one of the best exercises to strengthen core front-end concepts such as: ✨ Dynamic DOM manipulation ✨ Event handling (adding, deleting, checking tasks) ✨ Managing data using Local Storage ✨ Structuring clean UI with Bootstrap 4 ✨ Writing reusable functions to handle user interactions 💡 Features implemented: ✅ Add new tasks 🗑️ Delete tasks ✔️ Mark tasks as completed 💾 Save tasks even after page reload (via Local Storage) This project helped me understand how to connect JavaScript logic with HTML elements in real-time, and gave me a better grip on how state management works inside web applications. It’s a small step, but one that builds the foundation for more complex apps like Notes, Reminders, or Task Managers! 💪 Onward to the next milestone! #Day54 #100DaysOfCode #WebDevelopment #JavaScript #Frontend #Bootstrap #CodingJourney #LocalStorage #TodoApp #KeepLearning #Motivation #DeveloperLife