A fully functional demo URL: http://69.24.73.172/demos/index.htmlNote that in FireFox there is a small horizontal scrollbar bug which I have fixed at home.HTML:<!DOCTYPE html><html>  <head>        <meta charset=UTF-8 />        <title>Welcome to Scirra.com</title>        <meta name=description content=Construct 2, the HTML5 games creator. />        <link rel=stylesheet href=css/default.css type=text/css />         <link rel=stylesheet href=plugins/coin-slider/coin-slider-styles.css type=text/css />        <script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js></script>        <script type=text/javascript src=js/common.js></script>        <script type=text/javascript src=plugins/coin-slider/coin-slider.min.js></script>        <script type=text/javascript src=js/homepage.js></script>    </head>  <body>   <div class=topBar></div>    <div class=mainBox>        <div class=headWrapper>           <div class=searchWrapper>                <div class=searchBox>                    <input type=text id=SearchBox />                    <div class=s searchIco></div>                </div>            </div>          </div>      <div class=topMenu>            <a href=# class=topSelWrapper>Home</a>            <a href=# class=topNormal>Forum</a>            <a href=# class=topNormal>Contruct</a>            <a href=# class=topNormal>Arcade</a>            <a href=# class=topNormal>Manual</a>            <a href=# class=topNormal>Support</a>            <a href=# class=topNormal>Contact</a>        </div>    <div class=subMenu>            <a href=# class=subSelWrapper>Homepage</a>              <a href=# class=subNormal>Construct</a>            <a href=# class=subNormal>Products</a>            <a href=# class=subNormal>Community Forum</a>            <a href=# class=subNormal>Contact Us</a>        </div>    <div class=contentWrapper>            <div class=wideCol>                <div id='coin-slider' class=slideShowWrapper>                    <a href=# target=_blank>                        <img src='images/screenshot1.jpg' >                        <span>                            Scirra software allows you to bring your imagination to life                        </span>                    </a>                    <a href=#>                        <img src='images/screenshot2.jpg' >                        <span>                            Export your creations to HTML5 pages                        </span>                    </a>                        <a href=#>                        <img src='images/screenshot3.jpg' >                        <span>                            Another description of some image                        </span>                    </a>                    <a href=#>                        <img src='images/screenshot4.jpg' >                        <span>                            Something motivational to tell people                        </span>                    </a>                </div>                  <div class=newsWrapper>                    <h1>Latest from Twitter</h1>                    <div id=twitterFeed>                  <p>The news on the block is this.  Something has happened some news or something. <span class=smallDate>About 6 hours ago</span></p>                    <p>Another thing has happened lets tell the world some news or something. Lots to think about.  Lots to do.<span class=smallDate>About 6 hours ago</span></p>                    <p>Shocker!  Santa Claus is not real.  This is breaking news, we must spread it. <span class=smallDate>About 6 hours ago</span></p>                   </div>                </div>            </div>            <div class=thinCol>                <h1>Main Heading</h1>                <p>Some paragraph goes here.  It tells you about the picture.  Cool!  Have you thought about downloading Construct 2?  Well you can download it with the link below.  This column will expand vertically.</p>                <h2>Help Me!</h2>                <p>This column will keep expanging and expanging.  It pads stuff out to make other things look good imo.</p>                <h2>Why Download?</h2>                <p>As well as other features, we also have some other features.  Check out our <a href=#>other features</a>.  Each of our other features is really cool and there to help everyone suceed.</p>                <a href=# class=s downloadBox>                    <div class=downloadHead>Download</div>                    <div class=downloadSize>24.5 MB</div>                </a>                    </div>            <div class=clear></div>              <h1>This Weeks Spotlight</h1>               <div class=halfColWrapper>                <img src=images/spotlight1.png class=spotLightImg />                <p>Our spotlight member this week is Pooh-Bah.  He writes good stuff.  Read it.</p>                <a class=moreInfoLink href=#>Learn More</a>            </div>            <div class=halfColSpacer>&nbsp;</div>            <div class=halfColWrapper>                <img src=images/spotlight2.png class=spotLightImg />                <p>Killer Bears is a scary ass game from JimmyJones.  How many bears can you escape from?</p>                <a class=moreInfoLink href=#>Learn More</a>            </div>            <div class=clear></div>        </div>    </div>       <div class=footerWrapper>        <div class=footerBox>             <div class=footerItem>                <h3>Community</h3>                <a href=#>The Blog</a><br />                <a href=#>Community Forum</a><br />                <a href=#>RSS Feed</a><br />                <a class=s footIco facebook href=http://www.facebook.com/ScirraOfficial target=_blank></a>                <a class=s footIco twitter href=http://twitter.com/Scirra target=_blank></a>                <a class=s footIco youtube href=http://www.youtube.com/user/ScirraVideos target=_blank></a>            </div>            <div class=footerItem>                <h3>About Us</h3>                <a href=#>Contact Information</a><br />                <a href=#>Advertising</a><br />                <a href=#>History</a><br />                <a href=#>Privacy Policy</a><br />                <a href=#>Terms and Conditions</a>            </div>        <div class=footerItem>                <h3>Want to Help?</h3>                You can contribute to the community <a href=#>in lots of ways</a>.  We have a large active friendly community, and there are lots of ways to join in!<br />                <div class=ralign>                <a href=#><strong>Learn More</strong></a>                </div>            </div>            <div class=clear></div>           </div>    </div><div class=copyright>        Copyright &copy; 2011 Scirra.com.  All rights reserved.    </div>   </body></html>(Note head wrapper div is empty at the moment, this will have a logo at a later date).CSS:    /* Main Layout Elements */    body{        margin: 0;        padding: 0;        font-family: Arial, Helvetica, Verdana;        background: #fff url(../images/background.png) repeat-x;        color:#444;    }    p {        margin: 0 0 20px 8px;    }    a{        color: #0066FF;    }    .smallDate{        float:right;        color: #339900;    }    .topBar{        position:absolute;        background-color: #339900;        height: 30px;        border-bottom:2px solid #3FBF00;        width: 100%;        z-index:1;        -moz-box-shadow: 0px 0px 5px #555;        -webkit-box-shadow: 0px 0px 5px #555;        box-shadow: 0px 0px 5px #555;    }    h1{        margin:0;        margin-bottom:5px;        font-size:35px;        color: #339900;        font-weight:normal;    }    h2{margin:0 0 5px 0;    font-size:22px;    color: #339900;    font-weight:normal;}h3{    text-shadow: black 0.1em 0.1em 0.2em;    text-transform: uppercase;    font-size: 17px;    font-weight: bold;    margin-bottom: 3px;}.ralign{    text-align:right;}.clear{    clear:both;}/* Sprite definitions and positioning */.s{    background-image:url(../images/sprites.png);    background-repeat:no-repeat;}.facebook{    background-position: 0 0;}.twitter{    background-position: 0 -40px;}.slideShowWrapper{    height:261px;    overflow:hidden;    -moz-box-shadow: 0px 0px 5px #555;    -webkit-box-shadow: 0px 0px 5px #555;    box-shadow: 0px 0px 5px #555;}.youtube{    background-position: 0 -80px;}/* Main Wrappers */.contentWrapper{    padding: 10px;}.headWrapper{    height: 120px;}.footerWrapper{    position:relative;    z-index:1;    top: -20px;    height:155px;    padding-top: 15px;    background-image: url(../images/background-footer.png);    background-repeat:repeat-x;    margin-bottom: -20px;overflow: hidden;}.mainBox{    -moz-box-shadow: 0px 0px 12px #444;    -webkit-box-shadow: 0px -20px 28px #c0c0c0;    box-shadow: 0px 0px 12px #444;    margin: 0 auto;    width: 770px;    border:0;    z-index:2;    position:relative;    background-color: #ffffff;    -moz-border-radius-bottomright: 10px;    border-bottom-right-radius:  10px;    -moz-border-radius-bottomleft: 10px;    border-bottom-left-radius:  10px;}/* Footer */.footerBox{    color: white;    font-size: 13px;    margin: 0 auto;    width: 700px;    margin-top:5px;}.footerItem{    float: left;    width: 33%;}.footerItem a{    font-size:13px;    color:white;}.footerItem a:hover{    color: #ffaa00;}.copyright{    color: white;    text-align:center;    background-color: #000000;    font-size: 12px;    padding: 3px;}.footIco{    height: 40px;    width: 32px;    float: left;    margin-top: 7px;    position:relative;    left: -4px;    display:block;}/* Search */.searchWrapper{    float:right;    background-color: #339900;    width: 250px;    height:53px;    position:relative;    left: 50px;    -moz-border-radius-bottomright: 10px;    border-bottom-right-radius:  10px;    -moz-border-radius-bottomleft: 10px;    border-bottom-left-radius:  10px;    text-align:center;    line-height:50px;   }.searchBox{    position:Relative;    left:12px;}.searchBox input{    height:20px;    padding-left:10px;    color: #c0c0c0;    line-height:20px;    padding-right:25px;}.searchIco{    height: 37px;    width: 36px;    float: right;    background-position: -40px 0;    position:relative;    left:-33px;    top:11px;}/* Menus */.topMenu{    height:38px;    background-color: #339900;    font-size: 15px;    font-weight: bold;    line-height:38px;}.topMenu a{    text-shadow: #114400 1px 1px 1px;    display: block;    float:left;    padding-left: 8px;    padding-right: 8px;    color:white;}.subMenu{    height: 33px;    background-color: #1B5300;    font-size: 13px;    line-height:33px;}.subMenu a{    display: block;    float:left;    padding-left: 8px;    padding-right: 8px;    color:white;    text-decoration: none;}.subLinkLImg{    float:left;    width:11px;    height:23px;    background-position: -80px 0;}.subLinkSelected{    background-color:#123700;    float:left;    height:22px;    line-height:22px;}.subSelWrapper{    text-decoration: none;    margin-right: -20px;    margin-left: 5px;}.subNormal{    margin-left: 25px;}   .subNormal:hover{    background-color:#123700;    text-decoration: none;}   .ssOrient{    position:relative;    top:6px;}.subLinkRImg{    float:right;    width:11px;    height:23px;    background-repeat:no-repeat;    background-position: -91px 0;}.topSelWrapper{    text-decoration: none;    margin-right: -20px;    margin-left: 5px;}.topLinkLImg{    float:left;    width:11px;    height:33px;    background-position: -105px 0;}.topLinkRImg{    float:right;    width:11px;    height:33px;    background-position: -116px 0;}.topLinkSelected{    background-color:#1B5300;    float:left;    height:33px;    line-height:33px;}.tlOrient{    position:relative;    top:5px;}.topNormal{    margin-left: 25px;    text-decoration: none;}.topNormal:hover{    background-color:#2B8200;}/* Download box link */.downloadBox{    display: block;    background-position: -134px 0;    width: 215px;    height: 55px;    margin: 0 auto;    text-align:right;    color:white;    text-transform: uppercase;    text-decoration: none;}.downloadHead{    font-weight:bold;    font-size:17px;    padding-top:14px;    padding-right: 15px;}.downloadSize{    padding-right: 15px;    font-size:14px;    margin-top: -3px;}/* Other */.moreInfoLink{    display:block;    color:white;    font-size:12px;    font-weight:bold;    text-decoration: none;    float:right;    height:17px;    background-color:#3366CC;    text-align:center;    padding:0 12px 0 12px;    line-height:17px;    min-width:100px;    -moz-border-radius: 10px;    border-radius:  10px;    margin-top:-12px;    margin-bottom:10px;    clear:both;}.moreInfoLink:hover{    text-decoration:underline;    background-color: #537DD5;}.thinCol{    float:left;    width:270px;}.wideCol{    float:left;    margin-right:10px;    width:470px;}.newsWrapper{    position:relative;    top: 5px;}.halfColSpacer{    width:4%;    float:left;}.halfColWrapper{    float:left;    width:48%;  }.spotLightImg{    float:left;    margin-right:15px;    -moz-border-radius: 10px;    border-radius:  10px;    -moz-box-shadow: 3px 3px 3px #444;    -webkit-box-shadow: 3px 3px 3px #444;    box-shadow: 3px 3px 3px #444;    width: 90px;    height: 90px;}.slideShowWrapper img{    width:470px;    height: 261px;    border: 0;}.slideShowWrapper a{    text-decoration: none;}I've tried really hard to design this with progressive enhancement in mind, so I think it degrades quite nicely.IE7 and below aren't supported.  I am completely fine with taking that decision.  I'm considering adding some sort of notification though.It's tested in Safari, FF, IE8 and Chrome.I've used a sprite image to improve load speed.  CSS isn't compressed/optimised yet, I'll do that later.Comments on CSS/HTML/JS are all welcome.  I really want to nail this as being as near to perfect as possible.  Main areas of importance are:SEO friendlyFast and responsiveAccessible
Demo of advertisment website
javascript;css;html
I didn't have a look in detail, but some ideas/observations/remarks:You might save some div elements with using the float style (especially in your header). Try to avoid using divs for styling only and use the logical corresponding tags (for example in <div class=downloadHead>Download</div>).Menus should be lists (<li>) from a logic point of view (e.g. like here)Try to put all javascript includes at the end where possible (this has some disadvantages though, (one of many discussions about that topic))As long as your code doesn't become more complicated it should render fast. I think your biggest problem will be the underlying application (assuming the site is not static). Yahoo has some great guidelines on how to speed up websites. Accssible: You're missing a lot of title and alt tags which are especially important for screen-readers (they also require the elements to be in a logical order, how to optimize a website for them is out of scope here). 