1.18 Review the finished Tutorial 1 website

Unit 6 Website Development - Tutorial 1

1.18 Review the finished Tutorial 1 website

Check that the School Coding Club static website is functional, well structured and ready for CSS in Tutorial 2.

Finished Product

At the end of Tutorial 1, you should have a working static website. It will not look polished yet, because the proper CSS styling happens in Tutorial 2, but the HTML product should already work.

unit-6-website/
    index.html
    about.html
    timetable.html
    contact.html
    css/
        style.css
    images/
        coding-club.jpg

Key Design Principles

Principle	What to check
Purpose	The user can quickly tell what the website is about.
Audience	The content suits the people who will use the website.
Navigation	Users can move between pages easily.
Consistency	Pages use a similar structure and menu.
Accessibility	Headings, semantic HTML and alt text make the page easier to use.

Functional Product Test

Open index.html in a browser.
Check that the homepage introduces the School Coding Club clearly.
Click the About link and check that about.html opens.
Click the Timetable link and check that timetable.html opens.
Click the Contact link and check that contact.html opens.
Use the navigation menu to return to the homepage.
Check that the homepage image appears.
Check that the homepage includes activity articles for websites, games and apps.
Check that the about page includes an image, value articles, team information and joining steps.
Check that the timetable page includes Monday to Friday sessions and project highlight articles.
Check that the contact page includes contact details, contact option articles and a contact form.
Check that the page still makes sense if the image does not load, because the alt text is meaningful.
Check that all four pages use <header>, <nav>, <main>, <section> and <footer> where appropriate.
Check that all four pages link to css/style.css.

Common Mistakes

Choosing colours and layout before the HTML content works.
Building pages that do not match the intended audience.
Using inconsistent headings or menus across pages.
Forgetting accessibility basics such as alt text and meaningful link text.
Moving files after testing, which can break image, CSS or page links.

Ready For Tutorial 2 Checklist

Your static website has a clear project folder structure.
Your pages use clear file names.
Your pages link to an external CSS file.
Your homepage and subpages use semantic HTML.
Your navigation links work.
Your homepage image loads from the images folder.
Your image has meaningful alt text.
Your pages include enough sections, articles, lists, images, tables, links and form elements to style in Tutorial 2.
Your HTML uses semantic elements before adding CSS classes in Tutorial 2.
Your content is ready to style with CSS.