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
- Open
about.html. - Keep the same
<header>,<nav>and<footer>used on the homepage. - Add a main heading that says
About the School Coding Club. - Add two paragraphs explaining what the club does and who it is for.
- Add an image with meaningful alt text.
- Add three value cards, such as Be Creative, Build Confidence and Work Together.
- Add a club team section with at least two profile cards.
- Add a joining steps section with an ordered list.
- Add links to the timetable and contact pages where useful.
- Save the file and test the About link from the navigation menu.
Success Checklist
- The page file is called
about.html. - The page explains the club clearly.
- The page includes an image with meaningful alt text.
- The page includes card-style content blocks ready for CSS styling.
- The page includes joining steps or useful next actions.
- The page uses headings and paragraphs in a sensible order.
- The page uses the same navigation links as the other pages.
- The About link opens this page correctly.