Grow your CSS skills. Land your dream job.

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

  • # February 14, 2014 at 4:34 pm

    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/

    # March 6, 2014 at 11:28 am

    Did you checked your page in IE 7-8 ?

    # March 7, 2014 at 6:58 am

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

    The conversion itself seems fine.

    http://www.sketchingwithcss.com/

    # March 10, 2014 at 11:06 am

    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.

    # March 13, 2014 at 2:06 pm

    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).

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".