Lesson 3.1 · 45 minHow web pages work

What you will have

You can open any web page in developer tools, find any element on it, and name its tag and one of its styles. You know the words HTML, CSS, JavaScript, component and framework well enough to use them in a brief to Claude.

Video

The video for this lesson is not recorded yet.

Prompts used in this lesson

Part 6 — From experiment to permanent change

Purpose: make a small visual change to my practice page permanent.

Context: the "about me" page from lesson 0.3 in this folder. In the browser's
developer tools I changed the main h1 heading: color to #0f766e and font-size
to 44px. I like the result.

Done when: the file itself contains these two changes, and nothing else on the
page has changed.

Constraints: edit only that one file. Do not restructure or reformat the rest.
Before you report, re-read the file and confirm that only those two styles
differ, and tell me which lines you changed.

Do along

Work on your own about-me page and pause the video where told.

1. Pause after Part 3. Open your about-me page from lesson 0.3 in a Chromium-based browser.
2. Right-click the main heading and choose Inspect. In the Elements panel, read its tag. In the Styles pane, read two of its styles.
3. Change three things live: one colour, one size, and one piece of text. Reload and confirm they vanish.
4. Open the Console panel, type 2 + 2, press Enter. Note whether the console shows any red messages for your page.
5. Pause after Part 6. Repeat the changes you liked, write down the element and the exact values, and give Claude the prompt from Part 6 with your own element and values.
6. Review the diff, accept it, reload the page.
7. Commit: ask Claude to commit with the message "Lesson 3.1: practice change to about-me page". This lesson has no tag.

Check your work

1. Pick any element on any page, right-click, Inspect. Expected: the element is highlighted in the Elements panel and you can say its tag aloud (for example "p, a paragraph").
2. Look at the Styles pane for that element. Expected: you can name one style and its value (for example "font-size is 18 pixels").
3. Reload your about-me page. Expected: the change Claude made is still there; the changes you made only in DevTools are not.
4. Run git status in the project folder. Expected: nothing left to commit.

Common problems

• No "Inspect" in the right-click menu → you may be in a browser that hides developer tools by default, such as Safari → use Chrome, Edge or Brave for this course.
• DevTools opens but the tree shows only html, head, body → the tree is collapsed → click the small arrows to expand, or right-click the element on the page again and choose Inspect.
• You changed a style and nothing happened → another rule is overriding it; the overridden style is shown struck through → pick the element itself rather than its parent, or tell Claude: "the h1 colour is overridden by another rule; find which one and tell me."
• Claude changed more than you asked → the brief had no constraint → reject the edit and repeat with "edit only this element; change nothing else".
• Claude cannot find the about-me page → the file is in a different folder from the one Claude was started in → give the path to the file in the prompt.

Homework

About 25 minutes, after the lesson. No later lesson depends on it.

1. Inspect a real site. Open the website of a business similar to yours. Inspect its main heading and its main button. If you find a detail you like, add a line about it to docs/design.md under your references. Deliverable: four lines in your notes: each element's tag and one of its styles. Done when: you found both elements without asking Claude.
2. A second permanent change. Pick a different element on your about-me page, such as a paragraph or a link. Experiment in DevTools, then reuse the Part 6 prompt with your element and values, and review the diff. Deliverable: one more commit, no tag. Done when: the change survives a reload and the diff touched only that element.
3. Sort your wishes. Write five things you want your future site to show or do. Label each one HTML, CSS or JavaScript. Deliverable: five labelled lines in your notes. Done when: every line names one of the three and the thing on the page it is about.