Ship your first build

    This is where it all comes together. Describe something, let AI build it, put it on a real link, and send it to one person. The quality doesn't matter. The loop does.

    1. 01 Terminal basics
    2. 02 Set up GitHub
    3. 03 Ship your first build
    4. 04 HTML and CSS

    Do this first: Set up GitHub (02)

    Before you start

    In design terms

    Shipping is handing someone a link they can open, not a file they have to download. A prototype in Figma is still a file in your account. A live URL is the product, even when it is rough.

    Where I see designers get stuck

    They wait until the work feels good enough. The point of this page is the loop, not the polish. The other miss is the folder GitHub Pages is watching. If the file is at the top and the setting says /docs, the link stays empty.

    The wrong folder, when index.html is at the root

    /docs

    Words you'll hear

    localhost
    The version that only runs on your computer. Nobody else can open it.
    live URL
    The real link. This is the one you send.
    GitHub Pages
    GitHub's free hosting for a simple site. It turns the repo into a link.
    prompt
    What you tell the AI. It is the brief.

    Shortcuts

    Shortcuts
    Ctrl + CStops the local server so you can run it again.
    Cmd + SSaves the file. On Windows, Ctrl + S.
    git statusShows what you are about to commit.
    git pushSends the commit. Pages can take up to 10 minutes to show it.

    Steps

    1. Pick something small

      One page. A link list, a tiny portfolio, a calculator you can describe in one sentence. If you can't describe it in one breath, it is too big for this loop.

    2. Write the brief

      Open Claude Code or Cursor in the project folder. Say who it's for, what it should do, and what done looks like. You can start from this and change the words.

      A brief you can edit

      One page for a friend who wants three weekend ideas in the city.
Big type, one column, a short list, and a button that says "Send me this".
Plain words. No stock photos.

    3. Look, then give notes

      Open the page. Say what to change in plain words. Make the type bigger. Move the button away from the edge. Run it again. You are art directing, not learning a framework.

    4. Save and push

      git add .
git commit -m "first page"
git push

    5. Put it live

      On GitHub, open the repo, then Settings, then Pages. Source: Deploy from a branch. Branch: main. Folder: / (root). Save. Wait up to 10 minutes, then refresh. The link looks like this:

      https://your-name.github.io/my-first-project/
      GitHub Pages settings with Deploy from a branch selected, branch main, and folder / root.
      Pages source: deploy from the main branch, folder / (root), then Save. Screenshot: GitHub Docs, CC BY 4.0

    6. Send it to one person

      Send the link to one friend and ask one question: what's confusing? That is your first round of feedback. Then edit, commit, and push. Changes can take up to 10 minutes to show.

    Where Claude Code fits

    This page runs through Claude Code or Cursor. When something breaks, paste the error and ask what it means. Ask it to commit and push when you are happy with the page. That is the workflow, not a shortcut around it.

    Watch and read