Mastering React Hooks with useState and Tailwind CSS

🚀 Starting From Basics Again Before jumping into frameworks like React, I decided to strengthen my core , So I started revising HTML, CSS & JavaScript from scratch. Today, I built a simple Snake Game using pure HTML, CSS, and JavaScript , no libraries, no frameworks. While building this, I focused on: Proper HTML structure Clean and reusable CSS DOM manipulation Game logic implementation High score storage using localStorage What I learned from this: ✔ Fundamentals matter more than frameworks ✔ Logic building is more important than styling ✔ Clean and structured code makes debugging easier ✔ JavaScript feels powerful when you truly understand the DOM Deployed it using GitHub Pages 🔗 Live Demo: https://lnkd.in/dgCyVb4r 💻 GitHub Repository: https://lnkd.in/d3AtuqtF This is just the beginning. Next Moving towards React ⚛️ #WebDevelopment #JavaScript #HTML #CSS #React #LearningInPublic

Project 5 is officially live, moving from styling "Digital Masterpieces" with CSS to actually building logic with JavaScript was a challenge I didn't see coming. This is an Interactive Quiz App built entirely with vanilla JS. No frameworks, just raw logic and a few hard-earned lessons about typos. What I built: 🍷 Dynamic question loading 🍷 Real-time score tracking 🍷 Custom feedback logic My biggest takeaway; Coding isn't just about making things look pretty; it's about making them think. You can test the live quiz here: https://lnkd.in/dVbqyGmQ -Quiz-App/ my git repo: https://lnkd.in/dm-Gm7_R To my fellow developers here, what was the first project that finally made JavaScript logic "click" for you? I’d love to hear your stories.👇 #MephEd #MephEdCodingBootcamp #BuildInPublic #JavaScript #WomenInTech #WebDevelopment

Learn in Public - Day 18 🚀 Built a small Tip Calculator project today using HTML, CSS, and JavaScript. The app lets a user enter the bill amount and tip percentage, then calculates the tip amount and total bill automatically. While building it, I practiced: Working with user inputs Event listeners Basic input validation Updating values dynamically using DOM manipulation Simple project, but it helped me understand how JavaScript handles real user input...! Live Project 👇 https://lnkd.in/djHJmixy GitHub Repo 👇 https://lnkd.in/d7cWSbhE #LearnInPublic #JavaScript #WebDevelopment #100DaysOfCode #Day18

Day 57/100 — The JavaScript Event Loop finally made sense 🔄 For a long time I used setTimeout, Promise, and async/await… but honestly — I never truly understood why JavaScript behaves the way it does. Today I learned about the Event Loop — and everything clicked. JavaScript is single-threaded. So how does it still handle multiple tasks at once? Because of 3 things working together: 🧠 Call Stack – where code runs step by step 📬 Web APIs – timers, DOM events, fetch requests handled outside JS 📋 Callback Queue / Microtask Queue – waiting tasks And the Event Loop keeps checking: “Is the call stack empty? If yes → push the next task.” The biggest surprise for me: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Output is NOT what beginners expect: Start End Promise Timeout Because microtasks (Promises) run before macrotasks (setTimeout) 💡 Realization: JavaScript is not slow… I just didn’t understand its scheduling system. Now async code feels predictable instead of magical. Learning fundamentals is like turning chaos into logic. #100DaysOfCode #JavaScript #EventLoop #AsyncJS #WebDevelopment #LearningInPublic

🚀 Just Built a Random Advice Generator using JavaScript & API! I recently built a small project to practice JavaScript API integration. This project fetches random advice using the Advice Slip API and displays it in a simple responsive UI. 🔹 Features • Fetches advice using Fetch API • Uses Async / Await for API handling • Button loading state while fetching data • Random background color change 🎨 • Fully responsive design 📱 🛠 Tech Stack HTML • CSS • JavaScript • Fetch API 📡 API Used https://lnkd.in/dhQVZzs9 🌐 Live Demo 👉 https://lnkd.in/dPePU2n5 💻 GitHub Repository 👉 https://lnkd.in/dJ7nNPCe This project helped me improve my understanding of JavaScript API calls, async programming, and DOM manipulation. I’ll continue building more projects to strengthen my frontend development skills. #javascript #webdevelopment #frontenddevelopment #api #100DaysOfCode #coding

🚀 From Confused to Confident in JavaScript Every developer starts with excitement. At first, JavaScript feels easy — let, const, loops, functions… all simple. Then Hoisting appears. Why is the variable undefined even before it’s assigned? Then comes Closure. How does a function remember variables even after it has finished executing? Three days gone. Still confused. And then… Async JavaScript. Nested callbacks. Callback Hell. Frustration. But quitting wasn’t an option. Promises were learned. Async/Await was understood. The console became a best friend. Small projects were built. And one day, the realization happened: JavaScript isn’t hard. Clarity just takes time. Six months later, the same developer confidently explains: Execution Context. Closure. Event Loop. Async/Await. 💡 Moral Every developer struggles. The ones who don’t stop… are the ones who grow. #MERN #JavaScript #WebDevelopment #Frontend #MERNStack #CodingJourney

03-March-2026 Good day to you, it's another goals filled week.... Here's my piece on -> “The JavaScript Habit That Slowed My Growth” When I started JavaScript, I copied a lot of code & actually, it worked. But I didn’t fully understand it or understand it at all most times & that continuous habit slowed me down. When bugs came, which ofcourse would always show up in most cases, I couldn’t explain what was happening and thar posed as a real issue which was due to copying & pasting but here’s what helped me grow: 1. Writing small scripts from scratch 2. Practicing DOM manipulation repeatedly 3. Understanding scope and closures 4. Debugging without immediately searching StackOverflow Yes JavaScript is powerful, but power without understanding is dangerous. Now when I build interactive features: ->I think about state ->I think about user behavior ->I think about performance Not just “does it work?” Working code is step one. Maintainable code is step two. Are you building or just copying? Lastly....here's a piece of js code for a project I am working on...would certainly love feedbacks on Code screen shots to improve my Js knowledge #LearnWebDevelopment

Built some cool stuff with HTML, CSS & JavaScript 👨💻🔥 Instead of just learning concepts, I focused on building mini projects to understand how things actually work. 🎯 This demo shows: – Real-time interactivity – JavaScript logic in action – Clean & simple UI 🚀 Live Demo: https://lnkd.in/gq48vQf5 📌 Code on GitHub (link in comments) Feedback is welcome! 😊 #ClearingDrafts #FrontendDevelopment #JavaScriptProjects #StudentDeveloper #GitHubPages

🚀 JavaScript Deep Dive: Event Delegation, Bubbling & Capturing Understanding how events flow in the DOM is a game-changer for writing efficient, scalable front-end code. 🔁 Event Bubbling When an event occurs on an element, it first runs on the target, then “bubbles up” to its ancestors. Example: Click a button → button handler → parent div → document. 🎯 Event Capturing The opposite flow. The event travels from the root down to the target before bubbling. Less commonly used but powerful for specific control scenarios. 🧠 Event Delegation Instead of attaching listeners to multiple child elements, attach one listener to a parent and handle events via bubbling. ✅ Better performance ✅ Works for dynamically added elements ✅ Cleaner code 💡 Why it matters? Efficient event handling improves performance and reduces memory usage — especially in dynamic UIs. Small concepts. Big impact. #JavaScript #WebDevelopment #Frontend #ReactJS #CodingTips #SoftwareEngineering