Skip to content
Hi, Bot
🛠️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
120 min
Level
starter

Materials You'll Need

  • This printable wireframe sheet
  • Pencil
  • Access to Claude or ChatGPT
  • Code editor (Replit, Glitch, 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 on the wireframe: 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.

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