First site from scratch basic structure…

[jefftalley]

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:

Jeff Talley Dot Net

• Home
• Vocalist
• Conductor
• Resume
• Contact

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.

Jeff Talley, 2010

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;
}

[craigfarrall]

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.

[jefftalley]

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

[SimonJak]

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

[craigfarrall]

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.

[jefftalley]

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.

[Author]

Posts