Why Structure Matters

A project folder keeps all website files together. A clear structure makes it easier to find files, link pages, load images and connect CSS.

Good organisation is especially important when a website grows from one page to several pages.

Recommended Structure

unit-6-website/
    index.html
    about.html
    timetable.html
    contact.html
    css/
        style.css
    images/
        logo.png
        hero.jpg

The HTML pages sit in the main folder. CSS files go in a css folder. Images go in an images folder.

Build It Yourself

1. Create a main folder called unit-6-website.
2. Add index.html, about.html, timetable.html and contact.html.
3. Create a folder called css.
4. Create a folder called images.
5. Create style.css inside the css folder.
6. Add at least one suitable image to the images folder for the School Coding Club homepage.

Common Mistakes

• Saving files in different folders and then losing track of them.
• Putting images directly next to every HTML file when an images folder would be clearer.
• Using spaces or unclear folder names.
• Moving files after writing links and then forgetting to update the file paths.

Success Checklist

• Your website has one main project folder.
• Your homepage is called index.html.
• Your CSS file is stored in a clear folder.
• Your images are stored in an images folder.