Reading code is a professional skill

Preview shows one rendering today. Source is the contract with the browser — and with every visitor who does not see what you see.

Professionals treat code as evidence. Evidence can be wrong, inconsistent, or inaccessible while still “looking fine” on your laptop.

Why preview lies (sometimes)

Browsers repair broken HTML. An unclosed <div> might hide until your next edit shifts the tree. Reading the tag nesting prevents surprises.

Do this — spot the problems (15 minutes)

Task A — heading jump

What is wrong?

<h1>Contact</h1>
<h3>Email</h3>
<p>hello@example.com</p>

Write one sentence (hint: levels, not spelling).

Task B — broken nesting

What is wrong?

<section>
  <h2>Services</h2>
  <div class="grid">
    <article><h3>Design</h3></article>
</section>

Name the missing piece.

Task C — your practice site

Open my-static-site/index.html from Module 02. Skim the first 40 lines. Write:

1. Something you understand
2. Something you are unsure about (a question counts)
3. One line you would ask AI to explain in plain language

Task D — CSS skim (5 minutes)

Open css/style.css. Do not edit. Write two lines: one rule you recognise; one property you will look up later.

Better prompts come from reading

Vague	Specific
“Make it more accessible.”	“One h1 for the title; section titles h2; add alt on the hero image.”

Check

• You opened a real file, not only preview
• You named at least one structural issue in the snippets

What's next

Next up: HTML semantics in plain English