Grow your CSS skills. Land your dream job.

My First PSD to 100% CSS/XHTML

  • # April 23, 2008 at 8:08 pm

    I have done some 50/50 stuff in the past but i decided to put my skills to the test and make a full CSS/XHTML site.
    Here’s an image of the PS Design.
    [img]http://img84.imageshack.us/img84/8792/markupimagell7.th.jpg[/img]

    Here’s a link to my final conversion. Link Removed

    Comments? Suggestions?

    Thanks!

    # April 23, 2008 at 11:28 pm

    Looks pretty good William, nice work :D

    I looks like you need to get a little more spacing to the left and right of the gray bar that separates the sidebar from the main content. Typography will be your next big step. The big yellow "W" is a great candidate for using the :first-letter pseudo-class!

    # April 23, 2008 at 11:56 pm

    Neat and congrats, the only thing I think you need to fix is that yellow gradient header, it seems you just placed it there for the hell of it, you need to do something with it, don’t just leave it there looking plain, if you’re not gonna do anything with it, you might want to take it out or reduce the height.

    # April 24, 2008 at 12:41 am

    I Have updated it to better match the photoshop design (use same link above)

    Thanks chris and airforce for the comments!

    # April 26, 2008 at 8:47 am

    Hi wmwood,

    I want to make some suggestions,

    First of all, I think you do not need this little line | between the items of your main navigation, it adds a noise to the navigation.

    Secondly why do you duplicate you navigation below the header, maybe you can move it your footer.

    Next one is I think you should really consider making your font-size a little bigger that can help you with white space management.

    Finally I have looked at your source code @ page-top, if I were you I would write it as

    Code:

    William Wood Web Design – Building Dynamic, Professional Websites

    Instead of giving classes to those items, you can directly target them in your CSS like this,

    Code:
    #page-top h1 {}
    #page-top ul {}
    #page-top li {}

    I just tried to help, best regards. :D

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