Get Organized:
Create a Clean File & Folder Structure

Chefs hate a dirty kitchen and web developers hate a cluttered folder structure. Make your life (and your co-developers') easier by organizing your web environment.
Organization is Vital to any Project
Organizing your web directories is just as important as optimizing your code. No matter the size of your web project, creating a clean environment to work within will pay dividends when you have to add or edit files on a regularly (or even irregular) basis.
As a web developer, your job is similar to a mechanic in that your everyday tasks are dependant on the tools that you use. If your toolbox is cluttered, minute-by-minute, your tasks will take longer to begin and finish. Every web project should begin with proper assembly.
Let's take a look at how you can create a very organized structure and easily reapply it for future projects.
Sloppy Directory Structure

In the example (to the left) of a very poorly organization directory structure, you can clearly see the chaos. The web environment is almost non-existent amidst a heap of muddled files.
The average website consists of over a hundred files. Imagine the trouble in finding a file if this small example was twice or three times the size!
Crisp Directory Structure

A crisp directory root usually consists of five different folders for varying filetypes: images, scripts (javascript files), styles (CSS files), pages, and includes (shared html content). Note that the includes and pages folders are outside of the public realm. This is a secure way of ensuring the integrity of your site's most vital files.
Organizing your web projects is simple and the payoff is huge. Using the example below, you have a great template for your future web directory structures.