Back to Unit 6

Unit 6 Website Development - Tutorial 1

1.15 Build the about page

Add a clear about page that explains the purpose of the School Coding Club.

What This Page Should Do

The about page should help visitors understand what the club is, who it is for, what students make and why they might want to join.

This page should reuse the same header, navigation and footer as the homepage so the website feels consistent. It should also include enough content blocks for Tutorial 2 CSS practice.

Suggested Page Structure

<main>
    <section>
        <h2>About the Club</h2>
        <p>The School Coding Club helps students learn how to build websites, solve problems and create small projects.</p>
        <img src="images/about-club.jpg" alt="Students working together on coding projects">
    </section>

    <section>
        <h2>Why Join?</h2>
            <article>
                <h3>Be Creative</h3>
                <p>Design websites, games and app ideas that solve real problems.</p>
            </article>
            <article>
                <h3>Build Confidence</h3>
                <p>Practise coding in small steps with support from others.</p>
            </article>
            <article>
                <h3>Work Together</h3>
                <p>Share ideas, test projects and improve each other's work.</p>
            </article>
    </section>

    <section>
        <h2>Meet the Club Team</h2>
        <article>
            <h3>Ms Patel</h3>
            <p>Club leader and web development mentor.</p>
        </article>
        <article>
            <h3>Student Digital Leaders</h3>
            <p>Older students who help beginners debug and test projects.</p>
        </article>
    </section>

    <section>
        <h2>How To Join</h2>
        <ol>
            <li>Check the timetable page.</li>
            <li>Speak to the club leader in IT2.</li>
            <li>Bring an idea for a project you would like to build.</li>
        </ol>
    </section>
</main>

Build It Yourself

  1. Open about.html.
  2. Keep the same <header>, <nav> and <footer> used on the homepage.
  3. Add a main heading that says About the School Coding Club.
  4. Add two paragraphs explaining what the club does and who it is for.
  5. Add an image with meaningful alt text.
  6. Add three value cards, such as Be Creative, Build Confidence and Work Together.
  7. Add a club team section with at least two profile cards.
  8. Add a joining steps section with an ordered list.
  9. Add links to the timetable and contact pages where useful.
  10. Save the file and test the About link from the navigation menu.

Success Checklist