You're building a portfolio site for a leather artisan in Tunis — a static HTML/CSS site with responsive layout, deployed to a live URL.
The discipline skills: semantic HTML, CSS layout and responsive design, HTML validation, Lighthouse auditing, and one-command deployment to Netlify.
The AI-direction lesson: this is your first time directing AI to build something real. AI will generate code that looks correct in your browser and fails when you run the verification tools. A page with perfect layout that fails HTML validation. A site that loads instantly on your laptop and scores 72 on Lighthouse. The skill is checking AI's output against specific, provided targets — not just eyeballing it — and closing the gap between "looks fine to me" and "passes verification."
Your Role
You are the developer. Yasmine sent an email, and you are building her site.
A web development project follows a pipeline: requirements, design, architecture, build, verify, deploy. A senior developer already handled the upstream work — they wrote the PRD, documented the design direction, broke the build into tickets, and set up the project governance file. Then they left. You are picking up a complete handoff and executing the tail end: build, verify, deploy.
You direct Claude Code to do the implementation. You decide what to build, when, and in what order. You check the output against real targets. When something is wrong, you figure out why and direct a fix. The code is the output. Directing AI through the work is the skill.
What's New
This is the first project. Everything is new.
You have your tools from setup — terminal, Claude Code, Git, GitHub, VS Code. You saw Claude build a simple site from a single prompt in the first-look demo. That was one prompt, one pass, no verification.
This is different. There are verification tools that will tell you whether the output is actually correct — not just whether it looks right. And there is a client who has opinions about how her work is presented.
The hard part is not the code. The hard part is the gap between "looks fine to me" and "passes verification." A page can look perfect in your browser and fail an HTML validation check. A site can load instantly on your laptop and crawl on a phone. The tools to close that gap are built into the project.
Tools
- VS Code — your workspace. File tree, editor, and terminal side by side.
- Claude Code — AI coding agent. The primary tool for building everything.
- Git and GitHub — version control, remote repository, issues, and project board.
- html-validate — catches structural HTML problems that visual inspection misses.
- Lighthouse — Chrome DevTools audits for performance, accessibility, best practices, and SEO.
- Netlify CLI — one-command deployment to a live URL.
- Google Fonts — typography, loaded via link.
Each tool is introduced in context when the work calls for it.
Materials
The senior developer's handoff is complete. You have:
- Yasmine's email — the original request, in her words.
- PRD — the requirements translated into buildable specifics: site structure, pages, content, technical decisions.
- Mockup description — the visual direction: color palette, typography, layout approach, responsive breakpoints.
- CLAUDE.md — the project governance file. Tech stack, file structure, verification targets, and commit convention. This is what Claude Code reads at the start of every session. It is the single source of truth for the project.
- Product photos — Yasmine's leather goods, ready to use.