Skip to content

Instantly share code, notes, and snippets.

@oli

oli/gist:1141532

Created August 12, 2011 05:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oli/1141532 to your computer and use it in GitHub Desktop.
Save oli/1141532 to your computer and use it in GitHub Desktop.
Download ZIP
http://f.al.lv/r/ for @svwv — updated
Raw
gistfile1.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Rocket Rockers — Tons of Friends</title>
<meta name="description" content="Rocket Rockers Too Pop For Punk, Too Punk For Pop. Tons of Friends.">
<meta name="author" content="Setharyono">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="icon.png" rel="icon">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<h1>Rocket Rockers — Tons of Friends</h1>
<nav class="navi">
<ul>
<li><a href="">home</a><sup> ⚫</sup></li>
<li><a href="">news</a><sup> ⚫</sup></li>
<li><a href="">about</a><sup> ⚫</sup></li>
<li><a href="">shows</a><sup> ⚫</sup></li>
<li><a href="">albums</a><sup> ⚫</sup></li>
<li><a href="">store</a></li><br>
<li><a href="">photos</a><sup> ⚫</sup></li>
<li><a href="">videos</a><sup> ⚫</sup></li>
<li><a href="">downloads</a><sup> ⚫</sup></li>
<li><a href="">rrf</a><sup> ⚫</sup></li>
<li><a href="">contact</a></li>
</ul>
</nav>
<nav class="social">
<ul>
<li><a href="http://fb.me/rocketrockers"><img alt="Rocket Rockets on Facebook" src="images/s.fb.png"></a></li>
<li><a href="http://twitter.com/rocket_rockers"><img alt="Rocket Rockets on Twitter" src="images/s.tw.png"></a></li>
<li><a href="http://myspace.com/rocketrockers"><img alt="Rocket Rockets on MySpace" src="images/s.my.png"></a></li>
<li><a href="http://youtube.com/rocketpunkers"><img alt="Rocket Rockets on YouTube" src="images/s.yt.png"></a></li>
<li><a href="http://purevolume.com/rocketrockers"><img alt="Rocket Rockets on PureVolume" src="images/s.pv.png"></a></li>
</ul>
</nav>
</header>
<div id="content" class="content">
<section id="news">
<h2>News</h2>
<!-- these articles should all have h1-h6 headings, or if they don’t have headings maybe this should be a list -->
<article>
<header><a href="" class="post"><time datetime="2011-07-17" pubdate>2011/07/17</time> - Sing along session 7.2</a></header>
<p>Yang lagi santay di Bdg, mari ke depan Gedung Sate, kita bakalan
perform jam 5 sore. Cuacanya enak banget nih buat sing along ;)</p>
<footer>by : <a href="" class="post">Admin</a> ⸰ <a href="" class="post">10 comments</a></footer>
</article>
<!-- more content… -->
<p><a href="" class="post">read more news</a></p>
</section>
<section id="photos">
<h2>Photos</h2>
<img src="images/photos.png">
<p><a href="" class="post">view more photos</a></p>
</section>
<section id="shows">
<h2>Shows</h2>
<ol>
<li><a href="" class="shwl"><time datetime="2011-07-17">2011/07/17</time> <span>Bandung, Indonesia</span></a>
5:00pm at Yamaha @ Gedung Sate
</li>
<!-- more content… -->
</ol>
<p><a href="" class="post">view more shows</a></p>
</section>
<section id="videos">
<h2>Videos</h2>
<img src="images/videos.png">
<!--
<object style="height: 183px; width: 300px">
<param name="movie" value="http://www.youtube.com/v/fUTUz_P4zLs?version=3">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed src="http://www.youtube.com/v/fUTUz_P4zLs?version=3" type="application/x-shockwave-flash"
allowfullscreen="true" allowScriptAccess="always" width="300" height="183">
</object>
-->
<ul class="vid">
<li><a href="">Ingin Hilang Ingatan</a></li>
<li><a href="">Terobsesi</a></li>
<li><a href="">Hari Untukmu</a></li>
<li><a href="">Membaca Tanpa Mata</a></li>
</ul>
<p><a href="" class="post">watch more videos</a></p>
</section>
<section id="downloads">
<h2>Downloads</h2>
<ul class="inline-list">
<li><a href="" class="post">Tech Riders Rocket Rockers</a></li>
<li><a href="" class="post">Form Pendaftaran Rocket Rockfriends</a></li>
<li><a href="" class="post">Equipment Request &amp; Channel List</a><br></li>
</ul>
<section>
<h3>Wallpaper :</h3>
<img src="images/wallpaper.jpg">
<ul class="inline-list">
<li><a href="" class="post">1920x1200</a> | </li>
<li><a href="" class="post">1440x900</a> | </li>
<li><a href="" class="post">1280x1152</a> | </li>
<li><a href="" class="post">1024x768</a></li>
</ul>
</section>
<section>
<h3>Mp3 :</h3>
<ul class="inline-list">
<li><a href="" class="post">Reuni</a> | </li>
<li><a href="" class="post">Terobsesi</a> | </li>
<li><a href="" class="post">Hari Untukmu</a> </li>
</ul>
</section>
<p><a href="" class="post">view more downloads</a></p>
</section>
</div>
</div>
<!-- buat pas develop aja sih -->
<footer id="about">
<p>ai kamu</p>
<p>not so fast yo</p>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="js/libs/respond.min.js"></script>
<script src="js/jquery.dwFadingLinks.js"></script>
<script src="js/jquery.effects.core.js"></script>
<!-- this can probably be done by CSS transitions -->
<script type="text/javascript">
$(document).ready(function() {
$('.navi li a').dwFadingLinks({
color: '#fff',
duration: 200
});
$('.post').dwFadingLinks({
color: '#66bb3c',
duration: 200
});
});
</script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
@oli
Copy link
Author

oli commented Aug 12, 2011

  • put most JavaScript links just before </body> (exceptions include HTML5 Shiv)
  • have a page heading (!) ;) otherwise no one will know what the site is
  • use alt text on images for navigation
  • if you’re using Unicode you generally don’t need to use entities
    • except for &lt; and &amp;
  • (in general) use border-bottom over <hr />
  • use CSS via :after instead of <div class="clear"></div>
  • use CSS or lists instead of <br>
  • <section>, <article> etc should have an <h1>-<h6> element
  • look at hevent via microformats or microdata
  • use <time>
  • use CSS transitions over JavaScript when applicable

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment