Naming conventions

 Name folders and files completely in lowercase with no spaces. This is because:

Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at, test-site/MyImage.jpg and then in a different file you try to invoke the image as test-site/myimage.jpg, it may not work.

Browsers, web servers, and programming languages do not handle spaces consistently. For example, if you use spaces in your filename, some systems may treat the filename as two filenames. Some servers will replace the areas in your filenames with "%20" (the character code for spaces in URIs), resulting in all your links being broken. It's better to separate words with dashes, rather than underscores: my-file.html vs. my_file.html.

The short answer is that you should use a hyphen for your file names. The Google search engine treats a hyphen as a word separator but does not regard an underscore that way. For these reasons, it is best to get into the habit of writing your folder and file names lowercase with no spaces and with words separated by dashes, at least until you know what you're doing.

What structure should your website have?

1. index.html: This file will generally contain your homepage content, that is, the text and images that people see when they first go to your site. Using your text editor, create a new file called index.html and save it just inside your test-site folder.
2. images folder: This folder will contain all the images that you use on your site. Create a folder called images, inside your test-site folder.
3. styles folder: This folder will contain the CSS code used to style your content (for example, setting text and background colors). Create a folder called styles, inside your test-site folder.
4. scripts folder: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). Create a folder called scripts, inside your test-site folder.

Some general rules for file paths:

• To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g. my-image.jpg.
• To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. subdirectory/my-image.jpg.
• To link to a target file in the directory above the invoking HTML file, write two dots. So for example, if index.html was inside a subfolder of test-site and my-image.jpg was inside test-site, you could reference my-image.jpg from index.html using ../my-image.jpg.
• You can combine these as much as you like, for example ../subdirectory/another-subdirectory/my-image.jpg.