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
← Older Comments
  • http://sevenfield.com Aaron Farr

    This has been a lifesaver! Thanks so much Paul.

  • http://www.jeffwagnerinteractive.com Jeff Wagner

    Real helpful set of tools, documentation and tutorial video. Nicely done.

  • http://newarts.at Drazen Mokic

    Really nice, thanks for taking time to explain everything.

  • http://bit.ly/cLZXGi Julian

    Finally! I made it all the way to end of the video!

    Best 40 minutes I ever spent, any personal project I create from now on will include some snippet of html5. Thanks for the walk through Paul, excellent work!

  • http://dillerdesign.com Drew Diller

    Hey Paul, thanks for the shout out on belatedpng. Some really vexing bugs in that software, but I’m glad it’s helping people.

  • Rhys

    I’d rather have a text transcript. *sigh*

  • Chris

    He wasn’t Irish :(

  • http://html5.mimoymima.com Brent Lagerman

    We’ve impliimented a lot of the tips here in our HTML5 WordPress Shell, if you use WordPress as your CMS check it out.

  • http://elziah.com Paul McDonough

    Lol – just rebuild my base template using the HTML 5 boilerplate –

    @Brent – loving the WordPress shell too for some of my other projects on the to do list :D

  • http://adirshotme.com a deer

    heh.. sweet frown.

  • http://sebastian-krebs.net Sebastian

    Thank you very much for the effort of explaining. Keep up the good work!

  • Anonymous

    PS! The video does not seem to work!

  • sk

    Awesome. Definitely worth the watch. The boilerplate was a bit over my head to begin with but I’m all over it like a rash now.

  • Ian

    It’s 2011 and I’m just now getting to this. Thanks a lot for the tutorial. Even though a lot has changed (missing css, js, and some missing things in the index.html file) your explanation helps a lot in understanding what it’s all for and how to use it.

    Would love to see an updated video for the latest version (v2.0-0-g8bfbd13 is what I downloaded).

    I haven’t looked through the rest of the html5 series yet but a series on developing with the boilerplate would be cool.

    Thanks! :-)

    • Sara

      I agree! please do a series on how to develop with the boilerplate, and maybe how to use twitter bootstrap with it too?

  • http://tobstudios.com Cory

    This really helped me understand how boilerplate can help me in some instances

  • Erik Forey

    Más información de HTML 5 en esta página de Microsoft está muy completa http://www.w3.org/html/logo/

  • M

    I enjoyed the explanation, but man, edit out all the coughing, sipping and uhhs, please. Very distracting..

  • http://www.tommyray.net TommyRay

    The video is no longer available. Have a new link or a link to new info? I notice it has changed considerably in a short amount of time. Thanks!

  • Reony Tonneyck

    There is a new 4.0 version of H5BP. They removed all their old videos, so you might want to update this page or remove it.

  • eryk

    Hey all i cant find the link to learn htlml5bp

  • Matt Wise

    Brilliant! Thank you so much :)

  • Sandip

    This really helped me understand how boilerplate can help me in some instances

  • Sally

    What is Ishmaelfive? If I didn’t already know what he was saying…

  • http://www.upgradedtutorials.info/ Wilbert Santos

    Here are great list of Best Front End Boilerplates for Fast and Rapid Development on Web Designs http://www.upgradedtutorials.info/web-design/best-front-end-boilerplates-for-fast-and-rapid-development/

  • somedude

    The author of the video should spend less time trying to be “geek hip” and speak intelligently, clearly and a little more professional.

    After watching this video, truth be told I still don’t understand because of his distracting nonsensical demeanour.

  • dazzlr

    Fantastic. Thanks

← Older Comments