Review my .PSD to HTML/CSS attempt [closed]

Question

I'm learning. I wanted to convert this PSD to HTML/CSS: http://www.psdtemplates.com/preview/psd-template-018/

Here's my jsfiddle: http://jsfiddle.net/Joshi3s/FxfTY/

Images/fonts will obviously be left out.

How'd I do as far as the code?

I really tried to use classes (instead of ID's) where I could. Also tried to use CSS3 gradients where I could, works in all browsers except IE (I have IE9). Everything validates except for the gradients.

Any feedback would be great! I eventually want to take a .PSD and code it into a functional Wordpress theme.

Thanks!

Answer 1

The first thing i saw - you use ID´s extensively with only a few classes.

Try to use an ID only where REALLY needed - maybe when targeting a certain div for scripting.

You can always reference to a html-tags inside a class or id!

<div class="firstlevel">
  <h1>Headline</h1>
  <p>Some Text</p> 
</div>

The CSS could look like:

.firstlevel { somesettings: value; }
.firstlevel h1 { h1settings: value; }
.firstlevel p { ... }

Whats nice about classes - you can use them on many different elements - maybe only to highlite something, make it bold, etc...

<div class="firstlevel shadow"> // use more classes
  <h1 class="alert">Alert!</h1>
</div>

.shadow { box-shadow: value;  }
.alert { font-color: #ff0000; }

Just another idea: Consider using html / css frameworks like Blueprint, Bootstrap, 960.gs, yaml etc.

I hope this helps a little :)