Skip to main content

Folder Structure

A folder structure is a hierarchical system you use to organize your files. The goal is to have every file (document, photos, etc.) neatly stored in a designated folder—steering clear of standalone files floating around—for faster access.

Rules​

  1. Always use lower case when naming files and folders.
  2. Don't use spaces in file and folder names (use a dash instead).
  3. Only use the characters [a-z], the numbers [0-9] and the dash/hyphen [-]

Tree-diagram for folder structure​

img-2

Folder Structure​

The folder structure in HTML is how you arrange the files and folders in your project.

output-11

Folder Structure in VS-code​

output-12

After Exapanding folders​

output-13

Step:1​

Handeling vs-code for folder structure.

img-2

Step:2​

img-2

Creating the file index.html. The index file is nothing but the file of your project's homepage.

Step:3​

img-2

In this step we created the folder for css files, in this folder all the files of css are stored. The name of file should refer it's page.

Step:4​

img-2

For storing the images or pictures which are used in the project, we created the folder img. With the help of this folder it is easy to access the images with their respective pages, as shown in the above image.

Step:5​

img-2

The above image refers the next folder which is created i.e. icons. In this folder the icons are stored which are used in more than one page of the project. This folder helps to reduces the path conflicts of the files.

Step:6​

img-2

In this step one more folder is added named as pages. In this folder all the pages except the index page are stored. example: contact.html, about.html, etc

Result​

At last the folder structure looks like:

img-2

tip

The file index.html should not present in any folder, it always present outside (alone - as shown in the above images).