CODING A PORTFOLIO SITE

With a well planned design already in mind, the next step was to recreate the photoshop layout using HTML and CSS.

Here is our layout once more:
Envision Yourself As A Website

Starting from a clean modular slate

I will be using PHP to create this site, and not because of any of the more advanced features of PHP, but just because of the PHP include function. I highly recommend that any novice web designers start using these functions as it allows you to modularize your code.

This is incredibly useful if you know you will be having many individual pages on your site. I will admit that I used to be one to just copy and paste or use the “save-as-and-change” method to create similarly coded content pages. The problem here arises when you have to make changes down the road, you have to go back to every page and change it, as opposed to just changing the included PHP code. We will see how PHP includes come into play later on in the coding of this site.

The first step is create a blank HTML file, and then attach 3 CSS files. They are also attached in order so that I know which files will supersede others. CSS links that come first will have their declarations replaced by the ones that come after if it is the same declaration.

First, I attach a reset file (if you do not know what a reset file is, please check out this great link). I have been using Eric Meyer’s reset file for a long time, it suits the way I usually code things in CSS and I have not found a need to modify it yet. You can check it out here and read Eric’s reasoning behind the elements in the reset file.

After the reset I attach a layout file and a text file. I like to split my CSS so that later on I can easily find declarations and make changes.

Lay me out layout

We now have a skeleton of the index page and similarly all the sub pages, click on the code barf box on the right to see all the code with some annotations, or click here to see the full code.

- ECF