9 Replies - 1979 Views - Last Post: 17 March 2010 - 10:32 AM

#1 williamgeorgegardner   User is offline

  • CEO of GeekTelligence
  • member icon

Reputation: 19
  • View blog
  • Posts: 584
  • Joined: 27-December 09

MY website

Posted 07 March 2010 - 04:32 AM

Hi please could you give me some feedback on my website.
The downloads do not work as I have not linked them to the D.I.C reference sheets yet.
The CSS style I have used is and adapted version of somebody else's and I will be making a lot of changes to it so keep that in mind, also this is my first time using an SSI for the menu bar and stuff like that.
Don't be to harsh I am only 12.
The rest of the code is ALL written by hand and quite a bit of the CSS to.
EDIT: If you type my name in Google my website is on page 1 as the fourth result.

Thanks a lot

This post has been edited by comptechexpert: 07 March 2010 - 04:41 AM


Is This A Good Question/Topic? 0
  • +

Replies To: MY website

#2 coden4fun   User is offline

  • if(coden4fun.NotTired){ ContinueToCode(); }
  • member icon

Reputation: 28
  • View blog
  • Posts: 696
  • Joined: 27-February 09

Re: MY website

Posted 07 March 2010 - 05:08 AM

It's a good start!

You might want to install Firebug Add-On to help you develop your website. Especially if you want to take advantage of quickly seeing which div layout you're having trouble with and can fix.

Off the bat I saw the following

#wrapper{
 width: 900px;
 margin: 0 auto;
 background-color:#666666;
} 



I would add the following
margin-left: 0 auto;
margin-right: 0 auto;



I know you have margin: 0 auto but I'm not sure if that will work with all browsers, and just to be safe I call the left and right one for sure.

You didn't set a height for your website. I would do so. Usually whenever I make website for various clients we go over the discussion that the lowest resolution I shoot for and that they should shoot for monitor wise is 1280x720?

That doesn't mean you should set your width and height to that. I think a good dimension for your site would be 1200 x 640. They'll be white space in their, and it's look pretty full on the resolutions I use, and you'll have plenty of room to put your content. If you don't like it you can play around with it, but that's what I would start out with at least.

Usually the quickest fix for this is to do a ratio of the window by setting the follwoing

#wrapper{
 width: 100%;
 height: 90%;
 margin: 0 auto;
 background-color:#666666;
} 



This of course, is just a suggestion.

I see that you want to have a carbon darkish / lightish gray theme for your website. This is cool! I think this could be accomplish by making sure that all backgrounds are of some tone to gray. NOT BLACK OR RED Hint. Hint. Hint.

Your navigation looks good, but half of the space of your navigation is just empty space. Empty space, is dead space. Fill it up with something. This could be done by either putting a login control on the right side, a search on the right side, or space out your menu by using margin-right: correctly.

Also, I'm quite confused about the info box. I mean what is the info box, and what makes it totally different than the content page? Your content page should be where you store your information.

However, if your page had more content to be displayed then you could use that red box as a sub navigation for the pages that had multiple links. That would be a more suitable reason for the red box. The whole information of the page you click to isn't going to fly, and it's going to confuse the viewers of your website.

I saw in your download page "Java Reference" was listed 4x. Why so many times? Are they different reference sheets for Java or the same? If they're different let the viewer instantly come to that realization, else you only need one link.

Overall I think this would be a good website for you and your buddies to add various tutorials to show your knowledge of how well you understand different computer science topics; however, that's also what a blog is full. But, I can see this as a great learning experience, and who knows you might be able to make the website for your school, or school paper by showing this piece.

I also saw in your HTML code that you used a lot of break lines. I like to do the following.

<div id="mainContent">
...Put content of whatever here
</div>



#mainContent
{
     position: absolute;
     left: 350px;
     top: 125px;
     font-family: Myriad Pro, Helvetica, Arial;
     font-size: 10pt;
     background: #FFF url("../../Images/Content/MainPanel/Background.png") left top;
     color: #333;
}



See what I did? I made the position absolute. This is a good thing if you know precisely where you want the content to go.

Overall I think you did extremely well given this is your first website and your only 12, or is that just an excuse *shifting eyes* JK

Hope this helps! :shuriken:

This post has been edited by coden4fun: 07 March 2010 - 05:19 AM

Was This Post Helpful? 1
  • +
  • -

#3 williamgeorgegardner   User is offline

  • CEO of GeekTelligence
  • member icon

Reputation: 19
  • View blog
  • Posts: 584
  • Joined: 27-December 09

Re: MY website

Posted 07 March 2010 - 05:27 AM

Thank you SO MUCH that is a great review, I will try and make the changes today and then could you have another look if I post that I have made the differences?
The reason I have more than one reference sheet is because they are all the same from D.I.C and other wise the info box overlaps the pages(and that is also what the break tags are for).
I will add more info about the website when I post saying that I have updated it.

Quote

Overall I think you did extremely well given this is your first website and your only 12, or is that just an excuse *shifting eyes* JK

I am only 12!!!!

Quote

But, I can see this as a great learning experience, and who knows you might be able to make the website for your school, or school paper by showing this piece.

I am on the website committee as a developer for my village website!!!!

Thank you SO MUCH
Was This Post Helpful? 0
  • +
  • -

#4 coden4fun   User is offline

  • if(coden4fun.NotTired){ ContinueToCode(); }
  • member icon

Reputation: 28
  • View blog
  • Posts: 696
  • Joined: 27-February 09

Re: MY website

Posted 07 March 2010 - 06:03 AM

Sure I'll do all the review you need me to do with in reason. Just click on the + icon next to "Was this Post Helpful?" on on the post that are truly helpful to you. It gives me reason to continue helping people.

