Grow your CSS skills. Land your dream job.

First site from scratch basic structure…

  • # January 2, 2010 at 12:21 pm

    I would like to get your feedback on the beginnings of this site. This is only the basic structure, not a launched site. I haven’t chosen colors yet, although I have colored the sections. Just need to make sure I have a good start.

    Here’s the link: http://web.me.com/jtalley/site_test/index.html

    Here’s the html:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    box
    box
    box

    here’s the css:

    Code:
    body {
    font:normal 75% georgia, serif;
    background: rgb(50,50,50);
    }

    a {
    color: rgba(58,88,120,1);
    text-decoration: none;
    }

    a:hover, a:active {
    color: rgba(255,255,255,.7);
    }

    #page-wrap {
    width: 550px;
    margin: 0 auto;
    clear: both;
    }

    #header h1 {
    font-size: 2em;
    font-family: “Helvetica Neue”;
    color: silver;
    text-indent: 15px;}

    #header {
    height: 150px;
    width: 550px;
    background-color: rgba(58,88,120,.4);
    padding: 8px;
    }

    #nav li {
    background: silver;
    text-shadow: 3px;
    display: inline-block;
    text-decoration: none;
    font-size: 1.3em;
    padding: 4px;
    margin-top: 74px;
    margin-right: 12px;
    }

    #main-content {
    width: 100%;
    background-color: rgba(68,98,130,.9);
    margin: 10px 0 10px 0;
    padding: 8px;
    color: silver;
    }

    #lower-third {
    width: 550px;
    height: 160px;
    background: rgba(58,88,120,.4);
    margin-bottom: 10px;
    padding: 8px;
    }

    .box{
    display:inline-block;
    width: 125px;
    height: 125px;
    padding: 5px;
    background: rgba(68,98,130,.9);
    font: black;
    margin-left: 35px;
    margin-top: 15px;
    color: silver;
    }

    .box img { padding: 2px;}

    #footer {
    float: inherit;
    text-align: center;
    width: inherit;
    height: 150px;
    margin: 0 0 25px 0;
    padding: 8px;
    background: rgba(68,98,130,.9);
    color: silver;
    }

    # January 5, 2010 at 4:54 pm

    Hi,

    Not a bad start, but there is always something which can be improved…

    I am not really the fan of the small width of the content personally, I think this should be made more to a standard size, maybe 960px?

    I feel the header needs some kind of graphic to liven it up.

    Add some line height to the main content text, and possible increase the font size up 1px.

    I think the menu should have a background color change on rollover not just the text

    The heading title "Jeff Talley Dot Net" should be linked to the homepage.

    I think you have a good start I think it just needs some more visually appealing stuff added to it now, images etc just to brighten it up a little bit more.

    # January 5, 2010 at 8:14 pm

    Craig,

    Thanks and I agree. Is my code ok? I just don’t want to get to far into a project/hobby and find out there’s fundamentals missing.

    JT

    # January 5, 2010 at 10:38 pm

    Hi Jeff,

    Your code is fine, your making good use of divs rather then tables and using the stylesheet. I guess you could have added this (height="120" width="120") into a style for the images, but its not a huge deal.

    http://validator.w3.org/check?uri=http% … ne&group=0

    W3C passed you site as being XHTML 1.0 Strict

    I think Craig’s advise is good, remember this is your first design from scratch, you cannot expect it to win any awards, keep it simple, just not to simple :P

    # January 6, 2010 at 2:45 am

    As SimonJak said, your code is good, as you passed the validation test, so your coding style is ok.

    Now just to make it more visually appealing.

    Please post back once you have made changes so I can re-critique it for you.

    # January 9, 2010 at 3:00 pm

    Thanks guys!

    I wanted to make sure I was sound code wise. Now I’m going to work on the pretty.

    I’ll re-post when I have more to see.

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

You must be logged in to reply to this topic.

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