my 1st PSD to HTML&CSS conversion (need review )

[Hesham Ghoniem]

hello

my 1st PSD to HTML&CSS conversion

please review my code & give me your comments

this is the PSD i used :
http://designerfirst.deviantart.com/art/Mode-Free-PSD-Template-331300023

code :
https://gist.github.com/HeshamGhoniem/9011806

preivew :
http://www.heshamghoniem.eb2a.com/mode/

[aspanadare]

Did you checked your page in IE 7-8 ?

[Martin_Muzatko]

yikes, photoshop is a waste of time.
I prefer designing in the browser.

The conversion itself seems fine.

http://www.sketchingwithcss.com/

[ascendantofrain]

For a first time conversion….it’s not bad but it’s also not great.

I second @aspanadare’s comment….have you checked your page in older versions of IE?

Looks like you decided to use HTML5; however, you have not declared a doctype to support your markup. If using HTML5, you might want to look into using an HTML5shiv or HTML5shim to help support those older browsers.

[dsarchy]

I would of said the above is a little harsh given the title ‘my 1st..’

I think its a solid attempt. Matches up well with the original and only a few w3 errors/warnings that can easily be fixed.

Given that facebook and google have dropped earlier IE support I wouldn’t say you need to worry about it either. If you have an audience you could always write hacks.

Things to consider:

-It would be nice to get a little more feedback use the :hover/:active css classes on the menu links to provide some feedback when the use rolls over and clicks

-Think about mobiles and whats going to happen to the site when the screen is smaller that 960px

-Use a framework instead of building it from scratch- Bootstraps great for beginners as its built into dreamweaver CC.

-Png’s will blur when scaled (your icons will be noticeable as they are next to the text). SVG’s get round this (google font awesome to get the idea of how it works).

[Author]

Posts