Site redesign, step 2: coding HTML/CSS

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

Advertisements

3 thoughts on “Site redesign, step 2: coding HTML/CSS

  1. Pingback: Tanya Nam » A real human being » Site redesign, step 3: creating your WordPress theme

  2. Pingback: Tanya Nam » Blog Archive » Site redesign, step 1: Structure, look and feel

  3. Pingback: Tanya Nam » Blog Archive » Simplifying the site

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s