Hello, I know this is probably too vague, but I'll take my chance because I need a non-specific review. I had a task to create a responsive HTML5/CSS3 page based on PSD layout. I got rejected and when asked for details I got these comments: - semantically incorrect HTML - incorrect use of ID selectors in CSS - incorrect general way of solving given CSS problems The link is here and HTML is <!doctype html> <html lang="hr"> <head> <meta charset="utf-8" /> <title>Lorem ipsum</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/style.css" /> <link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css' /> <link rel="stylesheet" href="js/jquery.bxslider/jquery.bxslider.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="js/jquery.bxslider/jquery.bxslider.min.js" type="text/javascript"></script> <script src="http://maps.googleapis.com/maps/api/js?&sensor=false" type="text/javascript"></script> <script src="js/script.js" type="text/javascript"></script> <!--[if lt IE 8]> <div style=' clear: both; text-align:center; position: relative;'> <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"> <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /> </a> </div> <![endif]--> <!--[if lt IE 9]> <script src="js/html5.js"></script> <link rel="stylesheet" href="css/ie.css" /> <![endif]--> </head> <body> <div id="divMain" class="div_base"> <!-- header --> <div id="divHeaderHolder" class="div_base"> <header class="div_base"> <div id="divLogo"> <a href="#"><img src="images/logo.png" alt="" title="" /></a> </div> <div id="divHeadRight"> <div class="head_tel">Toll Free Number: <a href="tel:0800000000" class="a_head_tel">0800 00 00 00</a></div> <div class="head_links_holder"> <a href="#" id="aLocate">Locate me</a> <a href="#" id="aProfil">My Profile</a> <a href="#" id="aFB"></a> <a href="#" id="aTW"></a> </div> </div> </header> <nav class="div_base"> <a href="#" id="aHome" class="underline">Home</a> <a href="#" class="underline menu_color menu_bg_color">Page Link 1</a> <a href="#" class="underline menu_color menu_bg_color">Page Link 2</a> <a href="#" class="underline menu_color menu_bg_color">Page Link 3</a> <div id="divMenuMobile"><a href="#" id="aMenuMobile"></a></div> <form> <input type="search" id="txt_search" placeholder="Search..." class="div_base menu_color" /> </form> <div id="divAutocomplete"></div> </nav> </div> <!-- /header --> <!-- main slider --> <div id="divSliderMainHolder" class="div_base"> <div id="divSliderMain" class="div_base"> <ul id="ulSliderMain"> <li><img src="images/slider1.jpg" alt="" /></li> <li><img src="images/slider1.jpg" alt="" /></li> <li><img src="images/slider1.jpg" alt="" /></li> <li><img src="images/slider1.jpg" alt="" /></li> </ul> </div> </div> <!-- /main slider --> <!-- content --> <div id="divContentHolder" class="div_base"> <section class="div_base"> <div id="divCnt" class="div_base"> <div class="news_item"> <div class="news_imgholder"> <a href="#"><img src="images/news_img1.jpg" alt="" /></a> </div> <div class="news_date">17.04.2014.</div> <div class="news_title"><a href="#" class="underline">Typi non habent claritatem insitam</a></div> <div class="news_descr"> čćžšđ ČĆŽŠĐ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed... </div> <div class="news_bottom"> <div class="news_bottom_left div_base"></div> <div class="news_bottom_right"> <a href="#" class="news_more"></a> </div> </div> </div> <div class="news_item"> <div class="news_imgholder"> <a href="#"><img src="images/news_img2.jpg" alt="" /></a> </div> <div class="news_date">02.12.2013.</div> <div class="news_title"><a href="#" class="underline">Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</a></div> <div class="news_descr"> Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>, sed enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div> <div class="news_bottom"> <div class="news_bottom_left div_base"></div> <div class="news_bottom_right"> <a href="#" class="news_more"></a> </div> </div> </div> <div class="news_item"> <div class="news_imgholder"> <a href="#"><img src="images/news_img3.jpg" alt="" /></a> </div> <div class="news_date">01.12.2013.</div> <div class="news_title"><a href="#" class="underline">Typi non habent claritatem insitam</a></div> <div class="news_descr"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed... </div> <div class="news_bottom"> <div class="news_bottom_left div_base"></div> <div class="news_bottom_right"> <a href="#" class="news_more"></a> </div> </div> </div> </div> <div id="divSidebar"> <div id="divSideSlider"> <div class="sidebar_item"> <img src="images/sidebar1.jpg" alt="" /> </div> <div class="sidebar_item"> <img src="images/sidebar2.jpg" alt="" /> </div> </div> </div> </section> </div> <!-- /content --> <!-- footer --> <div id="divFooterHolder" class="div_base"> <footer class="div_base"> <div id="divFooterLeft"> This site is powered by... </div> <div id="divFooterRight"> Design & Technology: D.S. </div> </footer> </div> </div> <div id="RWDMenu"></div> <!-- some general stuff: back to top, custom alert box, ajax preloader... --> <a href="#top" id="aBackTop"></a> <div id="divAlertHolder" class="div_base"><div id="divAlert"></div></div> <div id="divPreloaderholder" class="div_base"><div id="divPreloader"></div></div> </body> </html> HTML: And CSS is: * { -moz-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Open Sans', sans-serif; font-size: 16px; background: #fff; } img, embed, object, video { max-width: 100%; } a { text-decoration: none; color: #000; } a:hover { text-decoration: underline; } .underline:hover { border-bottom: 2px solid #C4C8CC; text-decoration: none; } /* for various elements due to OOCSS */ .div_base { position: relative; width: 100%; } .menu_color { color: #8F8F8F; } .menu_bg_color { background-color: #F4F4F4; } /* ===================================== */ /* all main content, menus, footer... are grouped in divMain in order to slide left navigation */ #divMain { margin: 0 auto; z-index: 20; } /* this is menu below for smartphones */ #RWDMenu { position: absolute; top: 0; left: 0; z-index: 10; } /* ===================================== */ /* Header */ #divHeaderHolder { height: auto; background-color: #333333; -webkit-box-shadow: 0px 18px 20px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 18px 20px 0px rgba(0, 0, 0, 0.25); z-index: 30; } header { margin: 0 auto; max-width: 1144px; min-height: 107px; height: auto; color: #fff; font-size: 11px; } #divLogo { position: relative; display: block; float: left; padding-top: 17px; } #divHeadRight { position: relative; float: right; padding: 17px 19px 0 0; font-size: 11px; color: #fff; text-transform: uppercase; } #divHeadRight a { color: #fff; } .head_tel { position: relative; color: #F0F0F0; text-align: right; } .a_head_tel { position: relative; top: -5px; font-size: 16px; } .a_head_tel:hover { text-decoration: none; } .head_links_holder { position: relative; display: block; margin-top: 25px; text-align: right; } #aLocate { display: inline-block; position: relative; margin-right: 17px; background: url(../images/icon_googlemap.png) no-repeat right top; height: 30px; padding: 7px 30px 0 0; } #aLocate:hover { background-position: right -30px; } #aProfil { display: inline-block; margin-right: 42px; padding-top: 7px; } #aFB { display: inline-block; position: relative; background: url(../images/icon_fb.png) no-repeat 0 0; width: 30px; height: 30px; margin-right: 14px; text-indent: -9999px; } #aFB:hover { background-position: 0 -30px; } #aTW { display: inline-block; position: relative; background: url(../images/icon_tw.png) no-repeat 0 0; width: 30px; height: 30px; text-indent: -9999px; } #aTW:hover { background-position: 0 -30px; } nav { display: table; max-width: 1144px; height: 52px; margin: 0 auto; } nav > a { display: table-cell; width: 150px; white-space: nowrap; height: 52px; padding: 14px 50px 12px 50px; border-right: 1px solid #C2C2C2; font-size: 18px; text-transform: uppercase; } #aMenuMobile { display: block; background: url(../images/menu_mobile.png) no-repeat 0 0; width: 25px; height: 25px; text-indent: -9999px; } #divMenuMobile { display: none; } #aHome { display: table-cell; background: url(../images/icon_home.png) no-repeat 0 0; width: 106px; height: 52px; text-indent: -9999px; } #aHome:hover:after { content:''; position: absolute; top: 0; left: 0; width: 106px; height: 52px; background: rgba(0, 0, 0, 0.2); } #txt_search { height: 52px; background: #EEE9E9; box-shadow: inset 7px 7px 15px 0px rgba(0, 0, 0, 0.25); border: 0; font-style: italic; font-size: 24px; padding: 15px; } #divAutocomplete { position:absolute; display: none; width: 500px; height: 200px; border: 1px solid #ccc; background-color: #fff; } .ul_autocomplete { list-style: none; padding: 0; margin: 0; } .li_autocomplete { padding: 5px; background-color: #ABABAB; color:#000; border-bottom: 1px solid #ccc; cursor: pointer; } .li_autocomplete:hover { background-color: #000; color:#fff; } /* Main Slider */ #divSliderMainHolder { background-color: #fff; } #divSliderMain { max-width: 1144px; padding: 31px 28px 44px 28px; margin: 0 auto; } /* Content elements */ #divContentHolder { margin-top: -50px; background-color: #F9F8F6; border-top: 1px solid #D9D9D8; border-bottom: 1px solid #D9D9D8; } section { display: table; max-width: 1144px; padding: 40px 28px 47px 28px; margin: 0 auto; } #divCnt { display: table-cell; max-width: 805px; padding-right: 28px; } /* news */ .news_item { clear: both; min-height: 176px; margin-bottom: 29px; } .news_imgholder { float: left; width: 158px; height: 142px; margin: 0 27px 10px 0; padding-left: 16px; background-color: #EEEEEE; overflow: hidden; } .news_imgholder img:hover { opacity: .7; } .news_date { color: #ABABAB; font-size: 13px; font-weight: bold; } .news_title { color: #000; font-size: 24px; line-height: 35px; margin-bottom: 10px; } .news_descr { color: #6C6C6C; font-size: 16px; line-height: 25px; } .news_more { display: block; position: relative; background: url(../images/icon_more.png) no-repeat 0 0; width: 42px; height: 42px; text-indent: -9999px; } .news_more:hover:after { content:''; position: absolute; top: 0; left: 0; width: 42px; height: 42px; background: rgba(0, 0, 0, 0.2); } .news_bottom { display: table; } .news_bottom_left { display: table-cell; height: 42px; border-bottom: solid 1px #C4C8CC; } .news_bottom_right { display: table-cell; width: 64px; height: 42px; padding-left: 22px; } /* sidebar */ #divSidebar { display: table-cell; width: 251px; } .sidebar_item { margin-bottom: 20px; width: 251px; } /* Footer */ #divFooterHolder { background-color: #fff; } footer { margin: 0 auto; display: table; max-width: 1144px; height: 66px; } #divFooterLeft { display: table-cell; vertical-align: middle; padding-left: 28px; } #divFooterRight { display: table-cell; vertical-align: middle; text-align: right; padding-right: 28px; } /* some general stuff: back to top, custom alert box, ajax preloader... */ #aBackTop { display: none; position: fixed; right: 10px; bottom: 50px; background: url(../images/icon_up.png) no-repeat 0 0; width: 42px; height: 42px; text-indent: -9999px; margin: 0; z-index: 99; } #aBackTop:hover:after { content:''; position: absolute; top: 0; left: 0; width: 42px; height: 42px; background: rgba(0, 0, 0, 0.2); } #divAlertHolder { position: fixed; top: 0; left: 0; z-index: 99; } #divAlert { display: none; position: relative; margin: 100px auto; width: 80%; height: 400px; color: #000; background-color: #fff; border: 1px solid #C4C8CC; -webkit-box-shadow: 4px 4px 15px #333; box-shadow: 4px 4px 15px #333; text-align: center; } #divPreloaderholder { position: fixed; top: 0; left: 0; z-index: 99; } #divPreloader { display: none; position: relative; margin: 100px auto; width: 48px; height: 48px; background: url(../images/preloader.gif) no-repeat 0 0; } @media screen and (max-width: 1024px) { /* ipad horizontal */ /* menu bar appears for mobile */ nav > a, #aHome { display: none; } #divMenuMobile { display: table-cell; width: 52px; height: 52px; padding: 13px; } #txt_search { display: block; width: 40%; min-width: 207px; } #RWDMenu a { display: block; width: 250px; white-space: normal; min-height: 52px; height: auto; padding: 14px 16px 12px 16px; border-right: 1px solid #C2C2C2; border-bottom: 1px solid #C2C2C2; font-size: 18px; text-transform: uppercase; } } @media screen and (max-width: 700px) { /* head right elements go below */ #divLogo { float: none; clear: both; } #divHeadRight { float: none; clear: both; margin-left: 16px; } .head_tel { text-align: left; } .a_head_tel { font-size: 16px; } .head_links_holder { margin: 10px 0 10px 0; text-align: left; } #aLocate, #aProfil, #aFB, #aTW { margin-right: 3px; } #divCnt { display: block; padding-right: 0; } #divSidebar { display: block; } footer { font-size: 12px; } #divAlert { margin-top: 200px; height: 250px; } } Code (CSS): Maybe I could use article instead of section or within a section, but is it really such a mistake, or I don't see a big picture? Please help me out by pointing out what I do wrong, because obviously I am going in a wrong direction in learning HTML5/CSS3, and if it's not too wide issue, what should I correct? Two things that I've learned and I would change afterwards are: - I wouldn't use IDs at all in CSS, just classes - Two last elements (divAlertHolder, divPreloaderholder) I would create in javascript since they depend only on javascript. Unless I got this wrong also? (I'd really like your opinion, Deathshadow, and I am aware you're not gonna go easy on my code, but I don't mind, because I want to learn to do things the right way. However, I will understand if you don't have a time or interest.)
You rang? (came here from your request in the other thread) First thing I'd suggest is axing the HTML 5 bullshit. Would serve no legitimate purpose if you bother using numbered headings and horizontal rules correctly. Likewise I'd suggest using classes and ID's that actually describe the content inside them instead of nonsense like DIV this and DIV that and DIV some other blasted thing. A reset in your CSS would probably also help with styling a LOT... that you have multiple LINK for no reason with no MEDIA attributes on them isn't helping either, since I'm so sure your for screen layout makes perfect sense for print, aural or braille. The DIV inside the IE CSS before BODY is even open is gibberish, and that it's the stupid malfing "I can't write gracefully degrading code" bullshit message akin to 1990's style "best viewed in" banners means I'd axe that asshattery before even thinking about anything else. The inaccessible/incomplete form with the placeholder BS definitely needs an axe swung at it, likewise I've no clue what that 'mobilemenu' thing is, but if it's what I THINK it is, that too needs a good neutering by Gimli. You've also got some scripting only elements in the markup at the bottom, that's stuff that any script worth using should be generating all on it's own, and has ZERO business in the HTML. Basically you've got 6.5k of HTML 5 nonsense for what I'd have a little under 5k to do... and that's with mine having a HELL of a lot more comments in it. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Site Title </title> </head><body> <div id="top"><div class="widthWrapper"> <h1> <a href="/"> Site Title <span><!-- image sandbag --></span> </a> </h1> <div> Toll Free Number: <a href="tel:0800000000" >0800 00 00 00</a> </div> <ul id="personalBar"> <li class="locateMe"><a href="#">Locate me</a></li> <li class="myProfile"><a href="#">My Profile</a></li> <li class="facebook"><a href="#">FaceBook<span></span></a></li> <li class="twitter"><a href="#">Twitter<span></span></a></li> </ul> <ul id="mainMenu"> <li class="home"><a href="#" class="current">Home</a></li> <li><a href="#">Page Link 1</a></li> <li><a href="#">Page Link 2</a></li> <li><a href="#">Page Link 3</a></li> </ul> <form action="#" method="get"> <fieldset> <label for="textSearch">Search:</label> <input type="text" name="search" id="textSearch" /> <input type="submit" value="go" class="search" /> </fieldset> </form> <!-- .widthWrapper, #top --></div></div> <div id="flipper"><div class="flipper widthWrapper"> <img src="images/slider1.jpg" alt="" /> <img src="images/slider1.jpg" alt="" /> <img src="images/slider1.jpg" alt="" /> <img src="images/slider1.jpg" alt="" /> <!-- .flipper.widthWrapper, #flipper --></div></div> <div id="main"><div class="widthWrapper"> <div id="contentWrapper><div id="content"> <div class="newsItem"> <a href="#" class="leadingPlate"> <img src="images/news_img1.jpg" alt="" /> </a> <div class="postPlate"> <h2> <span>17.04.2014</span> <a href="#">Typi non habent claritatem insitam</a> </h2> <p> ccžšd CCŽŠÐ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed... </p> <a href="#" class="more">Read More</a> <!-- .postPlate --></div> <!-- .newsItem --></div> <div class="newsItem"> <a href="#" class="leadingPlate"> <img src="images/news_img2.jpg" alt="" /> </a> <div class="postPlate"> <h2> <span>02.12.2013</span> <a href="#">Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</a> </h2> <p> Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>, sed enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <a href="#" class="more">Read More</a> <!-- .postPlate --></div> <!-- .newsItem --></div> <div class="newsItem"> <a href="#" class="leadingPlate"> <img src="images/news_img3.jpg" alt="" /> </a> <div class="postPlate"> <h2> <span>01.12.2013.</span> <a href="#">Typi non habent claritatem insitam</a> </h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed... </p> <a href="#" class="more">Read More</a> <!-- .postPlate --></div> <!-- .newsItem --></div> <!-- #content, #contentWrapper --></div></div> <div id="extras"> <hr /> <!-- remove if first subsection starts with numbered heading --> <div class="subSection"> <img src="images/sidebar1.jpg" alt="" /> <!-- .subSection --></div> <div class="subSection"> <img src="images/sidebar2.jpg" alt="" /> <!-- .subSection --></div> <!-- #extras --></div> <!-- .widthWrapper, #main --></div></div> <hr /> <!-- remove if #footer starts with numbered heading --> <div id="footer"><div class="widthWrapper"> <span>This site is powered by...</span> Design & Technology: D.S. <!-- .widthWrapper, #footer --></div></div> </body></html> Code (markup): The SPAN inside the H1 is for gilder-levin image replacement, the use of H1, H2 and HR provides ALL the document structure you need. Semantic markup means you don't need to waste time throwing classes on EVERYTHING, and all the DIV in there are ENTIRELY for presentational use only. (which is why replacing them with allegedly semantic HTML 5-tardery is 100% grade A farm fresh cow patties). Can I assume you never learned how to use numbered headings properly? I'm just saying since you've got DIV in there doing their job. In HTML 4 rules, a H1 is the heading under which everything on the page is subsections -- which is why you really should only have on H1, and why that H1 is typically best used as the site title. H2's indicate the start of subsections of the h1, h3 are the start of subsections of the H2, and so forth. HR indicate a change in section/topic where a numbered heading is unwarranted or undesired -- which is why one can assume the page footer is anything after the last H2 or HR -- making SECTION, NAV and FOOTER completely redundant and utterly pointless. Now, if you REALLY want to use the pointless HTML 5 nonsense, it has different rules IF you use SECTION and ARTICLE -- most of the DIV.newsItem would be ARTICLE, DIV#top and DIV#/main would be section, and all the numbered headings would be H1 since opening a section or article 'resets the count' -- crapping all over existing UA's ability to navigate the page and resulting in completely gibberish document structure with no logical heading orders -- then people wonder why I call HTML 5 bullshit. Though actually the entire PREMISE of said "assignment" was bullshit; starting out from some goof-assed PSD jockey's "pretty picture" of what a website MIGHT look like is a bunch of broken, back-assward, cart before the horse idiocy. In general 99.99% of PSD jockeys sleazing out "designs" don't know enough about HTML, CSS, accessibility minimums, to be designing JACK ****. Any client or prospective employer who came to me with a PSD at this point would probably end up with my boot so far up their backside they'd be flossing with my laces -- as I would be ashamed to have my name associated with the resulting garbage broken ultimately useless to users "website" that ends up vomited up as a result. Things like the false simplicity form, perfect width 'tab' type elements at the top, and so forth just reek of your typical "I canz drawz prettiez picturz" idiocy vomited up by someone who had no business making a web design in the first place. There's a reason my approach to site "design" is to start out with my content (or a reasonable facsimile of what my content will be) in a flat text editor, putting it into a logical document order. (as if HTML never even existed). I then mark it up semantically (mostly numbered headings, paragraphs, lists and links) basing my tag choices ENTIRELY on what the tags MEAN, NOT WHAT THEY LOOK LIKE! -- if you choose your tags based on their default appearance, you're choosing the wrong tags for the wrong reasons. THEN I bend that markup to my will with CSS to make my layoutS -- YES, PLURAL since there are at least TWO media targets (screen and print) and all layouts should be semi-fluid, elastic AND responsive multiplying the layout count manyfold. This of course is something completely alien to the nudniks sleazing out PSD's since they inherently work in a medium that is fixed in width and concept. At the layout stage I add any DIV or SPAN (semantically neutral containers) as needed... then and ONLY then do I do things like add colors and images to further enhance the appearance. Then I add any scripting 'enhancement' to the page keeping in mind the unwritten rule of JavaScript; "If you can't make the page work without scripting FIRST, you likely have no business adding scripting to it." It's called progressive enhancement -- which means that should any of those fancy bits of tech become blocked, inapplicable or otherwise unavailable the page can still deliver what's important -- CONTENT -- to the user. ... since at the end of the day people visit websites for the CONTENT, NOT the goofy graphics and gee ain't it neat animooted BS you hang around the content; a concept completely alien to your typical artsy-fartsy PSD scam artist. Sad part being, the artsy PSD jockeys have done a excellent job of taking over the industry with their 100% grade A farm fresh manure, as people right now are so obsessed with things being flashy, there is little if any substance left in any project -- turning most sites built on the broken halfwit methodology of sleazing out a PSD first into little more than pointless money pits and bounce city. Let's just say there's a reason that no matter how badly coded they are the real success stories of the Internet like Facebook, Amazon, E-Bay, Google, Slashdot aren't exactly a visual tour-de-force. If you think any of those had somebody spanking it on the screen in Photoshop you're completely deluded. They have content of value presented in as simple a manner as possible to the user! Which is why all the 'gee ain't it neat' presentational artsy nonsense and scripttardery is typically just dumping a can of shellac on a pile; the end result is just bug **** on horse **** no matter how much you polish it.
Wow! That was fast and thorough! Thank you very much! I'll take next few days to read it and examine it thoroughly, I'm sure it's of great help! Just as I quickly scanned your post, I've noticed "Now, if you REALLY want to use the pointless HTML 5 nonsense...", as I explained, that was mandatory: HTML5 and CSS3 Thanks again!
Which really is the point at which I whip out the can of Kiwi and a clean rag, as I'll need it to clean my boots after where I stick it in the person who came up with making that 'manditory'. It's a great litmus test for "this jackass doesn't know what they're talking about" -- and in this case I'd say you're possibly better off NOT working for them.