How to know when someone is a good html/css coder

K

KuJaX

[H]F Junkie
Joined
Jan 8, 2001
Messages
15,778
I am working with a company on getting their website designed and coded. The design is complete and i am working with a coder. I told him that I wanted to see the code (html/css) when he gets done with the main page before he starts working on the other pages.

I ran it through W3C validation and html turns out great but there are 8 errors on the CSS side using the jigsaw w3 css validator

I know quite a bit about html/css but not actual "best practices" coding.

Also how can I test the design in multiple browsers? Are there tools to test in different versions if IE, FF, Chrome, etc?

What suggestions have you kind people of [H]? :)
 
Some general questions...
- Are clear and understandable names being used?
- Is it maintainable?
- Is source control being used? If so, are the commits commented? Does it pass any code compliance tests you may have?
- Are containers (divs, etc.) setup in a logical way?
- If JS is used for features beyond eye candy, then how coupled are the pieces of the site? Or phrased another way, how difficult would it be to completely remove a logical container (at least the high-level regions)?
- If jQuery or other large JS libraries are in use, are they used minimally or has entire library references simple been shotgunned in the HEAD tag?


03grandam's suggestion can help with visual spot-checking, as long as there isn't an authentication or "gate" mechanism that is required/shown before the link. But it does raise another couple questions you'll want to know...
- What browsers are your site visitors using?
- Are mobile users directed to another site, or is this site expected to work 100% on mobile browsers?
 
Last edited:
The biggest issue to maintainability is extensive copy and pasting, not using the C in CSS! Such 'code' will/ may still validate but it will be a nightmare to manage. The world would be a better place without copy and paste coding.

Oh and if they use !important more than once, shoot them!
 
PTNL said:
03grandam's suggestion can help with visual spot-checking, as long as there isn't an authentication or "gate" mechanism that is required/shown before the link. But it does raise another couple questions you'll want to know...
- What browsers are your site visitors using?
- Are mobile users directed to another site, or is this site expected to work 100% on mobile browsers?
Click to expand...

Difficult to know what browsers users will be using since it is a new site but I would imagine vast majority are IE (past 5 years versions), Firefox (past 5 year versions) and small percentage Chrome/Safari and very small percentage of MAC users. Many iphone/ipad users.

Mobile users for now will not be pushed to another site. It is suppose to be responsive. On my android based phone with Dolphin browser it looks fine
 
8 doesn't seem like many compared to some 'random' sites I checked in.
 
KuJaX said:
I ran it through W3C validation and html turns out great but there are 8 errors on the CSS side using the jigsaw w3 css validator

I know quite a bit about html/css but not actual "best practices" coding.

Also how can I test the design in multiple browsers? Are there tools to test in different versions if IE, FF, Chrome, etc?

What suggestions have you kind people of [H]? :)
Click to expand...

Just a heads up. Some JS libraries (such as jquery) automatically attach certain style properties that will throw CSS validation errors, not much you can do about that. The errors themselves are pretty much harmless, but they are there nonetheless, so keep that in mind before writing something off as bad coding.

Some of the very basic things I look for when I review HTML/CSS
- did they use a doctype? no doctype, you automatically fail. 99% of the time when I don't see a doctype, it means the rest of the code is not going to be worth my time.
- did they use a reset style sheet?
- are there clearly commented and separated sections? Examples: they group all the styles related to site navigation together, another section for the content area styles, etc.
- Do classes and ids that have meaningful names? Nothing drives me nuts more than <div id="div_1">
- Is the design "responsive"? Do they understand how to use media queries to automatically target mobile/tablet devices?
- Do they use conditional HTML to target older browsers?

I spend about 30 seconds looking for any of the above. The more of them I find, the more interested I become in your skill set.
 
You must log in or register to reply here.
Back
Top