Having a good web directory is very important and necessary for web designers and developers, because it makes your work neat and much more easier in terms of linking and referencing. I decided to write Setting up your web directory to show my readers how I structure my directory while working on projects.
The screenshot above shows how my directory is set up for a particular project. As you can see I have different sub-directory (folders) within my main directory (which is usually public_html directory on a live server) and other files. I will go over each of the directory.
1. css: This is the directory (folder) that will contain all Cascading Style Sheet (CSS) files.
2. images: This is our images directory (folder), it will contain all our pictures, logos and images.
3. js: This is the directory (folder) that will contain all JavaScript files.
4. libs: This directory is not needed most times but if you will be using any external libraries then it is important to include them in this directory (folder). Example of external libraries is JQuery.
Once you have your directory set up, you can now focus on actual files (index.html in my case). Let me do a quick example on how to link an image with this our structure.

<img src="images/image.jpg" alt="Alternative Text">

The image link above is relative to the directory. There is no need to have to know the full path (which could be sitename/images/images.jpg) of the project.
Conclusion
To wrap this post up, let me quickly point out somethings. Your directory structure will be determined by the type of project you are working on. Take for install, if I were to working on a project using the OOP paradigm, I will have a classes directory in addition to the ones listed above. What am saying in essence is that you are not limited to the directory structure above.
I hope you find this post helpful. All comments, questions, suggestions and views are all welcome, kindly use the comment box below.
source: http://tutorialslodge.com/setting-web-directory/