HTML & CSS Study Notes 👩‍💻

1‑A  What are HTML and CSS?

HTML (HyperText Markup Language) defines structure and semantics of a web page, while CSS (Cascading Style Sheets) describes its presentation and layout. Together they create everything you see in a browser — text, images, navigation, animations, responsive grids, you name it. Browsers interpret HTML into the DOM (Document Object Model) and apply CSS rules in a priority order called the cascade.

1‑B  Prerequisites & Installation

| Tool | Why you need it | Install | |——|—————–|———| | Web browser (Chrome, Edge, Firefox) | To run & debug pages | Pre‑installed or download | | VS Code (Visual Studio Code) | Free code editor with HTML/CSS intelli‑sense | https://code.visualstudio.com | | Live Server extension | Auto‑reload page on save | VS Code ➜ Extensions ➜ ritwickdey.live‑server | | Optional Node.js 22 LTS (“Jod”) | Sets up modern build tools if you later use bundlers | nvm install 22 or download installer, download link 2 |

1‑C  Project Setup from Scratch

# 1. Create a folder & open VS Code
mkdir my‑first‑site && cd $_
code .

# 2. Add core files
echo "<!doctype html>" > index.html
echo "/* empty */" > styles.css

index.html (minimum viable page)

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF‑8" />
  <meta name="viewport" content="width=device‑width,initial‑scale=1" />
  <title>My First Site</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header><h1>Hello world 🌍</h1></header>
  <main>
    <p class="lead">This page is built from scratch.</p>
    <button id="magicBtn">Click me</button>
  </main>
  <footer>&copy; 2025 Me</footer>
</body>
</html>

styles.css (modern features)

@layer reset, base, components;

/* --- reset layer --- */
@layer reset {
  *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
}

/* --- base layer --- */
@layer base {
  :root { --brand:#0052cc; --radius:0.75rem; }
  body { font-family:system-ui, sans-serif; line-height:1.6; padding:2rem; }
  h1 { color:var(--brand) }
}

/* --- components layer --- */
@layer components {
  #magicBtn {
    padding:0.5rem 1rem;
    border-radius:var(--radius);
    background:var(--brand);
    color:#fff;
    border:none;
    cursor:pointer;
    transition:background 300ms ease;
  }
  #magicBtn:hover { background:#003d99; }
}

Why @layer? It uses CSS Cascade Layers to control rule priority — a 2023+ best‑practice for large code‑bases.【turn2search0】

Run with Live Server → browser auto‑opens http://localhost:5500.

1‑D  Syntax Highlights & Rules

ConceptHTMLCSS
Semantics<header>, <nav>, <main>, <section>, <article>, <footer>Keep class names meaningful (.btn‑primary)
Selectorsn/aelement, .class, #id, attribute [type="text"], pseudo‑classes :hover, relational :has(), :not()【turn2search2】
Responsive<meta viewport>@media (min‑width: 48rem) { … }, Flexbox, Grid
Animationn/a@keyframes, animation, transition【turn2search4】【turn2search5】【turn2search8】
Feature queriesn/a@supports (display:grid) { … }【turn2search9】

1‑E  Validate and Debug

  1. Inspect Element ➜ Elements & Styles panels.
  2. Lighthouse audit (Chrome DevTools ➜ Lighthouse) for performance & accessibility.
  3. W3C Validators: HTML https://validator.w3.org/, CSS https://jigsaw.w3.org/css‑validator/.
  4. Mobile emulation (DevTools ➜ Device toolbar).