Basic Website Folder/File Structure

The following is a list of folders with the kinds of files that are in them:

Note: except for the Project (Root) Folder all files and folders should be (a) lowercase (b) have no spaces in the name, (c) start with a letter or number and not a special character.

Project (Root) Folder: This is the main folder for the project and contains ALL other files and folders. On the web, it’s called the root folder. It’s not shown in the image above; consider it the grey box around everything.

HTML files: These are all of the files that end with .html. These should be directly in the Project/Root folder and not in any subfolders. Doing that makes it easy to see all of your files and makes all of the paths to resources (images, CSS files) the same. The only required file is index.html but your sites will all have more .html files.

CSS Folder:

all .css files go here. In this class, we will not write CSS either in style elements on the web page or in attributes of elements. Instead, all CSS will go in external stylesheets and those will be put in the CSS folder. You will need to have at least one stylesheet called either main.css or style.css. I will generally use main, but some of my tutorials and others use style.css so it’s OK if you use that. But don’t use both. Other CSS files should have names referring to what they are styling. Images Folder:

All images go here (.jpg, .png, .gif, etc). You can name the folder images or in.

JavaScript Folder:

All JavaScript files go here. They end in .js. You can name the folder javascript or js.