What does this milestone ask you to do?
You build one real feature on your profile page from start to finish, using every habit from the course. The feature is a favourite birds list: a short list of birds you like and a small form to add another. It is small enough to finish in one sitting and big enough to need a plan, a clear request, a careful check and a commit.
Work through it in order. Plan with the assistant before asking for code. Ask for the first small step with a goal, context and limits. Use the code, read it, and test it in the Preview. Fix what you find. Then save the finished step with Git, so you can always get back to a version that worked.
There is no single right request. The **Prompt check** view shows four ingredients for this milestone: goal, context, limits and small step. Any wording that ticks them works.
Why plan before asking for code?
A plan turns one fuzzy wish into a few small jobs you can check one by one. Ask the assistant for the steps and tell it not to write code yet. You get a short numbered list, and you decide which steps you want and in what order.
Planning also shows you what the feature needs that you might forget: what happens with an empty box, how a screen reader knows what the text box is for, whether the list should survive a page reload. Each of those becomes its own small request later, instead of a surprise hidden in a long answer.
Real AI tools are good at plans. They are also happy to plan far more than you need. Cross out anything you did not ask for, such as accounts, databases or animations, before moving on.
I want to add a favourite birds list to my profile page. What small steps should I take? Explain the plan first, no code yet.How do you ask for the first step?
Combine the ingredients from earlier lessons. Say what you want and what it is for. Show the part of your page the feature goes into. Set limits, such as plain HTML, CSS and JavaScript only. Ask for one small step, here the list and the add form, and leave the rest for later.
A request like the one below gets a reply that fits your page, uses your colours, and does one thing. Leave out the small-step part and the assistant tries to build everything at once, or replaces your whole profile with a template full of things you never asked for.
Please add a favourite birds list to my profile page, with a small form so I can add a bird to the list. Here is my page: <h1>Sam Reyes</h1> and one intro paragraph. Start with the first step only: the list with three birds and the add form. Use plain HTML, CSS and JavaScript only, no libraries.How do you check what comes back?
Press **Use this code** and read every line before you test. Ask yourself the same questions each time: does it do what I asked and nothing more, is any visitor text put in as HTML, are there labels for every input, are there properties or attributes I do not recognise, does it load anything from another address?
Then test like a visitor who does odd things. Add a normal bird. Press Add with the box empty. Type only spaces. Type a name with angle brackets. In this reply, the first test works, and the empty box adds a blank bullet to your list. The text box also relies on a placeholder, which disappears as soon as you type and is not a reliable label for screen readers.
Neither problem shows up if you only try the happy path. Testing the awkward cases is what turns code that looks finished into code that is finished.
How do you fix the problems?
Fix them yourself when the change is small and you understand it. Add a <label> with a for that matches the input's id. In the script, trim the name so spaces do not count, and return early when nothing is left. That is three short edits, and the **Review** view highlights each one next to the AI's version.
When a fix is bigger or you are unsure, ask the assistant for the smallest fix and say exactly what you saw: "When I press Add with an empty box, a blank bullet appears. I expected nothing to happen." A request with what you expected and what happened gets a far better answer than "it's broken".
const name = document.getElementById('new-bird').value.trim();
if (!name) return;How do you ship it with Git?
Once the step works and every test passes, save it as a commit. Check what changed with git status and git diff, stage the file, and write a message that says what the feature does. A good message names the change, not the tool that helped: "Add favourite birds list with add form" tells future you more than "AI changes".
Commit each finished step on its own. If the next step, such as a remove button, goes wrong, you can go back to this commit and try again without losing the list that already works. The save-before-ai lesson and the Git course cover this in more detail. Before you push, check once more that no key, password or private note slipped into the file.
git status
git diff
git add index.html
git commit -m "Add favourite birds list with add form"What comes next for the feature?
Go back to your plan and pick the next step. A remove button for each bird is a good one: ask for it on its own, show the current code, and keep the same limits. After that, saving the list in the browser so it is still there after a reload. Each step follows the same loop: ask, use, read, test, fix, commit.
The Break It exercise is a second feature, a dark theme button, with three problems an AI answer often contains: a made-up CSS property, a misspelled media feature and a button with only a symbol on it. Fix those, test the button, and you have a second commit ready to go.
How is this different from working with a real AI tool?
The assistant here runs on this page and answers from replies written for this milestone. It plans the same way every time and its first step always has the same two problems. A real AI tool gives different answers each time, sometimes gets the label and the empty check right, and sometimes makes different mistakes you have not seen before.
That is why the loop is more useful than any single answer. You stay in charge of what goes on your page: you decide the plan, you ask for one step, you check every line, and you commit only what you have tested and understand.
Field notes
- A plan turns one fuzzy wish into small jobs you can check one by one.
- Ask for one small step with a goal, context and limits.
- Read every line of the reply before you test it.
- Commit with a message that names the change, after the tests pass.
Easy to get wrong
Long answers hide mistakes and are hard to test. One small step is quick to read, quick to test and easy to undo.
Problems hide in the cases you did not think of. A few odd inputs find most of them in under a minute.
Commit messages are how you find a working version later. A message that names the feature makes that quick.
AI tools can describe made-up properties with confidence. Browsers ignore what they do not recognise and show no error.
Questions people ask
Can I build a different feature instead?
Yes, on your own profile. The practice area checks the favourite birds list, but the same loop works for a theme button, a photo gallery or a reading list.
Why does the reply use textContent already?
This pretend reply was written to show that part done right, since an earlier lesson covered it. Real tools do not always do it, so keep checking.
Do I have to commit each step separately?
You don't have to, and it helps. Small commits make it easy to see what each step changed and to undo one without losing the others.
What if the plan the assistant gives me is too big?
Cut it down. Keep the steps you want for now, and ignore anything that adds accounts, databases or outside services you did not ask for.