Main Content Area

Starting a Web Project

Every piece of a Volkswagen Golf.
Every part needed to build a VW Golf. Similarly, a website is made up lots of parts stored as files. I haven't found the original source of this image, though most of the sites that show up in a search are several years old.

Introduction

This guide will walk you through setting up a new web project. Though you will undoubtedly develop your own techniques and organizational structure, I strongly recommend following these steps for the purposes of simplicity and ease of use.

Even a simple website will typically contain numerous files, folders and planning documentation, so keeping organized becomes an immensely important task.

The main purpose of all the techniques listed below is to help manage complexity; complexity grows quickly as you design and develop a website.

Any good organizational system will ensure that you can effortlessly find files that you need, modify existing projects and also back up websites so that you don't lose valuable work.

Folder Structure

Folder structure
Above is a diagram describing the folder structure we will be following in class.
There is a specific folder for each type of file to make finding files easier.

Purpose of each file/folder

“Company XYZ Site”
The project folder that contains everything.
This is the folder to duplicate when backing up a web project.
Name it based on the project at hand for easy identification.
source
Meant for all of the working files that will not be uploaded to the website when it goes live.
PSD, DOCX, PDF and other working files can all be stored inside this folder.
You can store your original source images as well as website documentation in this folder.
Keep this folder organized, as you will likely have plenty of files here in the end.
root
Holds the complete contents of the live website.
Only optimized, finished files that a browser can display should be found within it.
css
Meant for storing the stylesheets of the live website.
images
Stores only the optimized images that are to appear on the site.
Images that a browser cannot display should be kept out of this folder. Those can be placed in the source folder until they are converted to a web image format and optimized.
js
Meant to hold any scripts (JavaScript files) that are to be used in adding functionality and interactivity to your website.

Included in the diagram are a few files that are worth starting every web project with:

index.html
The home page of the site.
Must be named exactly the way it is shown for web servers to locate it.
style.css
The main style sheet for the site.
Start your stylesheet by putting the Eric Meyer CSS reset (minified) at the top, which will wipe out all of the default browser styling and create a “clean slate”.
html5shiv.min.js
Defines all the new HTML5 tags within the document object model of Internet Explorer 8 and below.
This version of the script is the minified one, meant for production.

File Naming Conventions

Becoming proficient at naming your files consistently is a goal to strive for. There are several reasons to do so:

  • Files are much easier to locate if their filenames are easily guessable.
  • Search engines use the words found within filenames as keywords
  • Unusual characters are encoded as a series of unintelligible codes, such as %20 for the space character.
  • Windows is a case-insensitive operating system, while Unix/Linux and Mac OS are case-sensitive. Most web servers are case-sensitive environments, so files named without case in mind will cause broken links upon being uploaded.
  • When linking files together, it saves time to know exact folder and file names rather than have look them up or guess them.

For all these reasons, I have come up with a naming convention that works well. Please try to follow the rules below when in class:

  • All filenames are lowercase
  • All file extensions are lowercase, and the full length extension is used whenever one exists. For example: .html instead of .htm
  • Spaces are replaced with dashes or alternatively, underscores
  • Any invalid or special characters are simply removed
  • Files are named based on what they are, or what they contain, as descriptively and concisely as possible
  • Most of these rules apply to folders as well

Some Examples:


			index.html
			our-annual-events.html
			images/sun-lit-garden.jpeg
			biography.html
			js/application.js
			store-location.html
			images/fleur-de-lis-tile.gif
			images/coda-screenshot-001.png
			images/coda-screenshot-002.png

Linking Files Together

All the basic documents should be connect like so:

  • Your style.css file should be connected to index.html via the <link> tag inside the head of the HTML code:
    <link rel="stylesheet" href="css/style.css" />
  • Your html5shiv.min.js file should be connected to index.html using a conditional comment:
    <!--[if lt IE 9]>
    	<script src="js/html5shiv.min.js"></script>
    <![endif]-->

Backing up a Project

To back up a project, zip (archive) the entire project folder and place it wherever you will be keeping backups. Ideally this should be on a separate physical drive, such as a USB key.

You should aim to back up your files at least daily, as computers break, hard drives fail and software crashes. You should strive to avoid having to re-do any work when that happens.

Consider naming the zip file with the date it was created in the filename for easy sorting.

For example:


			company-xyz-site-2015-09-09.zip

Ending Notes

In conclusion, this system will ensure that your work will be protected, you will also know where every file should be off the top of your head. It does take time to adjust to a new workflow, so be patient and your persistence will be rewarded.