Website Structure Explained

How to Make Your Own Website Tutorial

Website structure is really important to get right from the start. This is the seventh module in the How to Make Your Own Website Tutorial.

Website structure is often overlooked by new web developers and as a consequence their websites can later become painful to update and maintain. Moreover changing website structure at a later stage is a big process because all relative paths will need to be updated! Such big restructuring updates often introduce bugs and broken links. So setup your structure from the outset and stick with it.

In the previous module, we built on our HTML and CSS knowledge by learning how to add social media icons to your website in order to help build social media following. In this module we will be covering how to setup the ideal website structure.

Watch It On YouTube

Coming soon!

Website Structure

So far we have learnt the basics of HTML and CSS. Our examples have been limited to one web page, a few images plus a stylesheet. However a real website will be made up of many web pages all linked together, dozens of images and several stylesheets. So the question is: how to organise all this into a clean folder structure?

There are many approaches to structuring a website and I will be showing you my preferred setup. Feel free to define your own or improve on mine. The key is to set this up from the start and stick with it.

The reason I want to cover structure in detail is because it is often overlooked in web development tutorials. People learn HTML and CSS syntax and are then at a complete loss how to put a whole website together.

Setup a folder structure on your local machine as follows:

  • site
    • assets
      • css
      • fonts
      • img
      • js
      • lib

Usually I would place the site folder into a project folder in Documents. So for example for LTCL my site folder would live in Documents/LTCL.

  • site – contains all the top level HTML files
  • assets – groups all the required media files referenced by HTML files
  • css – all your stylesheets
  • fonts – contains your fonts
  • img – groups all your images, this folder may also be organised using sub-directories to add another level of hierarchy
  • js – all your Java Script files
  • lib – keep this for 3rd party content that you want to include in your website

This folder structure will make it super easy to publish too. We will simply upload all the content in the site folder!

Website Structure

 Use Relative Paths

With the structure setup as above in your HTML you should use relative paths as opposed to absolute paths. Remember that a relative path is a path to a file with respect to the current directory. So to reference images use:

<img href="assets/img/myimage.png">

Exercises

1. Setup a website structure for your website you created so far in this tutorial series.

2. Setup a basic index.html file, images and stylesheet.

3. Change all paths to be relative paths.

Summary

That’s the end of “Website Structure Explained” module. We introduced a simple but effective website structure. Next time I will be showing you how to actually publish your website online.

Next Module: Publishing Your Website (coming soon)

If you have any questions or comments please use the form below!