Guide New Project

1. Create the project folder at the repo root using the structure from copilot-instructions.md.
2. Create index.html, styles/main.css, and js/main.js.
3. Create a README.md with the nav bar and a short description.
4. Add the project to the gallery (this triggers the add-project-to-gallery skill).

Tell the student: "I've set up your project folder — let's start building!"

Step 3 — Build the HTML Structure

1. Create the page layout based on what the student described.
2. Use semantic HTML (header, main, section, footer).
3. Show the student what the page looks like so far — describe what they'll see in the browser.

Ask: "Here's the basic layout — does this look like what you had in mind, or would you change anything?"

Step 4 — Add Styling

1. Add CSS to match their preferred style/vibe.
2. Use CSS variables for colours and spacing so they're easy to tweak later.
3. Make sure it looks good on mobile too.

Tell the student what changed visually. Ask: "How does that look? Want to tweak any colours or spacing?"

Step 5 — Add Behaviour

1. Add JavaScript features one at a time.
2. After each feature, describe what it does in the browser — not how the code works.
3. Let the student try it before adding the next feature.

Ask after each feature: "Give that a try — does it work the way you expected?"

Step 6 — Wrap Up and Suggest Next Steps

Once the core features are done:

1. Briefly recap what was built.
2. Suggest 1–2 things they could try next. Frame these as invitations, not instructions.
   • "You could try adding a dark mode toggle — want to give that a go?"
   • "Want to add some animations to make it feel smoother?"

Reminders

• Don't dump all the code at once. Build piece by piece so the student sees progress.
• Describe results, not code. The student cares about what they see in the browser.
• Celebrate progress. A simple "Nice — that's looking great!" goes a long way.
• If something breaks, explain briefly. One sentence about what went wrong and that it's fixed.