Day 07 of 21
Week 1 Build Day — a complete working homepage from scratch
Goal: Today you use everything from Days 1 to 6 together. One complete working homepage. Built by you. Running in your browser.
What to do
Create your branch
Open GitHub Desktop. Create a branch called "week-1-homepage." Confirm it is the active branch before opening Claude Code.
Write your one-page brief
Before opening Claude Code, answer these three questions in a notepad: (1) What does this site do in one sentence? (2) Who is it for? (3) What is the one thing visitors should do on this page?
Open Claude Code and choose accept edits
Open your terminal, navigate to your project folder, type "claude", then press Shift + Tab once to activate accept edits. If your account later exposes auto mode and you know you want it, you can switch later. For this build, accept edits is the safer default.
Build the homepage with the 4-part formula
Type this prompt, filling in your own details from your brief:
I am building a homepage for [what your site does — one sentence]. The visitor is [who they are]. Build a complete homepage with: a navigation bar with Home, About, and Contact links; a hero section with a heading that says "[your headline]" and a button that says "[your call to action]"; a section with three benefit boxes; a simple footer. Style everything clean, minimal, warm, and spacious. Do not add anything I have not asked for.Preview in your browser
Open a NEW terminal window — do not close the one Claude Code is in. If Claude Code built a plain HTML file, find index.html in your project folder and double-click it to open it in your browser. If it built a Next.js or React project (you will know because Claude Code mentioned "npm" or "package.json"), type this in the new terminal window after navigating to your project folder:
npm run devFix one thing at a time
Look at the homepage. Pick one specific thing that is wrong. Use the 4-part formula to fix it — one fix per prompt. Check after each fix before moving to the next.
Merge to main when finished
When the homepage looks right: open GitHub Desktop, switch to "main", and merge "week-1-homepage" into it. Write a commit message like "Week 1 homepage — nav, hero, benefits, footer."
Expected result
You have a complete working homepage — built by you, running in your browser, and merged to your main branch.
Key takeaway
- Branch first. Brief first. Choose the right mode. Use the 4-part formula. Review in browser. Fix one thing at a time. Merge when done. That is the complete build cycle — and you just did it.