Skip to content
Hi, Bot
← All projects
Build Studio

Design Your First Website

Wireframe a personal website, get AI help to scaffold code, and customize it into a live site.

Age
8+
Time
2 hr
Level
starter

Materials You'll Need

  • This printable sheet (with a wireframe box)
  • Pencil
  • A grown-up's Claude or ChatGPT account, used together
  • Code editor (Replit or VS Code)
  • A way to deploy (Vercel, Netlify, or GitHub Pages—free)

Hi, Bot Track Projects · design-your-first-website · Print-friendly · hibot.space/track-projects

How It Works

  1. 1

    Sketch a simple site layout in the wireframe box: header (logo + nav), hero (big title + image), about (photo + 3 sentences), projects (3 things you've made), contact (email).

  2. 2

    Fill in your content by hand.

  3. 3

    Show the wireframe to an adult. Together, ask an AI: 'Build a simple website about [topic] with a header, about section, and projects list. Make it colorful.'

  4. 4

    Customize the generated code: change colors, add images, rewrite text to match your wireframe.

  5. 5

    Deploy to a free host (Vercel is fastest: connect your GitHub repo and it auto-deploys).

Your Work

Sketch wireframe. Paste your final deployed URL. Write 1 sentence about what you'd change next time.

Wireframe

Sections

  • Header (logo + nav)
  • Hero (big title + image)
  • About (photo + 3 sentences)
  • Projects (3 things you've made)
  • Contact (email)

Live URL

Next time I'd change

Parent Notes

Help your child prompt the AI clearly ('Make it about [topic], with [specific sections]'). The goal is to see that AI can scaffold code fast, but your child makes it theirs by customizing. Celebrate the live URL.

Reflect

What did you learn? What was hard? What would you do differently next time?

Made by Hi, Bot. Learn more at hibot.space/track-projects