Lesson 1.3 · 40 minPlan first, then build

What you will have

The student has a three-page mini-site in practice/mini-site/, built from a plan they read, changed once and approved, with the approved plan saved next to it as PLAN.md.

Video

The video for this lesson is not recorded yet.

Prompts used in this lesson

Part 3 — Demonstration: planning the mini-site

Purpose: I want a small three-page practice website for Brightside Cleaning, a home-cleaning service, so I can practise planning, reviewing and testing with you before we build the real site.

Context: Put everything in a new folder, practice/mini-site/. The pages are Home, Services and Contact. Home: a headline, two sentences about the business, and a link to the Contact page labelled "Request a quote". Services: three services (Regular clean, Deep clean, End-of-tenancy clean), each with a one-sentence description. Contact: the email address hello@brightside.example and the opening hours. Every page has the same navigation at the top and the same footer, and the footer shows the opening hours: Monday to Friday, 8:00–18:00.

Done looks like: I can open practice/mini-site/index.html in a browser and reach all three pages from the navigation on every page. The pages share one look. In a narrow, phone-width window nothing is cut off.

Constraints: Plain HTML and one shared CSS file. No JavaScript, no libraries, no images. No prices anywhere; we add them in a later lesson. Do not change anything outside practice/mini-site/.

Give me a plan first: the files you will create, the order you will create them in, how I can check each step, and anything you are unsure about. The first step of the plan must be to save the approved plan as practice/mini-site/PLAN.md.

One change to the plan: put the "Request a quote" link in the navigation on every page, as the last item, in addition to the one on the Home page. In the plan, mark this item with "(changed by me)" so I can find it later. Show me the updated plan.

Part 4 — Big tasks: steps you can check

Split this plan into steps that can each be checked on their own. For each step, say what I will be able to see or run when it is finished. Stop after each step and wait for me.

Do along

Pause after Part 3 and do steps 1 to 7; do step 8 when the video ends.

1. Pause after Part 3. In your project folder, start claude. Press Shift+Tab until the status bar shows plan mode. (On Windows, if Shift+Tab does nothing, try Alt+M.)
2. Send the mini-site brief from Part 3 as written: lessons 1.4 and 1.6 rely on these pages, these three services, the opening hours in the footer, and no prices. Your own business gets its turn in the homework.
3. Read the plan with the four questions: scope, order, risks, left out. Write one line for each in a notes file or on paper.
4. Ask for one change. Use the navigation change from the lesson or one of your own, such as a different page order or an extra line in the footer. Whatever you choose, ask Claude to mark it "(changed by me)" in the plan.
5. Approve with "Yes, manually approve edits" and approve each file as it comes.
6. Open practice/mini-site/index.html in your browser. Visit all three pages using the navigation. Make the window narrow.
7. Compare the result with PLAN.md, item by item.
8. After Part 5. Type checkpoint please. When Claude has summarised the changes, reply:

OK. Commit with the message "Lesson 1.3: mini-site built from an approved plan" and push.

Check your work

1. Open practice/mini-site/. Expected: PLAN.md, three HTML files (home is index.html) and one CSS file. No other files.
2. Open PLAN.md and search for "(changed by me)". Expected: one item carries the mark.
3. Open the site in the browser and find the thing you changed. Expected: it is there, as the plan says.
4. Go through PLAN.md line by line. Expected: every item is true of the site, and the site contains nothing the plan does not mention.
5. Check the Services page. Expected: three services, no prices.
6. Run git log --oneline -1. Expected: "Lesson 1.3: mini-site built from an approved plan".

Common problems

• Claude started creating files without showing a plan. → You were not in plan mode; the status bar did not say "plan mode on". → Press Escape to stop it. Say: "Delete everything you just created in practice/mini-site/." Enter plan mode and send the brief again.
• Shift+Tab does not change the status bar. → Your terminal does not pass that key through. → On Windows try Alt+M. Or type /plan followed by your brief, or start with claude --permission-mode plan.
• The approval options on your screen are worded differently from the lesson. → Versions and account settings differ. → Look for the option that approves and lets you review each edit, and the option that keeps planning.
• The plan is long and technical. → Say: "Rewrite the plan as at most eight short steps in plain language."
• The plan includes things you did not ask for. → Say: "Remove everything from the plan that the brief did not ask for, and list what you removed."
• PLAN.md was not created. → That instruction got lost. → Say: "Save the plan we approved, including my marked change, as practice/mini-site/PLAN.md. Change nothing else."
• The built site differs from the plan. → Do not fix it by hand. → Say which plan item is not met and ask Claude to make the site match the plan. Lesson 1.4 is about exactly this kind of check.

Homework

About 30 minutes, after the lesson. Nothing later depends on it. Use your own business idea from lesson 0.1 and work only in practice/homework/1.3/; leave practice/mini-site/ as it is. At the end, commit with checkpoint please and the message "Homework 1.3" (no tag).

1. Plan and build for your own business. In plan mode, send your own brief for a one- or two-page practice site in practice/homework/1.3/own-site/. End it with the lesson's last paragraph: plan first, and the first step saves the approved plan as PLAN.md in that folder. Tell Claude to leave out any fact you have not given it. Ask for one change marked "(changed by me)", approve, and let Claude build. Done when: every item in PLAN.md is true of the pages, and you can point to your change in the plan and on the page.
2. Split a big task, plan only. In plan mode, ask for a plan for something larger your business might want one day, such as an online booking page. Send the "split into steps" prompt from Part 4. Write the steps, and what you could check after each, in big-plan.md. Do not approve: keep planning, tell Claude you will not build this, and leave plan mode. Done when: every step in your notes ends with something you could see or run, and Claude created no files for it.
3. Plan or just ask? In plan-or-ask.md, list six changes you can imagine wanting on your own site. Mark each "plan" or "just ask", with a short reason. Done when: all six are sorted and each column has at least one.