F2 — HTML & CSS: Structure and Style

Track 1: Foundations · Build it by hand, on purpose

HTML is the bones; CSS is the skin. We build by hand here — not because AI can't do it, but so you'll recognize and command what AI generates later.

---

🦴 HTML — the structure

HTML is made of elements wrapped in tags. Each says what a piece of content is:

• <h1> … <h6> — headings
• <p> — a paragraph
• <a href="..."> — a link
• <img src="..." alt="..."> — an image (the alt describes it for screen readers — accessibility starts now)
• <button> — a real, accessible button
• <ul> / <li> — lists
• <div> / <section> — grouping/containers

Use the right tag for the meaning. A heading is an <h1>, not a big bold <div>. This is called semantic HTML, and it's free accessibility + SEO.

🎨 CSS — the style

CSS controls how it looks. You select elements and set properties:

h1 { color: navy; font-size: 2rem; }
.card { padding: 1.5rem; border-radius: 8px; }

The big four to learn first:

• Color & background — the palette
• Spacing — margin (outside) and padding (inside); generous spacing reads as "designed"
• Typography — font, size, weight, line-height
• Layout — flexbox and grid for arranging things (and making them responsive later)

---

🛠️ Your mission

Hand-build a one-page profile/bio page: a heading with your name, a short paragraph, an image (with alt text), and a couple of links. Then style it with CSS — your own colors, spacing, and font. No AI for this one; the point is to feel how the pieces fit. Post it!

✅ You're done when…

• Your page uses semantic tags (headings, paragraphs, real links/buttons)
• Images have alt text
• You styled color, spacing, and typography yourself — deliberate choices, not defaults

---

➡️ Next: F3 — JavaScript Fundamentals. Build It Right, Or Don't Build It At All. 🏛️