The Official Guide to HTML5 Boilerplate

The Official Guide to HTML5 Boilerplate

on Aug 23rd 2010 with 92 comments
Tutorial Details
Download Source Files
Demo View It Online
This entry is part 7 of 14 in the HTML5 and You Session
« PreviousNext »

When we helped to promote the recently released HTML5 Boilerplate in early August, multiple comments were made, which expressed a desire for a full video overview of the template. Thankfully, Paul Irish, the co-creator, recorded a full video walk-through, exclusively for Nettuts+. In this screencast, he meticulously reviews each page, and then further goes on to explain why and when you would use each snippet in your projects.

The product of years of learning, this video is not to be missed! Even if you have no intention of using this template, you’ll still learn an array of helpful techniques.

You also might like Paul’s “10 Things I Learned from the jQuery Source” screencast. It’s equally educational and funny.

Tags: html5
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Html5 and CSS3 aficionado, Google Chrome dev relations, jQuery team member, interaction designer and front-end developer, music snob on @Aurgasm  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://vladh.net vladh

    I love Paul.

    • w1sh

      I love lamp.. I LOVE LAMP!!!!

    • http://paulirish.com Paul Irish

      ilu 2, man.

      • http://www.buitenaardig.nl/ Philip Wallage

        No yooooouuu put the phone down first!
        Awesome job Paul and everyone who’s working hard to make the best of what we have to go trough as internet today. I’ve made “something” like this before but it’s not even half of what this is, so ‘ill be using this for all my site from now on. Thanks again, really appreciate it.

  • http://eyoosuf.com Yoosuf

    the core jQuery team member writes for Nettuts thats sounds cool

  • http://www.edwardmargallo.com Edward

    Good post

  • http://szsza.info Szabolcs Szakacs

    Thanks… I was waiting for this post after I checked out the earlier article about HTML5 Boilerplate

  • http://anastazqui.net/ Lashan

    Ahh, it’s this kinda stuff I like seeing on the internet…

    This’ll be great for ANY upcoming projects I would work on..

  • http://www.freshclickmedia.com Shane

    Fantastic video Paul (I’m currently watching it, and it’s not all the way through yet – it might end really badly :) ), but I’ve been looking at boilerplate for a week or so. Fantastic stuff – I learned a couple of things from the commented version, and it’s a great starting point for the HTML5 verison of my WordPress site.

    Thanks!

  • http://www.joewilcox.co.uk Joe Wilcox

    Looks so good.. Cant wait to build my first site in HTML 5!!

    Thanks for all of your effort and time in putting this together..

    Thanks..

  • eric

    I tried to comment on the boilerplate site that i wanted to sex html5boilerplate, but it got moderated :’(

    I love it so.

    • http://www.ssiddharth.com Siddharth

      LOL

  • Jack Franklin

    Hey Paul,

    How did you get the textmate icon in Finder for opening folders in Textmate?

  • http://shaneparkerphoto.com Shane Parker

    I’m surprised this isn’t a premium tutorial!

  • http://corbacho.info Daivd Corbacho

    Coool. Thanks for this vieo, now I grok better some parts of your code.
    My favourite tip: Load locally jquery if is not available in google CDN. And I will play around with the console.log alternative. Looks promising :D

    Mainly I develop for Drupal, and I will look into adapt some of this things to Drupal. If you have some opinion about this platform, I will be interested to hear about from you.

  • Tunox

    Thanks a lot to both Paul and Divya for giving birth to this baby, and cudos again for this detailed overview. When I first downloaded Boilerplate there was quite a lot of js or htaccess stuff that was beyond my grasp. This video cleared up a lot of that and gave some pointers to further reading on the matter.

    Last but not least thanks to nettuts for making this video happen. Your rock!

  • Chris Sanders

    Hey hey Paul! Thanks for this! I really appreciate you making this awesome video. Thanks again!

  • http://www.skaverat.de SkaveRat

    Nice work!

    Where is a Flattr button when you need it? :/

  • http://jacobdubail.com Jacob

    That was awesome! Thanks for the detailed intro. Downloading it now!

  • http://www.dikaio.com/ Dikaio

    I’ve been wanting to use the boilerplate for some time now and was waiting to read up on each method used that I hadn’t used before so this was a HUGE GIFT, thanks Paul!

  • Kevin Rajaram

    great video. Now I can fully dive into this thing without any worries :)

  • Damion

    Wow, 3 line valid htlm5 document that is crazy.
    Im download HTML5 Boilerplate now.
    Thank you.

  • http://jimb0.com jimb0

    This package looks so valuable, thanks for the hard work. The video is very helpful as well.

  • tim

    I love the HTML5 Boilerplate and this video just puts more icing on the cake. On a side note… what theme are you using for Chrome? I love the simple look.

    • http://paulirish.com Paul Irish

      It’s just the default look of Chrome on mac. No special theme. :)

  • Webfreak05

    I’m wondering why font’s on this site are appearing like this on my browsers (Chrome, firefox)…am i missing a font?

    http://twitpic.com/2hmtqs/full

  • jeff

    hey can you explain more how plugins.js work. My english is quiet bad !

    • http://paulirish.com Paul Irish

      I like to put 3rd party scripts in plugins.js.. Or any jQuery plugins I’m using like hoverIntent or whatever. That way I can keep them together, in one file, but separate from my application code.

      This isnt really necessary, but it’s the pattern I’ve gotten used to. :)

      • Joe

        I presume that these 3rd party plugins are not minified when you put them in there?

  • http://kevingroenendaal@codecrunchers.net Kevin

    Great job, once again. =)

  • http://jamesduncombe.com James Duncombe

    Loads of great stuff in there! Thanks Paul!

    Cheers,

    James

  • http://www.etabrizi.co.uk Emyr Tabrizi

    This is plain excellent. Thank you so much.

  • A reader

    I seriously hope you receive more than the regular 150€ for these tuts, Paul. :D

  • http://jaimievansanten.nl Jaimie van Santen

    Awesome work Paul!

    Can’t wait to use it in my future projects, finally able to use HTML5 without worrying about oldskool IE users.

    Congrats on joining Google! Love the yayQuery casts.

  • http://www.giulianoliker.com Giuliano

    Thanks for tutorial Paul. I really like video tuts little bit more than raw text tuts.

  • http://www.designmango.com DesignMango

    Great post, really helpful.

  • Andreas Madsen

    Thanks a lot.

    But:
    Would you please cover the 404.html a bit more.
    I think i looks really strange. There are tow tags i don’t know about “details and summary” and if i set a
    details {border : 1px solid #F00 } the details tag is just a line.

    And at last why is there not hot pink selection color.

    • http://paulirish.com Paul Irish

      details and summary are two new tags. You spotted a bug in that i should have set them to display:block.
      And maybe it needs some hot pink.. :)

      In general I just created a quick stub document. If someone else wanted to make the 404 more appropriate, I’d be down with that. I think we can have some fun with it.

    • http://paulirish.com Paul Irish

      I just updated the 404 based on your feedback: http://github.com/paulirish/html5-boilerplate/commit/6735c0e

      thanks!

  • http://www.jenileigh.com Jen Kelly

    Fantastic! I’m sold.

  • http://kevinurrutia.com/ Kevin

    Thanks so much for this video review Paul. I have implemented the ::selection feature =) because I really love the hot pink too! I have also picked up the font smoothing trick.

  • Erik

    Even if you don’t use the boilerplate its worth reading through the commented version — unless you already know everything you’re pretty likely to learn something worth knowing.

    Outstanding work.

  • Joel Lignier

    Thanks Paul,

    This stuff is brilliant.

  • http://www.freetipsandtricks.com Deepika

    very informative video. can’t wait to use it. i like the name too, Boilerplate.

  • Salman

    Paul, great work, been a fan of yours for long time

    well it will still take a lot to convince me to start using html5 in my commercial projects

    as far as css3 goes it wont work in ie6-8 without chrome frame but we can use modernizer to write css for browser that doesn’t support css3

    but

    isn’t there any js script that uses some kind of black magic to makes ie6-8 to start sporting css3, it will be cool if this happens, these is one vml based render for css3 but that is pretty slow

    • http://paulirish.com Paul Irish

      yeah.. css3pie is promising and a lot of people really like its results… I’m personally not gonna throw it everywhere, but it’s a decent compromise.

      I agree with Andy Clarke in his style of progressive enhancement, which is .. design your site to look fucking badass in fucking badass browsers.. in less capable ones it will look less great, but certainly still functional.
      We’re just past a point now where we can expect 100% visual consistency across browsers. Educating your clients on the performance impact (page load time, responsiveness, etc) of making some of these new tricks work on old dogs goes a long way.

  • http://philwebservices.i.ph/ John Paul

    Thanks for that video tutorial dude .Fantastic article !

  • http://www.tastybytes.net Brian

    any chance at a non-video version?

    • Tunox

      Yeah, download the comented version ;)

  • Micah

    This tutorial is brilliant. Thank you, Paul! I wish someone would do this exact same thing for the new WordPress 3.0 theme and all the new functionality and code.

  • http://www.cedartreeconsulting.com Sammy

    Thanks for this post. It’s really useful.

  • http://www.talesfromtheblackforest.com Israel

    Great stuff Paul. Will definitely be checking this out soon.

  • http://rodrigomunoz.com Rodrigo Munoz

    Fantastic! So thorough. I will always be starting my projects using this boiler plate.

  • http://www.moltee.com/ Reece

    Really loving the sites and apps people are creating with html5, css3, jquery extra… this one is a fantastic example of not only the code but the design… very easy on the eye with fantastic visual effects.. looking forward to some new posts in future with these new web technologys

  • http://www.web-on-a-nutshell.com/ Jatazoulja

    Tis’ just what I’m looking for!

    Hope you don’t mind, I made a blank template for wordpress using boilerplate! this will help me a lot making all those custom template and staying up-to-date with the current trend…

    Cheers!

  • Jannis Gundermann

    Hi,
    really enjoyed the walk through. Many thanks!

    One question, why is the boiler plate using the following on the body instead of having it on the html tag?

    <!–[if lt IE 7]> <body class=”ie ie6 lte9 lte8 lte7″> <![endif]–>
    <!–[if IE 7]> <body class=”ie ie7 lte9 lte8 lte7″> <![endif]–>
    <!–[if IE 8]> <body class=”ie ie8 lte9 lte8″> <![endif]–>
    <!–[if IE 9]> <body class=”ie ie9 lte9″> <![endif]–>
    <!–[if gt IE 9]> <body> <![endif]–>
    <!–[if !IE]><!–> <body> <!–<![endif]–>

    I was just reading through the blog post on your blog in which it appeared to actually be better to be used on the html tag over the body tag. (http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/)

    Just wondering :)

  • subrat

    How can I download the video?

  • Ben Rogerson

    Great stuff Paul!
    I learnt quite alot of tricks from the Boilerplate.

    I loved that you added
    .ir { display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat; } in the style.css file. I’ve used this trick for a long time and it’s very handy!

    I’ll be sure to follow your work in the future.

    Ben

  • http://rolling-webdesign.com Theo

    Thanks for this great and useful owerview !

  • http://www.conitive-designs.com Asif Siddiqui

    Great stuff !!!

  • http://www.airboxmedia.com Jack Barham

    Really great tutorial and looking forward to putting some HTML5 and CSS3 in action without worrying about ‘certain’ browsers :)

Newer Comments →