Tanya Nam

Site redesign, step 2: coding HTML/CSS

Posted on August 26, 2012 | Categories: Technology

This step is very straightforward, you take your PSD mockup and code it into HTML.

A few things to note:

for me it’s easier to add some creative elements like styling of links, borders, size adjustments directly in HTML (instead of designing it pixel-perfect in PSD)

drop shadows are now easy! yes!

 .shadow {
 -moz-box-shadow: 2px 2px 5px 2px #ccc;
 -webkit-box-shadow: 2px 2px 5px 2px #ccc;
 box-shadow: 2px 2px 5px 2px #ccc;
 }

to make your container elements stretch the full height of the page, use this (I always need to re-google it):
```
 min-height:100%; overflow:hidden
```
I initially code all styles inside the HTML page and then once they are done, move them into CSS file(s)
there’s a neat “lorem ipsum” text generator for Mac, called Little Ipsum
I hand code everything in Coda

Now it’s starting to look good!

Here’s a link to the simple coded HTML, zipped (not 100% perfect).

Next step: moving your code into WordPress templates and creating your theme