Skip to main content

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!) Congratulations, developer! 👏 You’ve successfully completed the 45-Day React.js Roadmap — from understanding the fundamentals to mastering advanced concepts like Redux, Routing, Testing, and Deployment. 📘 What You’ve Learned ✅ React basics — Components, JSX, Props, and State ✅ Hooks — useState, useEffect, useRef, useMemo, and Custom Hooks ✅ Context API and Redux Toolkit for global state management ✅ Routing with React Router & Protected Routes ✅ Data fetching using Fetch API, Axios, React Query ✅ Advanced Patterns — Compound Components, Render Props, HOCs ✅ Styling — CSS Modules, Styled Components, Theming ✅ Animations, Accessibility, Testing, and Performance Optimization ✅ Deployment on Vercel, Netlify, or GitHub Pages 🧩 Final Project Ideas Now that you’re done, build real-world apps to polish your skills: 📝 Task ...
Post a Comment
Read more

📘 Day 36: Understanding the DOM (Document Object Model)

📘 Day 36: Understanding the DOM (Document Object Model)

The Document Object Model (DOM) is a programming interface that represents a webpage as a tree of objects. With JavaScript, we can use the DOM to dynamically manipulate content, structure, and style of a webpage.

🔹 Accessing HTML Elements

  • document.getElementById("id")
  • document.getElementsByClassName("class")
  • document.getElementsByTagName("tag")
  • document.querySelector("selector")
  • document.querySelectorAll("selector")

🧠 Example: Changing Text

document.getElementById("heading").innerText = "Welcome to JavaScript DOM!";

🧠 Example: Changing Styles

document.querySelector("h1").style.color = "orange";
document.querySelector("h1").style.fontSize = "30px";

🔹 Creating & Removing Elements

let newDiv = document.createElement("div");
newDiv.innerText = "This is a new element!";
document.body.appendChild(newDiv);

document.body.removeChild(newDiv);

💡 Practice

Try creating a simple webpage that updates text when a button is clicked.

🧑‍💻 Try It Editor

Comments

Post a Comment

Popular Posts