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 15: Display, Visibility & Overflow

📘 Day 15: Display, Visibility & Overflow

In CSS, the display property determines how an element is shown on the web page. The visibility and overflow properties control how elements are rendered and how extra content is handled.

🔹 Display Property

Common values:

  • block – takes full width (e.g., <div>, <p>)
  • inline – takes width only as per content (e.g., <span>)
  • inline-block – behaves like inline but allows height and width
  • none – hides element completely
p { display: inline; }
div { display: none; }

🔹 Visibility Property

Controls whether an element is visible or hidden, but hidden elements still take up space.

.hidden { visibility: hidden; }
.visible { visibility: visible; }

🔹 Overflow Property

Controls what happens when content overflows its container.

  • visible – default; overflow is visible
  • hidden – hides extra content
  • scroll – adds scrollbars
  • auto – adds scrollbars when necessary
.box {
  width: 150px;
  height: 100px;
  overflow: scroll;
  background: #f0f0f0;
}

🧠 Practice

Try hiding elements using display: none and visibility: hidden to see the difference.

💻 Live Editor

Comments

Post a Comment