When developing sites or projects, it helps to have an organized folder structure so that you can go back and find files easier, as well as have others easily understand how the website’s code works. We’ll also retain files in most of the commonly used folders so that every time you make a new site, you don’t have to rewrite practically identical code.
Let’s start out with this:
This isn’t bad for a folder structure, but if your site uses images for the layout and images for other things such as a gallery, it is also nice to separate content further like so:
If you work with PHP and like to separate your PHP code over several files, you might also want to add an includes folder..
Now that you have your folder setup figured out, let’s move on to the files. We’ll go over what we should put (and not put) in each folder.
Two files will go in the CSS folder, but you can always adjust this to your own needs. I always use a reset CSS stylesheet such as the YUI Reset CSS or Meyer Web’s reset, as well as a style.css, where all the CSS code goes.
Additionally, you may also want to add stylesheets for other media such as a print.css file.
Now we have this:
The images folder will be left empty unless you tend to reuse certain graphics such as an AJAX spinner.
The index file
The first thing to do is determine the ideal extension for the index file. If you work with PHP a lot make it index.php. If you just use static code you can name it index.html.
The next matter is to determine which doctype you’ll be using. You can find a list of doctypes here. We will be using XHTML 1.0 Strict.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> <link href="./css/reset.css" rel="stylesheet" /> <link href="./css/style.css" rel="stylesheet" /> </head> <body> </body> </html>
Of course, yours will almost certainly vary a bit.
Here is the final folder architecture:
And there you have it! A good start for your next site’s file structure. Got an even better idea? Leave a comment.