Skip to main content

2 posts tagged with "css"

css tag description

View all tags

Frontend Development Starter Guide 🚀

· One min read

Welcome to makeadifference blog!!!! If you're curious about becoming a Frontend Developer (and eventually a Full‑Stack Developer), this starter blog is designed just for you. Think of this as a mini‑course in blog form—covering the what, why, and how, with simple hands‑on exercises you can practice right away.

No prior experience required—just curiosity and consistency.

CSS Basics

· One min read

CSS is what makes websites colorful, big, small, pretty, and fun.
HTML builds the house 🏠 — CSS paints and decorates it 🎨.

Example​

body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}

h1 {
color: #2c3e50;
}

🧪 Exercise​

  1. Create style.css

  2. Change:

    • Background color
    • Font size
    • Text color
  3. Link CSS to HTML

<link rel="stylesheet" href="style.css" />

âś… Goal: Learn separation of structure and style

If you want to learn other concepts in CSS, below is the link from MDN.

MDN CSS Tutorials — structured from beginner basics to advanced topics, with examples and explanations. CSS Tutorials (MDN) https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials

Box Example

Live Editor
<>
  <div
    style={{
      backgroundColor: "orange",
      padding: "20px",
      border: "2px solid black",
      width: "200px",
      textAlign: "center"
    }}
  >
    I am a box
  </div>
</>
Result
Loading...

Button Hover Example

Live Editor
<>
  <button
    style={{
      backgroundColor: "green",
      color: "white",
      padding: "10px 20px",
      border: "none",
      cursor: "pointer"
    }}
    onMouseOver={e => e.target.style.backgroundColor = "orange"}
    onMouseOut={e => e.target.style.backgroundColor = "green"}
  >
    Hover Me
  </button>
</>
Result
Loading...