Lesson 05 of 5 in Module 01

⏱️ 01 Min read

Where fundamentals still change the outcome

If AI writes HTML quickly, why learn fundamentals? Because visitors experience structure — headings, landmarks, keyboard paths — not only how pretty the screenshot looks.

Two layouts can look similar. Assistive tech and future maintainers read the tags.

Before / after (2 minutes)

Div-heavy (common AI draft):

<div class="top"><div class="big">Welcome</div></div>
<div class="wrap"><div class="text">Details…</div></div>
<div class="bottom">Contact</div>

More semantic:

<header><p class="logo">My Hobby</p></header>
<main>
  <h1>Welcome</h1>
  <p>Details…</p>
</main>
<footer>Contact</footer>

Same visual idea — clearer meaning. Screen reader users jump by landmarks; search tools prefer real titles.

Callout
AI often outputs div soup first. Your job: steer toward meaning, not only style.

Do this — name one risk (10 minutes)

Task: One concrete risk of publishing AI HTML without reading it. Mention heading structure, semantic landmarks, or link text (“click here”). 4–6 sentences. Who is affected? (keyboard users, screen reader users, future you.)

Optional: One sentence on how Module 05 reduces that risk.

Where this course goes next

Module You will…
M02 Open the IDE, manage folders, preview — start here
M05 Read HTML/CSS on purpose; optional freeCodeCamp depth

Check

  • You can explain why <h1> is not “just big text”
  • You accept read before ship as a habit

What's next

Next up: Module 01 check-in