Directory set-up

Directory & file naming conventions

Before you start you’ll want to create your directories to contain the elements of your website. Name all of your directories with lowercase alpha characters. You’ll want to create your index.php file and .ico file and store them in your root directory.

• css
• downloads
• fonts
• images
• js

• favicon.ico
• index.php

Directory Set-up

CSS

This directory to contain only your CSS3 .txt files. A well designed site should contain no more than 3 .css files. Idealy they should be fonts.css, layout.css and style.css. Many websites fall foul of too many style sheets both external and internal and although there’s nothing inherently wrong with this, more often than not, those sites will have many errors and it becomes very difficult to determine which style’s being overridden by another.

downloads

This directory for storing any documents you may wish visitors to your site to ‘download’. An example of this may be some Portable Document Files or Microsoft word documents.

fonts

This directory for storing any fonts that you want to host and use with your site. This is ONLY for fonts you’re serving along with your website. You may be delivering the fonts used in your website via an online font provider, in which case this folder would be empty. Your font provider would supply you with the url to their server which you would point to through your fonts.css file. If you are serving your own fonts then there should be a .eot, .svg, .ttf and .woff file for each instance of font.

images

This directory for storing any images and graphics that you’re using on your website. Most commonly these will be .jpg’s and gif’s. Remember to optimise all of your graphics and photos before uploading them to this folder. Photoshop offers many compression algorithms as does Adobe Fireworks.

js

At some point you’ll be using some javascript on your site. This could be for anything from form validation to a neat photo gallery. Store your .js files here.

favicon.ico

The .ico file is a graphic file. It’s the icon that appears in your browsers search bar and also appears next to the bookmark when you bookmark a page. It has to be stored in the root directory along with your index file for it to work properly in all browsers.

index.php

Finally, your index file. This of course can be .htm, .html but for the purposes of this exercise we’re skipping those. Move straight to PHP. (These days most servers are set up to interpret .php files). You may be coming to this without knowledge of PHP but don’t worry apart from the suffix (.php) your index.php file can be totally html. As you learn more you can introduce .php snippets and includes. You can’t do this if your file’s named .htm or .html

Contact