Beginner
60 mins
Teacher/Student led
+155 XP

Lines and Space Between Your Parts

Separate the parts of your page with lines you can see and space you cannot, using the line and space blocks from Layout, then take one away again because the page reads better without it.

Teacher Class Feed

Load previous activity

    1 - Start: What We're Building ~5 mins

    Your page has parts now, but they still run straight into each other.

    Today you put lines and space between them, so each part feels like its own thing.

    By the end of the lesson your page will have:

    • a line between each part
    • space above each line so it is not squashed
    • one part you decided looked better without a line

    2 - Two Ways to Separate Things ~4 mins

    There are two ways to keep parts of a page apart.

    • A line draws a thin line right across the page. You can see it.
    • A space makes a gap. You cannot see it, but you can see what it does.

    Most pages use both. A line says this part has ended. A space stops everything looking squashed together.

    They live in different groups: the line block is in Content, and the space block is in Layout.

    They live in different groups: the line block is in Content, and the space block is in Layout.

    3 - Look at Where the Parts Meet ~5 mins

    Find the places on your page where one part ends and the next begins.

    1. Click Your web page.
    2. Find where the sport part ends and the dog part starts.
    3. Click Blocks to come back.

    Check: the two parts run straight into each other, with nothing between them.

    Interactive activity

    4 - Put a Line Between Two Parts ~7 mins

    A line will show where your first part ends.

    This is the block you need:

    {"blocks": {"languageVersion": 0, "blocks": [{"type": "wp_divider", "fields": {}}]}}
    1. Click Content on the left.
    2. Drag a line block above the My Dog subheading.
    3. Click Your web page.

    Check: a thin line runs across the page just above My Dog.

    If it did not work: the line is probably below the subheading instead of above it. Drag it again.

    Interactive activity

    5 - Put a Line Before the Next Part ~5 mins

    Your third part needs the same treatment.

    1. Drag another line block above the Things I Make subheading.
    2. Click Your web page.

    Check: two lines now split your page into three clear parts.

    Interactive activity

    DigitalSkills.org · Online learning platform

    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.

    Hundreds of curriculum-aligned lessons
    Interactive activities in every lesson
    Printable resources & progress tracking
    Copyright Notice
    This lesson is copyright of DigitalSkills.org 2017 - 2025. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more