Hello all. I just finished mocking up a page for a site that I'm working on. I just thought I would put it out there for anyone to take a look at my coding and let me know if I'm doing anything wrong or making any major mistakes. I'm still a newbie at web design/development so any critiques would be greatly appreciated. I wouldn't want to continue making big mistakes or develop any bad habits this early on! Anyway, thanks for any feedback!
But I would do it differently anyways. The <ul> itself can be coded just like the div, so I would do something like <ul id="social_icons">.
Also, I see you're using underscores, you'll find that the majority of people (I think) are using dashes for HTML & CSS. So it would look like <ul id="social-icons">. To me, that looks a lot cleaner. But it comes down to preference.
Ahh, nice catch on the closing tag. (I seem to do that all the time! :) I always forget that you can apply an id directly to the ul tag instead of adding yet another div. Thanks for the input.
Another, possibly silly question... I'm eventually going to need a dropdown menu from one of the navigation buttons. What is the easiest way to accomplish that? I'm having a heck of a time getting it to work properly. Any insight would be great. Thanks!
Anyone have any suggestions on how I could reduce the file size of my larger photos? A couple of them are hitting 260k. That seems pretty large to me, but I could be wrong. The main problem is that I'm using a transparent PNG because I have CSS3 gradients in the background. Anyway, thanks for the advice everyone.
Things to consider is that javascript slideshow you have going, see if you can document.ready() condition where all images load before slideshow renders them. Another thing is image condensing, checkout like yahoo smush, takes most files without killing image quality and makes em pretty.
Not sure if thats the review you want, but just something different...
Thanks Vinny, I'll definitely check into that. Unfortunately I know little to nothing about JS so I'm your typical cut and paster until I can master css... then I'll move on to learning JS. Thanks again!
Looking Good! Im not one to talk but Its always nice to have all the indents of elements lined up. Its easier to read and looks better and more professional to any who views the code! :)
To be honest, CSS errors are not as important as HTML errors. HTML errors can ultimately effect SEO but CSS I do believe has no part in that. Therefore, if your HTML is valid and your code is effectively doing what you want it to and is semantically correct, I would ignore CSS errors. Using CSS 2.1 but implementing CSS3 features like you have will give errors, you can ignore that. Just be smart when doing this. You obviously don't want to ignore everything.
@TheDoc, while you are right that most people does not use underscores in their CSS selectors, it is not merely due to preference. Some older browsers cannot handle the underscores, and thats why that people should avoid using them.
There is one alternative to dashes for word separation, which I'm more fond of. Maybe it is due to my background as a programmer - who knows. I'm talking about camelcase - or just a capital letter to indicate a new word. Some examples: - page-wrap => pageWrap - some-long-name-for-a-css-selector => someLongName....
You get the picture.
It doesn't matter which one you go with. Some might argue that using camelcase is giving you smaller file sizes but that would be nitpicking in my opinion... The most important is what you find easier to read.
When I'm writing css I always name id's with uppercase first letter (capitalizing each word - tho most of them is single words - examples: #Header, #Footer, #Content, #Menu...). Classes is named in camelcase- examples: .activePage, .fancyHeader, .longStupidClassName... I have not made any decisions on how to do the naming, it is just a de facto standard that has developed through years of work :-)
www.michaelgrindley.com/bff/index.html
There is no closing
</ul>:But I would do it differently anyways. The
<ul>itself can be coded just like the div, so I would do something like<ul id="social_icons">.Also, I see you're using underscores, you'll find that the majority of people (I think) are using dashes for HTML & CSS. So it would look like
<ul id="social-icons">. To me, that looks a lot cleaner. But it comes down to preference.-Mike
So looking at it from a glance it looks great
Things to consider is that javascript slideshow you have going, see if you can document.ready() condition where all images load before slideshow renders them. Another thing is image condensing, checkout like yahoo smush, takes most files without killing image quality and makes em pretty.
Not sure if thats the review you want, but just something different...
-Vinny
you have a lot of CSS errors
You should validate your HTML/CSS as much as possible then update this to make it easier on yourself.
There is one alternative to dashes for word separation, which I'm more fond of. Maybe it is due to my background as a programmer - who knows. I'm talking about camelcase - or just a capital letter to indicate a new word. Some examples:
- page-wrap => pageWrap
- some-long-name-for-a-css-selector => someLongName....
You get the picture.
It doesn't matter which one you go with. Some might argue that using camelcase is giving you smaller file sizes but that would be nitpicking in my opinion... The most important is what you find easier to read.
When I'm writing css I always name id's with uppercase first letter (capitalizing each word - tho most of them is single words - examples: #Header, #Footer, #Content, #Menu...). Classes is named in camelcase- examples: .activePage, .fancyHeader, .longStupidClassName... I have not made any decisions on how to do the naming, it is just a de facto standard that has developed through years of work :-)