Personalize this activity to fit your child!
Log in or create a free account to personalize, save, and track this activity.
Or discover more about TopParent at topparent.ai
Description
Your teen picks a website idea and plans the whole thing on paper before ever touching a screen or code. They sketch each page's layout on grid paper, list the pages on index cards, and map how everything links together with sticky notes.
What to prep
- grid_paper
- index_cards
- sticky_notes
- pencil
- ruler
Play guide
- 1Ask your teen to pick a website idea they would actually want to build - a hobby page, a fan site for a show or game, a small shop, a portfolio of their own art or writing, anything they are into.
- 2Have them list out the pages the site would need, one page per index card (for example, a home page, an about page, a gallery or list page, a contact page). Most first plans land around 4 to 8 pages.
- 3Give them one sheet of grid paper per page and have them sketch the rough layout of each page by hand, marking where the title goes, where the main content blocks sit, and where any buttons or links go. Boxes and labels are enough - no need to draw anything realistically.
- 4Have them arrange the index cards on a table or wall in the order a visitor would move through the site, then use sticky notes and drawn arrows to map which page links to which.
- 5Walk through the whole plan out loud together. Point to the home page and ask "if I click here, where do I end up?" and follow the arrows page by page. Ask about anything that seems confusing or where a visitor might get stuck.
- 6Wrap up by asking what they would want to add, change, or plan next - there is no requirement to finish the whole site in one sitting.
Success signals
Your teen sketches at least 3 to 4 distinct page layouts, each with a different arrangement of title, content blocks, and buttons. They can point to any two pages in their plan and explain how a visitor would move from one to the other. They stay engaged through both the page-listing step and the layout-sketching step without needing a prompt for each new page
If it's tricky
Teen can't think of a website idea: Offer a few starter prompts - a page for a hobby, a fan site for a favorite show or game, a shop for something they would want to sell, or a portfolio of their own art or writing. The idea of pages "linking" to each other doesn't click yet: Act it out physically. Put the home page card down, put a finger on it, then move your finger to whichever card comes next while narrating "clicking this button takes us here." Doing this once together usually makes the abstract idea concrete. They want to skip straight to a real website builder or code editor: Remind them the paper plan is what makes the real build faster later. If they finish early, use the extra time to sketch a second version of one page's layout instead of moving to a screen. Every page ends up looking almost the same: That's a normal first pass. Ask "what's the one thing that makes this page different from the others?" to nudge variety without pressure. They lose interest partway through: A partial plan - just the page list and one or two sketched layouts - is still a real, useful result. There is no requirement to finish the whole site in one sitting.