Skip to Content

The author

Epiphany Search

As I’ve been writing HTML and CSS for a fair bit of time now I’ve noticed, when building a new template, the time between each load of the template in a browser seems to be getting longer. I’d assume this is due to the experience I have, as I have a pretty good idea of how the CSS I’m writing will display.

As I’ve been writing HTML and CSS for a fair bit of time now I’ve noticed, when building a new template, the time between each load of the template in a browser seems to be getting longer. I’d assume this is due to the experience I have, as I have a pretty good idea of how the CSS I’m writing will display.

So I thought I’d set myself a challenge of:

  1. Find a free web design PSD on the net.
  2. Write the entirety of the HTML first.
  3. Then write all the CSS
  4. Then Write any JavaScript needed
  5. All Without loading it in a browser until I’d finished.

Firstly, I found myself a PSD (from blazrober.com), nothing too complicated but nice enough looking (as I didn’t want to spend hours doing this!). I then printed out the design and scribbled some HTML element names and classes all over it Here is a JPG of the design: And here is my finished blind attempt at building the template:

In Conclusion

Looking at it now, the obvious things I have missed are:

  • I forgot to remove the text-decoration: underline; I set for hovering over links, pretty much across the board.
  • I’ve not set the correct font for the ‘h2’ elements (‘Latest Downloads’), and I’ve not put enough padding above each of them.
  • On my search form I have not set the width of the input text field correctly, causing the submit (GO!) button to drop down onto the next line.
  • Most of the font sizes are not quite correct.
  • The line-height (vertical space between each line of text) of the text content is not high enough
  • My ‘h3’s (‘Find Something’, ‘Search by’) should be smaller and bold
  • The links showing the number of comments and likes (or loves?) should be padded out more, and they don’t line up with the date.

On the whole I don’t think I did too badly really as it doesn’t look too far away from the design. There aren’t any major layout issues with the columns, and it could easily be tidied up and given a little bit of polish to look good. Obviously I’ve not done any cross browser testing on this; in fact I have only viewed it in Chrome 16. You can see my full HTML version here. Has anybody else ever tried doing such a thing? It would be good to compare my attempt against somebody else’s using the same design! - @_davesellers