Sure if you want me to take a look at the entire source code keep positing it here.

I have 5+ years in many of the web development languages you're learning now. I'll be more than glad to help out.
Was This Post Helpful? 1
  • +
  • -

#5 williamgeorgegardner   User is offline

  • CEO of GeekTelligence
  • member icon

Reputation: 19
  • View blog
  • Posts: 584
  • Joined: 27-December 09

Re: MY website

Posted 07 March 2010 - 01:33 PM

Thanks so much I really appreciate it. I will update my website soon.
Was This Post Helpful? 0
  • +
  • -

#6 Lemur   User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1453
  • View blog
  • Posts: 3,633
  • Joined: 28-November 09

Re: MY website

Posted 07 March 2010 - 02:11 PM

Also to center a layout you need to add text-align:center because of some notorious IE issues.

Never advertise your age, only your skills and designs. I've seen 15-20 year olds with far far more talent than some of the older and "veteran" designers. Age is completely irrelevant, it's what you deliver on that counts.

Speaking of carbon and steel, look into textures and patterns, they can add a lot to your site though keep it subtle at most. http://www.cgrenders.com is a great resource for textures.

I have to agree though that the red is out of place. I'd ditch that box altogether.

White Space is also a crucial crucial part of designing. Use liberally.

Whitespace is from CSS padding or line-height.

element{padding:50px;}


element{font:12px; line-height:24px;}


Padding is based from the Box Model:
Posted Image

Line Height is like Double spacing in Microsoft Word, the space between lines of text and as a rule of thumb it should be at least twice the size of the text.

I'd also suggest adding some extra margin to the lists you have on site and removing the bullets:
ul{
    list-style:none;
    margin:10px 20px;
}



and feel free to play with the numbers. Lists should typically be further inset than regular text for readability.

Make all the tabs even in your code, the li's there's one that's sticking out and it's causing some effects on the menu.

As far as breaks get rid of all of them in favor of this styling the p element:

#content p{
  margin:20px 10px;
}



This adds 20 px between the top and the bottom of the p element and 10 to either side.

and why do you have this
text-align="left"

in your css? That's html style, it needs to be
text-align:left;


Overall the code is fairly solid it's just design aspects that seem to get you.
Was This Post Helpful? 1
  • +
  • -

#7 williamgeorgegardner   User is offline

  • CEO of GeekTelligence
  • member icon

Reputation: 19
  • View blog
  • Posts: 584
  • Joined: 27-December 09

Re: MY website

Posted 07 March 2010 - 02:16 PM

I have made some changes so HERE is the link again.
Was This Post Helpful? 0
  • +
  • -

#8 williamgeorgegardner   User is offline

  • CEO of GeekTelligence
  • member icon

Reputation: 19
  • View blog
  • Posts: 584
  • Joined: 27-December 09

Re: MY website

Posted 11 March 2010 - 06:51 AM

View PostLemur, on 07 March 2010 - 01:11 PM, said:

Also to center a layout you need to add text-align:center because of some notorious IE issues.

Never advertise your age, only your skills and designs. I've seen 15-20 year olds with far far more talent than some of the older and "veteran" designers. Age is completely irrelevant, it's what you deliver on that counts.

Speaking of carbon and steel, look into textures and patterns, they can add a lot to your site though keep it subtle at most. http://www.cgrenders.com is a great resource for textures.

I have to agree though that the red is out of place. I'd ditch that box altogether.

White Space is also a crucial crucial part of designing. Use liberally.

Whitespace is from CSS padding or line-height.

element{padding:50px;}


element{font:12px; line-height:24px;}


Padding is based from the Box Model:
Posted Image

Line Height is like Double spacing in Microsoft Word, the space between lines of text and as a rule of thumb it should be at least twice the size of the text.

I'd also suggest adding some extra margin to the lists you have on site and removing the bullets:
ul{
    list-style:none;
    margin:10px 20px;
}



and feel free to play with the numbers. Lists should typically be further inset than regular text for readability.

Make all the tabs even in your code, the li's there's one that's sticking out and it's causing some effects on the menu.

As far as breaks get rid of all of them in favor of this styling the p element:

#content p{
  margin:20px 10px;
}



This adds 20 px between the top and the bottom of the p element and 10 to either side.

and why do you have this
text-align="left"

in your css? That's html style, it needs to be
text-align:left;


Overall the code is fairly solid it's just design aspects that seem to get you.


Thank's Lemur I will look into that and post the link to the revised version here.
Was This Post Helpful? 0
  • +
  • -

#9 Keiran   User is offline

  • New D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 49
  • Joined: 06-December 09

Re: MY website

Posted 16 March 2010 - 09:50 PM

If I was to do it I would add some padding around the bottom of you content div.

I like the way you have everything set out. It is very easy to follow. I would have done this though

#content a
{
    color: #00000EE;
    text-decoration: underline;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
}



That will just make your links match your style.

Your links page needs padding around your list so This should do it

#content li {
    margin-left:10px;
}



Your color scheme is nice and simple and your site flows very well from one page to another

Maybe you should put everything in a container though. That way you could center it and it wont look weighted on wide screens.

I would also recommend firebug it means you can preview your changes before you decide to make those changes to your actual code.
Was This Post Helpful? 0
  • +
  • -

#10 williamgeorgegardner   User is offline

  • CEO of GeekTelligence
  • member icon

Reputation: 19
  • View blog
  • Posts: 584
  • Joined: 27-December 09

Re: MY website

Posted 17 March 2010 - 10:32 AM

Thanks for the advice guys!!!!..
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1