📘 My 13th JavaScript Project "Marksheet Calculator 🧮" For this project, I wanted to build something simple yet practical a Marksheet Calculator that instantly shows total marks, percentage, and grades with a clean, responsive UI! 🎓 💡 Highlights: ✅ Real-time total & percentage calculation ✅ Automatic grade generation ✅ Input validation for accurate results ✅ Smooth, minimal, and mobile-friendly design ⚡ Best part: Watching grades update live as marks change it really feels like a smart digital marksheet! 📊 🌱 Lesson learned: Handling multiple inputs and logical conditions in JavaScript helped me think more like a real developer small logic, big learning! 💻 #JavaScript #FrontendDevelopment #CodingJourney #WebProjects #LearningByDoing #MarksheetCalculator

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

Github: https://lnkd.in/gXq_-4mp 🔥 Project 2/20 — Sticky Header + Scroll Reveal ✨ Today we’re leveling up UI fundamentals. No React, no Tailwind — just pure HTML, CSS & JavaScript flexing its muscles. This sticky navbar transforms as you scroll, paired with silky smooth reveal animations using the Intersection Observer API. Modern devs love frameworks. Great devs master fundamentals first. And we’re building the foundation brick by brick — one clean UI at a time. Because good code isn’t just written — it’s crafted. 📌 Concepts: ✅ Scroll events ✅ Intersection Observer ✅ DOM manipulation ✅ UI animations 🔗 GitHub repo in bio Follow along — 18 more fire projects coming. We’re not coding… we're forging skills. ⚔️🔥 #javascript #webdevelopment #frontend #htmlcssjavascript  #uiuxdesign #frontendprojects #stickyheader #scrollanimation  #vanillajs #cssanimations #intersectionobserver  #learningtocode #webdevjourney #codingreels #codetutorial  #githubproject #frontenddeveloper #webdesign  #softwareengineer #programminglife #buildinpublic  #100daysofcode #devcommunity #codewithme #codeweaver

🎨 Mini Project: DOM Color Play This one started as me just playing around with the DOM, but it turned into a fun little project! 😄 I created a small interface with five boxes and three buttons — Start: begins changing each box’s color randomly every second 🌈 Stop: freezes the colors ⏸️ Clear: resets all boxes to white with black text ⚪ Built using HTML, CSS, and JavaScript, this helped me understand how setInterval(), DOM selection, and style manipulation work together in real time. Sometimes, the best learning happens when you’re just experimenting — no big goal, just curiosity and code. #WebDevelopment #JavaScript #DOM #LearningByDoing #FrontendFun

GitHub: https://lnkd.in/gBBRvbsY 🔥 Project 9/20 – Scroll to Top Button ✨ Create a Smooth Scroll-to-Top Button using JavaScript! ✨ This simple yet modern feature improves your website’s user experience instantly. In this project, I used: ⬆️ window.scrollY to detect scroll position 🌪️ scrollTo({ top: 0, behavior: "smooth" }) for smooth scrolling 💡 CSS for fade-in and pop animations A clean, practical JavaScript project that adds polish to any webpage. Don’t just scroll — glide to the top in style 🚀 #webdevelopment #javascript #frontenddevelopment #frontendprojects #htmlcssjs #scrolltotop #smoothscroll #vanillajs #learnjavascript #programming #webdesign #techcommunity #githubproject #uicomponents #frontendinspiration #modernui #creativefrontend #webdevcommunity #codinglife #developerlife #softwareengineering #programminglife #scrollbehavior #frontendskills #codewithusman

𝗘𝘅𝗽𝗹𝗼𝗿𝗶𝗻𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁: 𝗧𝗵𝗲 𝗣𝗼𝘄𝗲𝗿 𝗼𝗳 𝘁𝗵𝗲 𝗧𝗼𝗴𝗴𝗹𝗲 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻! This week, I’ve been experimenting with JavaScript to make websites more interactive and one of my favorite discoveries is the simple but powerful 𝘁𝗼𝗴𝗴𝗹𝗲() method. I recently built a responsive navigation bar that opens and closes when you click the menu icon, all with just a few lines of code. Here, the magic happens with the .𝘀𝗵𝗼𝘄-𝗹𝗶𝗻𝗸𝘀 class. ✨✨ 𝐊𝐞𝐲 𝐭𝐚𝐤𝐞𝐚𝐰𝐚𝐲: Small and clean code can make a big difference in user experience. Understanding how CSS and JavaScript interact opens the door to endless creative possibilities!✨✨ Have you used 𝘁𝗼𝗴𝗴𝗹𝗲()or a similar approach in your projects? I’d love to hear how you’ve implemented it! #JavaScript #WebDevelopment #Frontend #Coding #LearningByDoing #CSS #ResponsiveDesign

