Build a Web Page
Plan and build a simple website about your community with Google Sites, then a first look at HTML.
⌨️ Start with your 10-minute typing warm-upBy the end, you will be able to:
- Plan a website by deciding its purpose, audience and pages, and draw a sitemap.
- Build a Google Sites website with several pages, text, an allowed image, a map, a link and one theme, check it in phone preview and publish it safely to the Hub.
- Explain what HTML tags do, and write a tiny web page with
<h1>,<p>,<a>and<img>in Notepad and open it in a browser.
What you need
No computer at home? Print the PDF and practise on paper.
Follow these steps in order
Tick each step when you finish it. Your ticks are saved on this device, so you can stop and come back later.
Learn the ideas ⏱️ 35 min
Read pages 1–4 of the workbook and try every small task. Type your answers straight into the boxes: they save by themselves.
Explore the 3D lab ⏱️ 15 min
Play with the 3D model below. The 🎯 missions tell you exactly what to do next. When you finish every mission, this step ticks itself.
Do the Lab Mission ⏱️ 25 min
Page 5 is the hands-on task. Do it on a real computer, step by step. You need: Internet, the Hub's learning account and Notepad.
Check yourself ⏱️ 10 min
Answer the questions on page 6 without looking back, then check your answers below.
Finished? Check your answers
Plan your community site (Page 2): open task. Look for a clear purpose, a named audience, 3 or 4 pages that match the purpose, and no personal details.
Spot the bug (Page 4): the closing tag is missing its slash. It should be
<p>Kelewele is the best snack</p>.Builder's checklist (Page 5): every row ticked and checked by the mentor; the web address written down (personal accounts:
sites.google.com/view/<name>, for examplesites.google.com/view/our-bozoma-ama; school/Workspace accounts:sites.google.com/<domain>/<name>); the Notepad page opens in the browser and shows a heading, a paragraph, the market picture and a working link.True or False (Page 6)
- A website is a group of web pages joined by a menu and links, at one address: True.
- It is fine to put a classmate's photo and phone number on your site: False.
- Check how your site looks on a phone before publishing: True.
<a href="…">makes a picture: False (it makes a link;<img>makes a picture).- A closing tag has a slash, like
</p>: True.
Written Review Questions
- Purpose (why the site exists), audience (who will read it) and pages (what pages it needs). A sitemap is a simple drawing of all the pages and how they connect, with the home page at the top.
<h1>Welcome</h1>and<p>Akwaaba to our town</p>.
Rate yourself and save your work ⏱️ 5 min
Tick how confident you feel on the last page, then press 🖨 Print / Save as PDF in the workbook to keep a copy. On a shared computer, press Clear my answers when you have saved it.
🎉 Session 38 complete!
Brilliant work. Next up: Session 39: What Is AI? Machines That Learn.
Go to Session 39 →🌐 Web Page Builder
Build a page about your community from blocks, then peek at the HTML behind it and change it. Follow the 🎯 missions on the right: they tell you what to do next.
Stuck? Try this
Most problems are one missed word. Look for the Panic Button or Help box in the workbook.
Refresh the page. On a very old computer it may not show 3D. The workbook still has everything you need.
Answers save on the computer you typed them on. Open the workbook on that same computer and browser.
Ask your mentor, a teacher or a friend. Show them the step number you are on.