Help with project directory

Hi everyone. I have question whether I am organizing my files and folders correctly for my projects. I tend to have a folder for each of my pages. I also name my html and css files after the page name. Is this correct, or should they always be names index and style? I would appreciate any help with this!

My project directory:

(the html and css folders are for pages on my site talking about those topics)

If you think in terms of a web site, every folder should have an index.html page, even if it is just a dumby static page. This lets us access the page using only its folder name.

/    =>  site root (index.html)
/about.html    =>  about page on the site root
/folder/    =>  access index.html of folder
/folder/gems.html    => page in secondary folder

Folders like ‘cheat-sheets’ and ‘internet’ are generic and not intended as site content so can sit outside of your main projects folder.

Each site should have its own internal folders for resources, images, etc.

/site-root/   i. e., project name
+ css/
+ js/
+ images/
- index.html

Recommend you set your explorer to not hide extensions.

1 Like

Thanks for the response. Each of the folders I showed in my example has an html file as its index, but they’re named after its page name (e.g internet.html). So my root is index.html but all my other pages have a different name. Is this correct? I noticed you have a file named gems.html in your example. The structure I have used is:

+root folder (project name)
+page folder (e.g internet)
+resources folder (internet)
+css folder
+images folder
+resources folder (index)

(edit: the text didnt indent for my example. Certain files are contained in the internet folder, like internet.html and resources folder)

So internet is just one of the pages for content on my site. I put all my css and images in a “resources” folder as well.

1 Like

We can have any names we choose on our pages, so long as there is an index.html page in every folder. On a web facing server, this prevents outsiders from viewing the list of contents in the folder. A minor concern, but also easy to address.

Working on your own machine you will need to turn on the localhost server to simulate a live web. It is at this time that we need to establish good habits that will carry over to production sites.

Name the folder after the project, and give it an index.html page as the landing page of the folder when no name is given in the URL.

1 Like

I see. I think I’ve been over complicating things by creating lots of folders. So the root folder contains all html files, a css folder containing all css files, images folder, and (for down the road) a JS folder. That makes things a lot easier when referencing paths while linking pages. Well thank you for all your help, it means a lot!

1 Like