PSD to html conversion.

Question

Hi there,

I have completed designing the template in photoshop. now i want to convert it into html although i am very well aware of all the html, css javascript elements i use firebug too , i have converted many templates till date. my codes does not comprise of the quality it needs. when i download any templates from some premium sites and look onto their codes i feel my code is very bad in shape, my codes crave for improvement. i want to master the proper use of div , ul and li elements, and the css.

is their any proper resource on the web that could teach me how i do it?

is it good if i use 960gs framework?

Answer 1

My Bible: A List Apart

Answer 2

Well, HTML5 Boilerplate provides a layout for quick coding of pages, although you'll need to go through it and pick out what you don't need.

Line25 has a lot of tips on coding sites, including a tutorial on converting from PSD to HTML, and Soh Tanaka's site also has a lot of tutorials.

Answer 3

Such resources as bestpsdtohtml.com can be useful too

Answer 4

css-tricks is another great resource and has some free video content demonstrating converting a photoshop mock up into html and css.
I think this is the first of three showing the end to end process.