Muhammad Afzaal Hassan’s Post

Blog Post App (JavaScript Practice Project) Day 9 of my JavaScript learning journey. Built a simple blog post app using HTML, CSS, and Vanilla JavaScript where users can create blog posts with a title, description, and image. Posts are displayed dynamically on the page without using any backend. This project helped me practice real-world DOM manipulation and event handling concepts. ✨ What I learned: Working with querySelector & NodeList Handling events with addEventListener Dynamic UI updates Showing/hiding sections Basic state management in JavaScript 🛠 Tech Stack: HTML CSS JavaScript 🎯 Goal: To improve my JavaScript logic and understand how dynamic content works in real projects. project link: https://lnkd.in/gajJ-s56; github:https://lnkd.in/g8RF2Bbd; #100DaysOfCode #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #MiniProject #DOMManipulation #BuildInPublic #sheriyanscodingschool

Built a simple Todo App using HTML, CSS & JavaScript 🚀 This project helped me really understand how JavaScript works with the browser (DOM) in real life. 🔹 What I learned while building this: How to access input values from the UI How to create elements dynamically using JavaScript How to add and remove tasks using event listeners How to update the UI without reloading the page How to structure small features into clean logic ✨ Features: Add new tasks Delete tasks instantly Live UI updates This small project improved my confidence in core JavaScript concepts like DOM manipulation and event handling. I’m continuously practicing and building mini projects to strengthen my frontend skills. GitHub repo: https://lnkd.in/gk3U52Mp Tech stack: HTML • CSS • JavaScript #JavaScript #FrontendDevelopment #LearningByDoing #WebDevelopment #StudentDeveloper

Today I built a small JavaScript project where: ✅ Multiple buttons perform different actions ✅ Used forEach to handle events ✅ Created <p> dynamically using JS ✅ Worked with prompt() inputs ✅ Applied arrow functions ✅ Used Date().getFullYear() ✅ Practiced DOM manipulation Each button does something unique, like 👉 Taking user input 👉 Performing calculations 👉 Showing current year 👉 Combining first & last name 👉 Clearing output Slowly improving my JavaScript logic and real-world thinking 💪 #JavaScript #WebDevelopment #FrontendDeveloper   #LearningInPublic #CodingJourney #DOM   #SheiyansCodingSchool #Kodex

Ever Wonder How JavaScript Runs in Your Browser? 🚀 Let’s peek under the hood: 1️⃣ JS Arrives in the Browser Your browser downloads HTML, CSS, and JavaScript from the server. JS is just text, but it needs to be understood by the browser to run. 2️⃣ Parsing & Compiling The JavaScript engine (like V8 in Chrome) reads your JS line by line and converts it into machine code your computer can execute. 3️⃣ The Call Stack JS is single-threaded, meaning it runs one task at a time. Functions are added to the call stack when called and removed when finished. 4️⃣ Event Loop & Async Magic JS handles asynchronous tasks (like setTimeout or API calls) with the event loop. Tasks wait in the task queue and are executed when the call stack is empty. 5️⃣ Interaction with the DOM JS manipulates the DOM to update the page dynamically. Changing elements triggers reflows and repaints, so what you see on screen updates instantly. 💡 In a Nutshell: Load JS Parse & Compile Run in Call Stack Handle Async Tasks Update the DOM Understanding this makes debugging and writing efficient JS much easier. #JavaScript #WebDevelopment #Coding #Programming #FrontendDevelopment #WebDevTips #TechInsights #SoftwareEngineering #DeveloperLife #LearnToCode #CodeNewbie #JavaScriptTips #Browser #WebPerformance #AsyncJS

🚀 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

Over the last two days, I’ve been strengthening my JavaScript fundamentals and exploring how things actually work behind the scenes. Here’s what I learned: ✅ Array Methods ✅ reduce() method ✅ Finding maximum in an array ✅ Spread operator (...) ✅ Rest operator ✅ Destructuring (Arrays & Objects) ✅ Introduction to DOM ✅ Query Selectors ✅ Manipulating Attributes ✅ classList property ✅ Page Navigation using JavaScript Understanding how JavaScript interacts with the DOM really changed the way I look at web pages. It’s amazing how dynamic websites are built just by manipulating elements in the browser. Step by step, getting closer to becoming a better developer 💻 #JavaScript #WebDevelopment #FrontendDeveloper #LearningJourney #100DaysOfCode #DOM

