# What we are going to build **Author:** Ivan Misic **Published:** 2026-01-24 **URL:** https://ivanmisic.net/blog/ai-tools/what-we-are-going-to-build **TL;DR** The next six chapters build a four-page personal site in plain HTML and CSS, then review it, debug it, save recoverable versions, and publish it. Plain files keep the first version small and let you inspect it in a browser before adding a framework or backend. Use your real content, decide what the site should say and do, and verify the links, mobile layout, accessibility, and published files. Claude can implement the first version, but the product and quality decisions remain yours. The first three modules explained the workflow. Now we will use it to build and publish one small site. Over the next six chapters, you will build four connected pages with a shared design and your own content, then fix what breaks and publish the result. The result should be small enough to finish and good enough to share. ## Why Pure HTML I chose plain HTML and CSS because the first version should open in a browser without a framework or local server. Plain HTML and CSS let you open the first version directly in a browser without installing a web server. Paths, filename capitalization, fonts, and browser behavior can still differ, so test the published site before sharing it. It also keeps the first build small. You can decide whether the structure and design work before adding a framework, database, or server. ## Why a Personal Website Four reasons: **One place for your work.** A personal site makes sense if you need one place for your work, background, and contact details. You control the site and domain, while a social platform controls the profile and its rules. **Simple enough to finish.** We're not building an e-commerce store or a social network. Four pages, clean design, your content. Complex enough to learn real skills, simple enough to actually complete. **Enough to practise the workflow.** The four pages cover navigation, shared styling, responsive layout, project rules, iteration, and debugging. **Use your real content.** Placeholder text hides design and content problems you will meet later. Use your actual story, projects, and contact details, then check how Claude interprets them. This website you're reading started as a holiday project. I wanted something fun to build while I had time off, and a way to actually learn how AI tools work by using them. A simple personal website, nothing fancy. Then I kept going. Added a blog. Then guides. Then a tools directory. Now it's a full content management system with its own architecture, and I'm still adding features because why not? It became a place to finally tackle things on my bucket list. Your personal website might stay simple or grow over time. Building one small site will not teach you everything about AI. It will show you the working loop: describe an outcome, inspect what Claude creates, correct it, test it, and save a version you can restore. ## What You'll Build Four pages: 1. **Home**: Your name, what you do, a brief introduction 2. **About**: Your story, your background, what you care about 3. **Projects**: Three to five things you've done or are working on 4. **Contact**: How people can reach you Plus: - A navigation bar linking all pages - Consistent design across every page - A look that works on phones and computers - Real content about you (not placeholder text) ## What You'll Use Everything from the previous modules: - **CLAUDE.md** to set design preferences (Module 3) - **Iteration** to refine the look (Module 2) - **Screenshots** to give Claude visual feedback (Module 2) - **Specific instructions** to get what you want (Module 2) - **Version control** to save your progress (new in this module) The next chapters apply the workflow from the earlier modules. ## What You Need Before we start building in the next chapter: - **Claude Code installed and working** (Module 1) - **A project folder ready** (we'll create one) - **Some idea of what you want** (we'll figure this out together) - **A few short sessions across the next five chapters** The time depends on how much content you already have and how much design iteration you choose to do. You can start without finished copy or the ability to write HTML and CSS. Claude can create the first version, but you still need to verify the content, links, mobile layout, accessibility, and files that will be published. ## Own the Result Decide what the site should say and do, ask Claude for an implementation, then review and test what it built. You do not need to write every line, but you cannot outsource the judgment. Your feedback can be simple: - "The background should be dark, it feels more professional" - "The heading is too small, make it bigger" - "I don't like the spacing between these sections, tighten it up" - "The about page should lead with my story, not my resume" This is exactly how I built the website you're reading this on. Dark theme, a warm oxblood background, a single orange accent, hairline dividers. Claude wrote every line of code. I told it what to change until it matched the vision in my head. > Next: write down the pages, content, and design constraints before Claude creates files.