Long time ago (2 years ago I think) I created a website. I can't help the Flash, the client insisted. I don't know HTML5 back then. Now I know deathshadow is an expert on this after reading through DP. I'd love to have some feedback to improve my HTML, CSS and some javascript. I'm self taught, so you know. Here's the link; http://arzaresources.com/index2.html (The client insisted on something stupid, you can go to arzaresources.com to see it for yourself, hence index2.html)
Well, do yourself a favor and forget HTML 5 -- and since when is two years a "long time ago"? Ok, putting the flashtard crap aside since you recognize that as bad even if the client was too stupid to do so... it's bad VISUALLY, with the inaccessible fixed width, absurdly small and useless PX fonts (going down to 10px?!?), illegible color contrasts to the point the text is likely invisible to more than HALF the population (tan on dark tan, really? The brighter of the two is only 40% the spectrum!) -- but you're not asking about that, you're asking about the code. First off it's transitional, so it's proudly proclaiming on the first line to be in transition from 1997 to 1998 coding practices, that's what tranny MEANS. Usually that means the presence of the TARGET attribute and tags like CENTER that have no busines on websites written after 1997, and tags like IFRAME or EMBED that are just there because the developer doesn't know how to use OBJECT properly. ODD part is you don't seem to actually have used any of those, making one wonder why it's a tranny in the first place. First thing to catch my eye is the unnatural language in the META[description], that seems to be more about keyword stuffing. Of course since description is NOT weighted and does not exist for keyword stuffing, that's just garbage. It's also uselessly long.The point of description is to be text shown on a search result below the title to entice users to visit, and I don't see how this does that. Next is the META[keywords] which is overstuffed gibberish -- a keywords meta should be seven or eight SINGLE WORDS (the exception to single words being proper names!) totalling under 128 characters (some places like SEOWorkers says even less) that exist as CDATA between <BODY> and </BODY> that you want to add a small amount of weight to. It is NOT called keyphrases, It is NOT called keysentences, It is called keyWORDS! ... and that is why most people think and some will even vehemently claim keywords doesn't work anymore; even the people at the search engiens make this claim when it's not true it works just fine -- IF you use it for what it's for. You slap endless redundant phrases in it three to ten times larger than is actaully used, OF COURSE IT DOESN'T DO ANYTHING! I think they should actively enforce it, slapping down sites that don't use it properly... of course that would slap down some 98% of the internet's rankings in the process. There is no such thing as "index" or "follow" for a robots meta. Those are the default states so there is no reason to say that. Your MEDIA stack is incomplete. It is usually best to say "screen,projection,tv" since they all generally have the same capabilities. A lot of Kiosks (Opera or FF under the hood) use 'projection', so they wouldn't even get your stylesheet. Jquery, well, fat bloated train wreck of javascript for nothing. You forgot to open BODY. Your comment placements could trip rendering errors... and if your ID's and classnames made any sense you wouldn't need opening comments... and on the closing comments you don't need to say "end", that's what </div> means... really? </div> is the end of something? WOW. The rendering error issue (that you may have hacked around in the CSS, or it's just broken in some versions of IE or FF) comes from when comments end up between floats or positioned elements, which can trip the 'double render' or 'dissapearing content' bugs -- which do exactly what they sound like. Avoiding this is simple, instead of: </div><!-- end section3 --> put it before the closing tag: <!-- .section3 --></div> If the close is before the tag, it can never end up between sibling elements. The page is definitely DIV heavy, The OBJECT (that as you already know shouldn't be an object) doesn't need a DIV around it. UL is a perfectly good block level element, doesn't need a DIV around it. (part of why I think NAV is pointless bloat)... the nesting method of building the object is pointless bloat since you could use the non-IE CC to wrap the other object tag... and what the devil makes the first heading on the page a H4?!? With no H3, H2 or H1 preceeding it that's just plain gibberish. The massive image as text means there's no actual content there, and of course the lack of a ALT tag on that image makes it an even bigger wreck of garbage. Of course a fixed height fixed width content section like that one is a poster child for what I call "But I can do it in Photoshop" design, such elements having no place on a website if you actually care about accessibility. I see a clearing DIV -- two years ago was NOT 2001. Be nice if the indentation made any sense, or there were more comments to make it clear what was being closed. I'm a little shocked there's only two validation errors, this coding style where I'm from means there should be more! Tables for layout, and MORE gibberish headings. Lemme explain headings -- a H1 is the uppermost heading, should likely be the first thing on the page in all but the rarest of exceptions, and by definition is the heading under which everything on the page is a subsection -- H2's are the start of subsections of the H1... H3's are the start of subsections of the H2 before them, and you can use HR to indicate a change in topic where a heading tag would be unwanted/unwarranted/inappropriate! It looks like you were choosing heading tags based on their default appearance, and if you choose tags for that reason, you're choosing the wrong tags... See your H3 with no H2, the H2 after a h3 under "Who we are" that becomes the parent for "OUR CLIENTS" -- it's gibberish use of said tags. Footer seems to be using line-breaks to do padding's job, not sure it needs that extra inner DIV, the links are NOT a paragraph, if anything they're a list... "Copyright ©" -- the (C) symbol means copyright, so it's "copyright copyright"? Pick one or the other, not both... ... and of course the stupid malfing "google analytics" bullshit for the people too stupid to know how to use Analog or Webalizer. I do consider that pointless bloat as any information that you cannot clean from the existing server logs using analysis tools is just wasting time micromanaging irrelevant data points... time that could be better spent generating fresh content. In the CSS, you set the charset; this is always kind-of a laugh since the only characters valid in CSS are the bottom 7 bits of ASCII, so there should be no reason to EVER say that. Your first line of actual CSS is redundant since if you say "*" that hits everything, even HTML so you don't need to say HTML. Likewise you don't need to say 'px' when it's 0. No matter what unit system you use, zero is zero. I would NOT have used the 'universal reset' of targeting everything with "*" for margin/padding null, since that can cause headaches with styling form elements cross browser, particularly on non-96dpi system settings. The need to 'up-tree' (aka ../) to find the body background indicates a bad or broken directory layout structure. It's easier and more portable to always design your directory layout so everything is pointed down-tree... Which means putting images used by the CSS in a subdirectory of where that CSS is stored. It's also good practice since it helps further establish separation of presentation from content -- and easier to reskin or have multiple skins as well since anything that's "style" gets it's own location. The font declarations are again rubbish -- further compounded by a font stack that NOBODY would have! Probably why I'm seeing illegible serif fonts here -- and here's a tip, serif is for PRINT, sans-serif is for screen. Also, setting opacity on H3's? As if it wasn't hard enough to read already with the garbage color mix?!? You seem to have been stuffing everything onto single lines ... then not doing so. Makes it very hard to follow or even figure out what the devil you are setting for values. NEVER understood why people do this. But then there's a lot of things people do I don't understand... HTML 5, HTML 4 tranny, Dreamweaver, Religion, Pedophelia, Corn Dogs... The image replacement method used for the incorrectly named "CSS Sprites" on the menu is trash, because the menu doesn't appear when images are disabled... kinda defeats the point. NOT that there was any reason to be using images for the TEXT part of that menu. That could have been done far simpler, even without CSS3. One of the biggest problems is that the line-height isn't changed with the font-size... Though really with the inaccessible train wreck of PX metric fonts on EVERYTHING, the problems associated with failing to do so aren't as evident... NOT that the illegibly useless color choices would make that evident either. So yeah, not so great. -- edit -- oh, one more thing. I'm a bit surprised to see anyone actually try to use longdesc -- though pointing it at the same file instead of a separate .txt file actually describing the image really defeats the point... You didn't use it for what it's actually for!
I love you DS. Great crits. Thank you for taking your time to read through my codes. You have put in a lot of effort in this and I really appreciate it. I use Dreamweaver to help with my codes back then. That tranny, is automatically put when you create a new HTML file using Dreamweaver, so now I understand the usage of doctypes. I will read more about it. Now, DW is out of the way. Even though it helped me with my codes, but its slow and buggy, even DW CS6. Now I'm using Coda, a decent app, at least I feel cleaner coding with it. I will improve my skills on the next project I'm working on. There's a lot of question I would like to ask, but consuming this input of yours takes time. I'm not that fast of a learner. Respect, man. Thank you very much.