🔹 JavaScript Hoisting — Lecture 1 | Hoisting Explained for Beginners One of the most confusing JavaScript concepts for beginners is Hoisting. As a MERN Stack developer, understanding hoisting helps you write predictable and bug-free code. 🎯 What is Hoisting in JavaScript? Hoisting is JavaScript’s default behavior where variable and function declarations are moved to the top of their scope before execution. JavaScript runs code in two phases: ✅ Memory Creation Phase → Variables stored as undefined → Functions stored completely ✅ Execution Phase → Code runs line by line Example console.log(x); var x = 10; Output: undefined Why? JavaScript internally treats it like this: var x; console.log(x); x = 10; Key Understanding ✔ Hoisting moves declarations, NOT values ✔ Happens before code execution ✔ Important for execution flow 🚀 Senior Developer Tip: Always declare variables before using them to avoid unexpected behavior. 🔎 Keywords: JavaScript hoisting, JS execution flow, learn JavaScript, MERN stack JavaScript #JavaScript #MERNStack #WebDevelopment #ProgrammingBasics #LearnJavaScript

🚀 JavaScript Callbacks — Finally Explained (Without the Confusion) If you’ve ever struggled to truly understand callbacks in JavaScript, you’re not alone. Callbacks are one of the most powerful concepts in JS — and also one of the most misunderstood, especially for beginners. I recently revisited a brilliant write-up that explains callbacks using real-life analogies (like going to a laundromat 🧺), simple code examples, and clear reasoning around: ✅ Asynchronous execution ✅ Higher-order functions & callbacks ✅ Why callbacks exist in real-world apps ✅ Callback hell (and why it happens 😵💫) ✅ Inversion of control — the concept most people miss What I really liked is how it connects UI behavior, API calls, and program flow instead of just throwing theory at you. If you’re learning JavaScript or preparing for frontend interviews, this is one of those articles that helps things click instead of memorizing syntax. 📌 I’ll add the link in the comments — highly recommended for anyone serious about mastering JS fundamentals. 👉 Follow Ankit Sharma for more JavaScript, React, and interview-focused learning resources. #JavaScript #WebDevelopment #Frontend #AsyncProgramming #Callbacks #100DaysOfCode #LearningInPublic #SoftwareEngineering

Mastering the DOM in JavaScript | Manipulating HTML & CSS Like a Pro (EP 05) Want to truly understand how websites become interactive? In this episode, we break down the Document Object Model (DOM) and show you how JavaScript can dynamically manipulate HTML and CSS to create powerful, responsive web experiences. In this tutorial, you will learn: ✔ What the DOM is and how it works ✔ How to access elements using getElementById() and querySelector() ✔ How to change text and HTML content dynamically ✔ How to create and remove elements ✔ How to modify CSS styles using classList and style ✔ How to handle user events with addEventListener() ✔ Build a simple dynamic To-Do List project This video is perfect for beginners and intermediate developers who want to strengthen their frontend development skills and understand how JavaScript interacts with web pages behind the scenes. By the end of this tutorial, you’ll be confident manipulating the DOM to build interactive and modern web applications. 🚀 Subscribe for more web development tutorials 💬 Comment your questions below 👍 Like and share if this helped you #JavaScript #WebDevelopment #FrontendDevelopment #DOM #Coding #Programming #FullStackDevelopment

📢 New Video Uploaded | Web Development Series A new video is now live on JDCodebase 🎥 In this tutorial, we build a Todo App using HTML, CSS, and JavaScript from scratch. This video is part of the Web Development Series and is specially designed for beginners. 🔹 What you’ll learn in this video: - Designing a clean Todo App UI using HTML & CSS - Adding and managing todos using JavaScript - Handling user actions like add, edit, and delete - Using DOM manipulation in a real project - Storing todos using localStorage - Understanding how a complete frontend project works step by step - This project helps beginners move from basic concepts to real-world JavaScript usage with practical UI interaction. 👉 Source Code: https://lnkd.in/ggenj-pj 👉 Watch the full video on YouTube: https://lnkd.in/gu-8KeXF More beginner-friendly tutorials and projects coming soon on JDCodebase 🚀 #WebDevelopment #HTML #CSS #JavaScript #JavaScriptProjects #FrontendDevelopment #WebDevSeries #JDCodebase #LearnToCode