GitHub: https://lnkd.in/eWWEya5y 🔥 Project 4/20 - Image Slider ✨ Create a Smooth Image Slider using JavaScript + CSS Transitions! ✨ Image sliders are timeless — from 2010’s web nostalgia to modern UI trends, they’ve never gone out of style. This project shows how to build a clean, auto-playing image slider using: setInterval() for automatic transitions Arrays to store image elements CSS transitions for buttery-smooth fade effects A perfect mini-project for your portfolio or GitHub repo, showcasing practical DOM manipulation and animation logic. Don’t just code — craft interfaces that move. 🚀 Save this post and tag a dev who loves clean UI ❤ #webdevelopment #javascript #frontenddevelopment #cssanimations #htmlcssjs #webdesign #developers #codinglife #programming #frontendprojects #techcommunity #learnjavascript #dommanipulation #webdevcommunity #uicomponents #codingtutorial #githubproject #setinterval #frontendinspiration #modernui #codewithusman #softwareengineering #webdevlearning #programminglife #creativefrontend

Practicing Local Storage, Dynamic Input Handling, and Theme Persistence Today, I worked on a JavaScript project where I implemented multiple features to enhance user experience: Used Local Storage to save user data and theme preferences, ensuring persistence even after refreshing or closing the browser. Added a dark and light mode toggle that remembers the user’s choice using local storage. Practiced dynamic data handling using both objects and arrays to store user input efficiently. Created a loading spinner animation and clean UI using HTML and CSS for better user interaction. This project helped me strengthen my understanding of DOM manipulation, event handling, and local storage in JavaScript. live demo: https://lnkd.in/drU5s89N Every small project like this brings me one step closer to writing cleaner, more efficient, and scalable code. I’d love to hear your feedback or suggestions for improvement. #JavaScript #WebDevelopment #Frontend #LearningByDoing #LocalStorage #DarkMode #CodingJourney #TalhaMohsin

GitHub: https://lnkd.in/gUz87Czn 🔥 Project 6/20 – Form Validation ✨ Master JavaScript Form Validation Like a Pro! ✨ Form validation isn’t just about catching errors — it’s about building trust through clean UX. This project shows how to create a modern, responsive signup form with real-time validation using: ✅ Regex for smart pattern matching ✅ DOM manipulation for live feedback ✅ Dynamic success & error states ✅ Sleek UI powered by HTML, CSS & JS A must-have mini-project for your frontend portfolio, showcasing your understanding of logic, regex, and DOM feedback. Don’t just build forms — build confidence. 🚀 Save this post and tag a dev who loves clean UI ❤ #javascript #frontenddevelopment #webdevelopment #formvalidation #regex #htmlcssjs #frontendprojects #webdesign #programming #developers #codinglife #learnjavascript #dommanipulation #uicomponents #frontendinspiration #githubproject #modernui #codingtutorial #webdevlearning #codeweaver #softwareengineering #javascriptprojects #frontendskills #webdevcommunity #techcreators #frontenddesign #modernweb

🎯 Learning DOM (Document Object Model) – The Heart of Frontend JavaScript Diving into DOM manipulation to understand how JavaScript interacts with webpages. From selecting elements to handling events and creating dynamic UI—DOM is what makes websites come alive. Key things I'm practicing: ✔ Selecting & modifying elements ✔ Handling events (click, input, scroll) ✔ Creating & removing elements dynamically ✔ Building interactive components Leveling up my frontend skills one step at a time. 🚀 #Frontend #JavaScript #DOM #WebDevelopment #LearningJourney Sheryians Coding School