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.

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.

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:

• a subheading from Content
• the text under it from Content
• the emoji from Content next to it

Point at them on your screen. Do not move them yet.

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:

1. Drag one topic’s subheading into the open part of the box (for example Football).
2. Drag that topic’s text in under the subheading, still inside the box.
3. Drag that topic’s emoji in too, still 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:

• On the Blocks tab, one topic’s subheading, text and emoji sit inside the same box.
• On the Your web page tab, one coloured frame sits around that topic only.

If a block sits above or below the frame, drag it again into the open part of the box.

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.