Coding activity
Web Page Builders
Design a pretend web page on paper! Draw pictures, add buttons, and create a layout. Learn that websites are made of pictures, words, and buttons.
Materials and setup
- paper
- markers
- graph paper
- colored pencils
- ruler
How this changes by age
Pre-K (ages 3–4)
Design a pretend web page on paper! Draw pictures, add buttons, and create a layout. Learn that websites are made of pictures, words, and buttons.
Steps
- Look at a simple website together. Point out the pictures, words, and buttons.
- Draw a 'web page' on paper: add a title at the top, a picture in the middle, and buttons at the bottom.
- What happens when someone clicks your button? Draw what the next page looks like.
- Add colors and decorations to make your page look nice.
- Present your web page to a family member: 'If you click here, you'll see...'
- Tell a grown-up one thing that surprised you.
Learning objectives
- Identify basic web page elements: titles, images, and buttons
- Design a simple page layout on paper
- Understand that clicking buttons leads to new pages
Kindergarten (ages 5–6)
Design a multi-page website on paper. Learn about navigation, links, and how pages connect. Create a website about your favorite topic.
Steps
- Choose a topic for your website (your pet, dinosaurs, your family).
- Design a home page: title, main picture, and 3 menu buttons (About, Gallery, Fun Facts).
- Design each linked page: draw what appears when someone clicks each button.
- Draw arrows between pages showing how they connect (navigation).
- Test your website: have someone 'click' by pointing, and you show them the correct page.
- Tell a grown-up one thing that surprised you.
Learning objectives
- Design a multi-page website with consistent navigation
- Understand how hyperlinks connect pages
- Create informational content organized across pages
Early elementary (ages 6–8)
Write a simple HTML page on paper, then type it into CodePen and watch it come alive in the browser. You're a real web developer the moment your h1 appears.
Steps
- Learn the four most useful HTML tags: <h1> for a big heading, <p> for a paragraph, <img src="..."> for a picture, and <a href="..."> for a link.
- On paper, write a simple HTML page using all four tags. Example: <h1>My Page</h1><p>Hi I'm learning HTML.</p><img src="https://picsum.photos/200"><a href="https://example.com">A link</a>
- With a parent, go to https://codepen.io (no account needed). Click Start Coding or Pen.
- Type your HTML into the HTML box. Press the Run/Save button. Watch your h1 become a big heading on the right side of the screen.
- Change the text inside <h1> and reload. Change the picture URL. Change the paragraph. Notice how each edit instantly changes what you see.
- Tell a family member: 'I'm a web developer now — I wrote a real web page.'
- In one sentence, tell a parent or sibling what surprised you today.
Learning objectives
- Use four core HTML tags (h1, p, img, a) to structure a page
- Type code into a real online editor and see the rendered result
- Connect cause and effect: editing source code changes the displayed page
Upper elementary (ages 8–10)
Build a 3-section 'About Me' page with HTML and CSS. Preview it in CodePen and improve it like a young creator shaping a personal website.
Steps
- Plan your About Me page with 3 sections: (1) heading + a paragraph about you, (2) a list of 3 favorite things using <ul> and <li>, (3) an image of something you love using <img>.
- Open https://codepen.io and start a new pen. In the HTML panel, add an <h1> with your name, a <p> introducing yourself, the <ul> list of 3 favorites, and an <img> tag.
- In the CSS panel, add styling: set a background color on the body (background-color: lightblue;), pick a font (font-family: sans-serif;), and color your h1 (color: darkblue;).
- Tweak margins and padding until the page feels balanced. Try different background colors until you like one.
- Save the pen and reopen it to make sure your work is still there.
- Show the page to a family member on the same device and ask what section is easiest to read or nicest to look at.
- Decide what first impression your page gives. Does it make you seem playful, serious, artistic, or curious?
- In one sentence, tell a parent or sibling what surprised you today.
Learning objectives
- Build a multi-section HTML page using semantic tags
- Apply CSS rules for color, font, and background to style a real page
- Review and improve a web page based on simple feedback
Safety and evidence note
Read the full activity before beginning. An adult should supervise tools, heat, food, outdoor work, movement, and experiments as appropriate. Completion records that the activity was done; the child’s explanation, work sample, photo, or demonstration is stronger evidence of learning than a completion check alone.
Related coding activities
AI Explorers
Train a pretend 'robot brain'! Show it 5 cat pictures and 5 dog pictures, then test if it can guess a new one.
Algorithm Art
Follow step-by-step drawing instructions to create a picture. The instructions are your algorithm! Each step adds one shape or line.
API Restaurant
Play restaurant! The customer tells the waiter what they want, the waiter tells the kitchen, and the kitchen makes it. The waiter is the messenger — just like how computers talk to each other!
App Design Workshop
Design your dream app! Draw what you'd see on a phone screen. What would your app do? What buttons would it have?