Today you will tidy your site so a reader can see each topic at a glance.
You will put things that belong together inside a coloured box from Layout, pick a colour for each box, and line two boxes up side by side.
Your site is ready and waiting.
Open the interactive on the board before pupils arrive so the starter site is visible. Remind the class that work saves by itself; nobody needs to go looking for a file.
The new block today is the box block in Layout. Say the full name every time. Never say only “a box”, because Apps also has a text box and a list box.
Lead with grouping in a box only. Side-by-side boxes in a row come later in the lesson; do not preview that combination here.
There is a two-minute teacher peek at the HTML holder later. It is not a skill pupils must master today; keep the three main moves (box, colour, boxes in a row) front and centre.
Do not ask anyone to recolour a box from the CSS tab. The box writes its colour on the block itself, so CSS changes will not show.
A reader scans a page fast. They need to see where one topic ends and the next begins.
A box is a coloured frame that holds things that go together. The subheading, the sentences and the emoji about football can all sit inside one box. The things about music can sit in another.
It is like putting your PE kit in one bag and your reading books in another. Same bag, same kind of thing.
Today’s new block lives in Layout, next to the row and the banner you already know.
Keep this beat short and concrete. Use a real classroom analogy (PE bag, pencil case, lunchbox) so the idea lands before anyone touches a block.
Preview the palette on the board: click Layout and point at box, row and banner so pupils know where to look.
Do not introduce any CSS vocabulary. Colour comes only from the menu on the box block.
Open the interactive. Your site is already there.
Look at the Home page on the Your web page tab.
Find two or three things that are about the same topic. A good set is:
Point at them on your screen. Do not move them yet.
Circulate and listen. Ask pairs quietly to name a topic (Football, Music, Drawing) rather than “these three blocks”. That habit makes the next drag much clearer.
If a pupil’s own saved site looks different from the starter, that is fine. Any tight group of related blocks will work.
Pair talk is oral only. Nothing to type.
Click the Blocks tab.
Click Layout in the palette.
Drag a box block onto your page under your heading. Keep it on the page, not inside anything else yet.
Now put one topic inside the box:
Only one topic should stay in the box. If Music (or another topic) came in too, drag that subheading back out so it sits below the box.
If your page uses different hobby names, pick any subheading, its text and its emoji that are about the same topic.
Done when:
If a block sits above or below the frame, drag it again into the open part of the box.
Model once on the board: palette Layout, then box, then onto the page under the heading. Then model dropping one topic inside.
Watch for pupils opening Apps by mistake and grabbing a text box or list box. If that happens, say calmly: We need the box block in Layout.
Pupils only ever need the on-screen name box. Never say card.
This is the sticky nesting moment. Expect blocks dropped beside the box rather than inside it. Say often: Inside the box block, where it opens out.
On the starter stack, Football, its text, its emoji and Music are chained together. Dragging the Football subheading often brings the whole chain, so Music lands inside the Football box too. That is normal. Show pulling the next topic’s subheading back out until only one topic remains inside.
If a pupil’s site uses different hobby names, any related subheading + text + emoji group is fine.
Your first topic is already inside a box.
Before you change anything, look at the Your web page tab. What do you think will change when you pick a new colour on the box?
Click your box block so you can see its settings.
Find the colour menu on the box block.
Pick a colour that suits the topic. Green for a sport, purple for music, or any colour you like.
Check Your web page. Did the frame change the way you expected?
The colour lives on the block itself. You do not need the CSS tab for this.
Important: box colour is set only from the colour menu on the block. The block writes an inline style, so nothing a pupil types in the CSS tab will recolour it. Head off that path now, before the class starts reading CSS in a later lesson.
The predict question is quick and oral: one or two guesses, then try. That is the PRIMM beat for this lesson.
Let pupils choose freely. There is no right colour. The learning is that the menu on the block is the control.
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.