This won’t be the longest entry in this series, but I did want to take a second to outline the way I organize files. You can come up with your own scheme. There are many. This one works for me, so I use it. The basic idea is to keep everything in a logical, easy to find place every time I make a site.

Let’s take a quick look at the generic file structure I use:

Grab a copy from the starter assets repository if you’d like to play along at home.

Let’s look at each in turn:

_assets

_assets is the place where I keep everything that’s not content. The underscore and the initial “a” mean it’s going to be at the top at most file dialogs. That’s cool since you’ll be in and out of this folder throughout the web development process.

flash

Not surprisingly, this is where all your fancy .swf’s and related files live.

I used to do some Flash. Not so much over the past couple of years. It’s almost turned into a “there be dragons here” kind of thing with the flash folder on projects. Which is a good thing, because it can get complicated in there. All I usually need to know is what SWF to grab and what parameters I need to set with SWFObject.

images

This is where I keep content images. In the case of my site that means gallery images and images used to illustrate movie reviews. It could also mean something like the charts and graphs that would serve as content on a financial site.

scripts

JavaScript lives here.

Why scripts and not the shorter (and therefore lighter weight) js? I thought about it and realized there could potentially be other type of scripts included on a page, so I shouldn’t assume that everything would be JavaScript and named it accordingly.

styles

Site style sheets live in this folder. When starting a project this generally means a screen.css for screen display styles and a print.css for printed pages. The images subfolder contains all interface images. I keep them segregated there so I have simple access to them from the style sheet

.mystyle {
background:#fff url(images/myimage.png) repeat-y;
}

And that’s it- the basic folder structure I start every project with. Hopefully it makes at least a little bit of sense. Almost every example going forward will reference a structure much like this one.

There are other folders that end up in _assets from time to time. For example, inc is a common one used to hold HTML snippets includes and media is used for audio and video files. The ones above are the real standards though, used more often than others, so they’re included in every project.