1.12 Build a simple homepage

Unit 6 Website Development - Tutorial 1

1.12 Build a simple homepage

Combine the HTML skills so far into a complete homepage for the School Coding Club website.

What The Homepage Does

The homepage is usually the first page users see. It should introduce the website topic, make the purpose clear and help users find the next page.

In this project, your homepage will use the same folder structure, file names, HTML structure, headings, paragraphs, images, alt text and semantic HTML you have already practised.

Homepage Starter

<!DOCTYPE html>
<html lang="en-GB">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>School Coding Club</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>School Coding Club</h1>
    </header>

    <main>
        <section>
            <h2>Welcome</h2>
            <p>Learn to build websites, games and apps in a friendly after-school club.</p>
            <img src="images/homepage.jpg" alt="Students learning to code at a computer">
        </section>

        <section>
            <h2>What We Do</h2>
                <article>
                    <h3>Build Websites</h3>
                    <p>Create pages with HTML, then style them with CSS.</p>
                </article>
                <article>
                    <h3>Make Games</h3>
                    <p>Use Scratch, Python and JavaScript to make interactive projects.</p>
                </article>
                <article>
                    <h3>Design Apps</h3>
                    <p>Plan simple mobile app ideas and build prototypes.</p>
                </article>
        </section>

        <section>
            <h2>Next Session</h2>
            <p>Tuesday after school in IT2: Python quiz program.</p>
            <a href="timetable.html">View the full timetable</a>
        </section>
    </main>

    <footer>
        <p>Created for Unit 6 Website Development</p>
    </footer>
</body>
</html>

Build It Yourself

Open the same index.html file you have been building.
Check the file links to css/style.css.
Add a clear <h1> for the website name.
Add a welcome or hero section with an <h2>, paragraph and image.
Add a second section with three activity cards for websites, games and apps.
Add a short notice section that links to timetable.html.
Add one image using the correct path and meaningful alt text.
Add a footer that identifies the website or project.

Common Mistakes

Trying to style the homepage before the HTML structure is complete.
Leaving generic placeholder text instead of School Coding Club content.
Adding an image without checking the file path.
Forgetting that the homepage file should be called index.html.

Success Checklist

Your homepage is saved as index.html.
The homepage has semantic <header>, <main>, <section> and <footer> elements.
The homepage includes a heading, paragraph and image.
The homepage has at least three activity cards ready to style with CSS.
The homepage includes a notice or callout section with a link to the timetable.
The homepage gives users a clear reason to visit the about, timetable and contact pages.
The image has meaningful alt text.
The page opens correctly in a browser.