Site File Structure
Websites are really just a collection of files on a server and servers are just computers. So, websites are a lot like the folders that you have on your hard drive. You can have images, text files, music, etc. On your computer, you find the files you want by navigating through your folders and grabbing what you want with your mouse. On a server, these files are linked together with special html tags that let the browser know if a files is CSS, JavaScript, HTML, or whatever else might be available.
In reality, files can be in any structure you want, but we are using a specific file structure just to be consistent.
Example:
root-|- index.html
|
|- css-|
| |- style.css
|
|- js-|
| |- script.js
|
|- img-|
|- img1.jpg
|- img2.jpg
|- img3.jpg
...
The “root” is the folder that our site lives in. All site files and folders will be in the “root” folder.
The index.html file is the default file that person will see when they visit my domain. This is commonly referred to as “the home page”.
The “css” folder will hold all of the styling files (CSS files). Simple site usually only require one CSS file, but in some cases multiple style sheets will be necessary. Because of this eventuality, we place our styles in a dedicated folder so that we’ll know where to find them all.
The “js” folder will hold all of our JavaScript. Some site require no (or very little) JavaScript, so in some cases we won’t need this folder. However, if the site needs JavaScript, then all the source files will be located in the “js” folder. The primary scripting file will be named “script.js”.
The “img” folder will hold all of the source images that the site is using in its HTML or CSS.
The index.html file, “css” folder, “js” folder, and “img” folder will all be located in the root folder.
Separating Files
The reason that we separate our files is because each type of file serves a different purpose. CSS is for styling content, HTML is for semantically tagging content, images are embedded media in HTML and JavaScript is for providing interactivity with content.
As sites get bigger, separating files into logical folders is an important way of staying organized. It means that you will know where to find the information you seek and what files need editing to fix bugs.
Linking files by type
- TODO