What We Are Going to Build

Three modules in, zero things built. Theory is nice. Practice is better. Time to build something real. Over the next five chapters, you're going to create a personal website from scratch. Not a toy project. Not "Hello World" with extra steps. A real website with multiple pages, navigation, styling, and actual content about you. When you're done, you'll have something you can put on the internet and send to people. ## Why Pure HTML We're building with plain HTML and CSS. No frameworks, no server, no complicated setup. Just files you can open in any browser. Why? Three reasons: **It runs anywhere.** Double-click an HTML file and it opens. No installing servers, no configuring environments, no "works on my machine" problems. Your website works on any computer with a browser. **No barriers to entry.** Some tutorials lose people at the setup stage. "Install Node, configure webpack, set up a local server..." By the time everything is running, motivation is gone. We skip all that. **It's real practice.** Even if you eventually build dynamic websites with databases and servers, you'll still create static mockups first. Designers do it. Developers do it. Get the look right in HTML, then add the complexity. This guide teaches that foundational skill. If there's interest, I might put together a follow-up guide for building a dynamic website with PHP or another backend. But that's for later. Right now, we're keeping it simple and keeping it working. ## Why a Personal Website Four reasons: **Everyone needs one.** Whether you're job hunting, freelancing, running a business, or just want a place on the internet that's yours, a personal website is universally useful. Social media profiles are rented land. Your website is your own. **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. **Complex enough to learn.** By the time you've built navigation, consistent styling, responsive layout, and real content, you'll have used every technique from the previous modules. CLAUDE.md, rule files, commands, iteration, debugging. All of it. **It's about you.** This is important. We're not building something imaginary with placeholder content. You'll use real information about yourself: your actual story, your real projects, your genuine contact details. Working with real content teaches you how AI handles your specific inputs, not generic examples. You'll see exactly how Claude interprets your words, your style, your requirements. That's the whole point. 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 forever. Or it might grow into something you never expected. Either way, you'll have built something that's yours. And more importantly, you'll understand what this whole AI thing is actually about. Not the hype, but the reality. If you want to be more productive, bring AI into your work, or help your team adopt it, you need to understand how it works. The best way to understand is to do. ## 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) No new concepts. Just application. ## 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 hours across the next four chapters** (not all at once, take breaks) You don't need to have your content written. You don't need to know HTML or CSS. You don't need design skills. Claude handles all of that. You handle the decisions. ## Your Role: Creative Director Here's the mindset for this module. You're not the developer. You're the creative director. A creative director doesn't write code. They don't push pixels. They make decisions: - "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" Claude does the building. You do the deciding. When something doesn't look right, you say what's wrong. When something looks good, you move on. This is exactly how I built the website you're reading this on. Dark theme, brutalist design, heavy borders, electric green accent color. Claude wrote every line of code. I told it what to change until it matched the vision in my head. Your vision. Your decisions. Claude's execution. That's the workflow. ## What Success Looks Like By the end of this module, you'll have: - A working website on your computer - Four pages with real content about you - Navigation that works - A design you're proud of - Your work saved with version control - Optionally, your site published on the internet for free More importantly, you'll have proof that you can build things with Claude Code. Not theoretical knowledge. A tangible thing you can point to and say "I made that." > Next up: planning before building. We're going to decide what your site looks like before Claude writes a single line of code.

What We Are Going to Build

Why Pure HTML

Sign In to Unlock

Check Your Email