Building Page by Page | Claude Code Guide

Your home page looks great. Your design rules are captured. Now it's time to build out the rest of the site. The good news: the hard part is done. You've established the look and feel. Building more pages is just applying those same patterns. ## Build Pages One at a Time Don't rush. Build one page, review it, fix what's wrong, then move to the next. Small steps produce better results than one giant leap. Since you already have everything documented - your requirements, your plan, and your design rules - building a new page is simple: ```text Create about.html based on: - Page requirements from _docs/requirements.md - Design rules from .claude/rules/css.md - Same header and footer as index.html ``` Simple as that. Claude reads your requirements to know what content the page needs. It reads your rules to know how it should look. It copies the header and footer from your home page. Everything stays consistent automatically. ## Building Each Page Work through your pages in order. For each one: ```text Create [page-name].html based on: - Requirements from _docs/requirements.md - Design rules from .claude/rules/css.md - Same header and footer as index.html ``` After each page, open it in your browser. Does it match the home page style? If something looks off, run the iteration loop: ```text The spacing on the about page is different from the home page. Make the section padding match what we have on index.html. ``` If you realize your requirements were missing something, update `_docs/requirements.md` first, then tell Claude to rebuild the page with the updated requirements. Keep your documentation as the source of truth. Three prompts later, you have three new pages: ![Completed portfolio home page in browser - dark theme with large outlined IVAN MISIC typography, Product Leader tagline, 20+ years experience stats, and navigation highlighting Home](/images/blog/ai-tools/portfolio-home-page-complete.png) ![About page with The Journey heading and Career Journey story - identical navigation with About link highlighted, consistent dark theme and typography](/images/blog/ai-tools/portfolio-about-page-complete.png) ![Projects page showing case study cards - Enterprise Platform Transformation, API Standardization Initiative, ProductCon Berlin talk, and Self-Service Analytics Dashboard in two-column grid](/images/blog/ai-tools/portfolio-projects-page-complete.png) ![Contact page with Get In Touch heading, Speaking and Connecting sections describing availability for keynotes and coffee chats, same consistent header and navigation](/images/blog/ai-tools/portfolio-contact-page-complete.png) ### Why This Went So Fast Notice something? We spent a lot of time on the home page - iterating on designs, extracting CSS, writing rules. But these three pages? Three quick prompts and they're done. This is the payoff of proper preparation. Your documentation files - `plan.md`, `requirements.md`, `.claude/rules/css.md` - contain everything Claude needs. You're not explaining the design from scratch each time. You're not hoping Claude remembers what you said earlier. It's all written down. This is vibecoding done right. The term - popularized by Andrej Karpathy - means building software by describing what you want instead of writing code. But describing outcomes well is a skill. It requires clarity about what you want, good feedback when things are wrong, and judgment to know when something's right. Without documentation, vibecoding becomes chaos. Every conversation starts from scratch. You re-explain the same things. Styles drift. Things get inconsistent. With your requirements, plan, and rules as a foundation, Claude builds exactly what you specified because it can read exactly what you specified. The difference between vibecoding well and just winging it. If you had a file with all your project descriptions ready to go, you could include that in the prompt too. But even if you don't, it's easy to add real content later with a quick update. The structure is in place. ## Navigation Should Work After all pages exist, check the navigation. Click every link on every page. Each one should take you to the right page, and the navigation should appear consistently on all of them. If a link doesn't work: ```text The "About" link on the home page goes to the wrong URL. It should link to about.html. ``` If the navigation looks different on different pages: ```text The navigation on contact.html looks different from the other pages. Make it match index.html exactly. ``` If navigation styling is inconsistent: ```text Check all pages. The current page should be highlighted in the navigation. On about.html, the "About" link should look different to show it's the active page. ``` ## Making It Work on Phones Your website should look good on a phone, not just on your computer. Test this by making your browser window narrow - drag the edge until it's about phone-width. If things look broken: ```text The website looks broken when the browser is narrow (phone-sized). Make the layout responsive: - Navigation should collapse to a hamburger menu on small screens - Headings should be smaller - Sections should have less padding - Images should scale down - Nothing should go off-screen ``` "Responsive" means "works at different screen sizes." You don't need to understand how it works technically. Just tell Claude what should change when the screen is small. Claude handles the implementation. Test each page at narrow width. What breaks on one page might work fine on another. ## Replacing Placeholder Content At some point, you need real content. This is the part only you can do. For each page, write the actual text and tell Claude: ```text Replace the placeholder text on the home page with this content: Name: [Your Name] Tagline: [What you do in one sentence] Intro: [Your 2-3 sentence introduction] ``` Or paste your content directly: ```text Here's the real content for my about page: I started my career in finance but realized I was more interested in building things than analyzing them. After teaching myself to code, I transitioned into product development... Update about.html with this content. ``` With real content, the site stops looking like a template and starts looking like yours. ## Content Tips If you're stuck writing content, Claude can help: ```text I need to write my "about me" section. Here's my background: - Started in finance, moved to tech - Now work as a product designer - Care about accessibility and clean design Write a friendly, professional 3-paragraph about section. ``` Or give Claude existing content to adapt: ```text Here's my LinkedIn summary. Rewrite it for my personal website. Make it more conversational and less corporate. ``` ## A Consistency Check Before calling the site "done," do a final consistency pass: ```text Review all pages in the project. Check that: - Navigation looks identical on every page - Fonts are consistent - Colors match - Spacing feels the same - The footer appears on all pages Fix any inconsistencies you find. ``` Claude will scan everything and point out (or fix) any drift that crept in. ## What You Have Now Your project folder should look like: ``` my-portfolio/ CLAUDE.md index.html about.html projects.html contact.html css/ styles.css .claude/ rules/ css.md _docs/ plan.md requirements.md archive/ home-v1.html home-v3.html ``` A complete, multi-page website that: - Looks consistent across all pages - Works on phones and desktops - Has real content (or is ready for it) - Follows your design standards You built this. With words. That's pretty remarkable when you think about it. > Next up: Making it look even better with visual polish and refinements.

Building the Rest of Your Site

Build Pages One at a Time

Sign In to Unlock

Check Your Email