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 12: CSS Colors, Backgrounds & Gradients

🎨 Day 12: CSS Colors, Backgrounds & Gradients

Colors and backgrounds make UI readable and attractive. Today we cover color systems, choosing accessible colors, background images, and gradients — with examples and patterns.

1. Color formats

  • Named: color: red;
  • HEX: #ff0000 (6-digit) or #f00 (shorthand)
  • RGB: rgb(255,0,0) or with alpha rgba(255,0,0,0.5)
  • HSL: hsl(0,100%,50%) — often easier to adjust lightness/saturation

2. Color accessibility

Ensure sufficient contrast between text and background (WCAG recommends 4.5:1 for normal text). Use tools/libraries or Lighthouse to test contrast.

3. CSS Variables (useful for color themes)

:root {
  --brand: #ff6f00;
  --bg: #fff;
  --muted: #666;
}
header { background: var(--brand); color: white; }

4. Background images & properties

Common properties: background-image, background-size, background-position, background-repeat.

.hero {
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

5. Gradients (linear & radial)

Gradients are images generated by CSS — fast to load and flexible.

/* linear gradient */
button {
  background: linear-gradient(90deg, #ff6f00, #ffab40);
}

/* radial gradient */
.banner {
  background: radial-gradient(circle at 20% 20%, #fff6e0, #ffd180);
}

6. Multiple backgrounds & overlays

.header {
  background:
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url('hero.jpg');
  background-size: cover;
  background-position: center;
}

Try it yourself — Colors & Gradient Hero

Edit the CSS inside the demo and click Run Code to preview. Build a hero with gradient and an overlay.


Practice Tasks

  1. Create a CSS variable palette for primary/secondary/neutral and use it across a small layout.
  2. Build a hero section with a linear gradient and an overlay image layer using multiple backgrounds.
  3. Test color contrast — ensure text passes WCAG AA standards.

Comments

Post a Comment