Let's make sense of shipping your own site.

• Google Stitch 2.0
• Claude Code (Web)
• GitHub Pages

This is the full written version of an interactive, slide-by-slide lesson deck used in teaching. Everything covered in the deck is below — open the interactive version to work through it with live diagrams, worked examples and a practice quiz where included.

1. Design the layout.
2. Turn it into real code.
3. Ship it.

Design the layout.

Describe the site you want in plain language — the audience, the sections, the mood. Stitch turns that into real screens: hero, nav, content blocks. Then you refine in rounds — "make the hero calmer," "give the projects section more air" — until it looks right.

• One instruction at a time. Don't describe the whole site in one prompt.
• Export the HTML/CSS once you're happy — that's your starting repo.
• This stage is sketching, not shipping. It doesn't need to be production-ready.

Turn it into real code.

Bring the Stitch export into Claude Code, running in your browser — no local setup needed. Ask it to add the contact form, wire up the project grid, make the nav responsive, write tests. It reads the repo, makes the changes, runs checks, and shows you the diff before anything ships.

Describe outcomes, not implementations: "let visitors book a call from the hero" beats "add a button."

• Ask for a review pass — accessibility, broken links, mobile layout.
• This is where the site stops being a mockup and becomes software.

Ship it.

Push the repo to GitHub and turn on Pages in the repository settings. Your site is live at yourname.github.io within minutes. Every future push republishes it. No hosting bill, no server to manage — just a URL you can put on a resume or a business card.

• Point a custom domain at it later with a CNAME file.
• Commit often — your git history is a record of the site improving.

This is the step most courses skip, and the one that makes the other two matter.

What does it take to move an AI-generated prototype to production?

The prototype proves the idea works; production adds everything it skipped — error handling, input validation, authentication, tests, monitoring, and a deployment path someone else can run. Expect the hardening to take longer than the original build, and treat generated code as a first draft you own rather than finished work.

What usually breaks first when a prototype meets real users?

Input you did not anticipate and state you did not persist. Prototypes are demonstrated on the happy path with one user, so the first real failures are unhandled edge cases, missing validation, and data that vanishes on refresh. Close those before performance work — performance problems are rarely what stops an early product.

• Free Jira & Agile Certifications — Three hand-picked, genuinely free credentials worth putting on LinkedIn.

The interactive deck adds live diagrams, step-by-step reveals and practice activities that this written version can't carry.