You already know how to build a page, give it structure, and style it with CSS. Today you put those pieces together into a small multi-page website about the real-world problem you investigated earlier.
The site is the deliverable. You can build with blocks, type the code, or mix both. Either route is fine.
Quick recap only: headings, paragraphs, lists, links, images, sections, and the CSS they have already used for colour, font and spacing. Do not re-teach. Name the goal of the lesson once: a small multi-page site about the problem from the investigation and pitch, with a menu that links the pages. Remind them their earlier page work may still be on the step if they want to reuse it; otherwise they start fresh.
Your website is about the problem you investigated and pitched. It should help a reader understand the problem and why it matters.
Aim for this shape:
- A home page that names the problem in plain language and says why it matters to people near you.
- At least one more page that goes deeper: the data you gathered, who is affected, or an idea for how a program or website could help.
- A menu of links so a reader can move between the pages.
- Styling that makes the site readable: colours, fonts and spacing that fit the topic.
Frame the task against the investigation and pitch from earlier in the strand. Students who cannot find their notes can still pick a related Irish topic they remember (for example Dublin Bikes availability, local weather patterns, or fixture congestion) and build from that. Circulate early to catch anyone stuck on topic choice rather than on the builder.
State clearly that blocks and code are both open, and that a student who builds entirely with blocks has still met the outcome. The site is what counts. Keep this step brisk so they reach the builder quickly.
Tip: Going back to blocks discards any hand edits you typed in the code tabs. Only switch back when you mean to start that part fresh.
Open the Web Page Builder. Blocks and the HTML and CSS tabs are all available. Build a small multi-page site about the problem you investigated.
Pages and menu
Keep the writing short and clear. Use real details from your investigation.
Use + Page to add a page and name it clearly (for example Home, Data).
- Start a home page with a clear heading, a short explanation of the problem, and why it matters.
- Add at least one more page with + Page for your data, who is affected, or an idea for how coding could help.
- Add a menu of links on each page. Point each link at the matching page name. Example: if a page is named Data, add a link with the text Data that targets Data, then click it. The Data page should open.
Halfway check
By halfway you should have two pages and clickable links between them. Do not start heavy styling until those links work.
Style, test and save
- Choose colours, fonts and spacing that fit the topic. Use the CSS tab when you want precise control.
- Test and debug: click every link and fix broken targets, missing content, or unreadable styles. If a rule or tag stops working, check the spelling of the tag or selector and look for a missing bracket, quote, or semicolon.
- Save your site: click Save in the Web Page Builder and wait until you see it listed in your saved work.
Done looks like
Minimum (meets the outcome; enough to move on):
- home page plus one short second page
- working menu links both ways
- real content from your investigation
- some CSS applied
Stretch (optional extras):
- a third page
- richer content or next steps a visitor could take
- a consistent colour theme typed in CSS
Interactive activity
Before the lesson: confirm devices can reach the builder and that students can reopen any earlier page work saved against the previous steps.
Suggested timing
- First 4 minutes: topic chosen, home page started.
- Next 11 minutes: second page and menu links in place (checkpoint: two pages and clickable links by halfway).
- Final 11 minutes: styling, test and debug, save.
Predict beat (PRIMM)
Once a student has a menu link in place, pause them briefly before they click it. Ask: "What do you expect to happen when you click this link? Which page should open?" Then let them run the click and compare. If the wrong page opens or nothing happens, that is the debug moment: check the link target against the page name. Same idea for a CSS colour change: predict the part of the page that will change, then apply and check.
Teaching tips
Both routes are open on purpose. Do not push everyone into typing code. A clean site built with blocks fully meets LO 2.5. Encourage students who enjoyed typing CSS last time to keep going in the code tab; encourage others to stay with blocks and only dip into code for one change.
Common snags: menu links that point at the wrong page name, pages with almost no content, and CSS typed on the wrong selector. Ask them to click every link themselves before they call it done. Reinforce the student example: page named Data needs a link that targets Data.
Recovery line: if earlier page work is missing, start fresh from the empty full palette. The investigation notes matter more than the old page.
Minimum is enough to meet the outcome and move on. Stretch is optional only.
Differentiation
- Support: home page with one heading, two short paragraphs, and a two-link menu to one short second page is enough.
- Stretch: a third page, a consistent colour theme typed in CSS, or a short list of next steps a visitor could take.
You combined HTML and CSS into a real multi-page site about a problem you chose. The menu is what turns separate pages into one website a reader can move around.
Whether you built with blocks, typed the code, or mixed both, the same tags and rules were doing the work underneath.
Pull the class together for a short share. Ask two or three students to show one page and name one choice they made (a colour, a page split, a menu label). Keep the point on the site as the deliverable, not on which route they used.
Think about
- What would you add to make this site more useful to someone facing the problem?
- For the last change you made, was it faster in blocks or in code, and why?
Display-only discussion. Students talk; they do not type or save anything. The second prompt is useful class data: it tells you who is ready to lean on the code tab next time and who still thinks in blocks.
Unlock the full learning experience
You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.
This lesson is copyright of Coding Ireland 2017 - 2025. Unauthorised use, copying or distribution is not allowed.