The Official Guide to HTML5 Boilerplate
Tutorial Details
- Template: HTML5 Boilerplate
- Tutorial Format: Screencast
- Difficulty: Beginner - Moderate
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Paul Irish
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
I love Paul.
I love lamp.. I LOVE LAMP!!!!
ilu 2, man.
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.
the core jQuery team member writes for Nettuts thats sounds cool
Good post
Thanks… I was waiting for this post after I checked out the earlier article about HTML5 Boilerplate
Ahh, it’s this kinda stuff I like seeing on the internet…
This’ll be great for ANY upcoming projects I would work on..
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!
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..
I tried to comment on the boilerplate site that i wanted to sex html5boilerplate, but it got moderated :’(
I love it so.
LOL
Hey Paul,
How did you get the textmate icon in Finder for opening folders in Textmate?
http://manas.tungare.name/software/finder-toolbar-scripts/ :)
That toolbar button is GREAT! Thank you very much for the link!
Apologies for the double comment, but I found the answer online. Not sure if this is how Paul does it, but this script works for me (says Leopard but seems to support Snow Leopard as well)
http://henrik.nyh.se/2007/10/open-in-textmate-from-leopard-finder
I’m surprised this isn’t a premium tutorial!
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.
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!
Hey hey Paul! Thanks for this! I really appreciate you making this awesome video. Thanks again!
Nice work!
Where is a Flattr button when you need it? :/
That was awesome! Thanks for the detailed intro. Downloading it now!
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!
great video. Now I can fully dive into this thing without any worries :)
Wow, 3 line valid htlm5 document that is crazy.
Im download HTML5 Boilerplate now.
Thank you.
This package looks so valuable, thanks for the hard work. The video is very helpful as well.
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.
It’s just the default look of Chrome on mac. No special theme. :)
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
hey can you explain more how plugins.js work. My english is quiet bad !
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. :)
I presume that these 3rd party plugins are not minified when you put them in there?
Great job, once again. =)
Loads of great stuff in there! Thanks Paul!
Cheers,
James
This is plain excellent. Thank you so much.
I seriously hope you receive more than the regular 150€ for these tuts, Paul. :D
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.
Thanks for tutorial Paul. I really like video tuts little bit more than raw text tuts.
Great post, really helpful.
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.
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.
I just updated the 404 based on your feedback: http://github.com/paulirish/html5-boilerplate/commit/6735c0e
thanks!
Fantastic! I’m sold.
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.
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.
Thanks Paul,
This stuff is brilliant.
very informative video. can’t wait to use it. i like the name too, Boilerplate.
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
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.
Thanks for that video tutorial dude .Fantastic article !
any chance at a non-video version?
Yeah, download the comented version ;)
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.
Thanks for this post. It’s really useful.
Great stuff Paul. Will definitely be checking this out soon.
Fantastic! So thorough. I will always be starting my projects using this boiler plate.
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
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!
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 :)
We just moved it today.
http://github.com/paulirish/html5-boilerplate/commit/20cef6944
And I updated that post:
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Sooo.. good call. :)
How can I download the video?
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
Thanks for this great and useful owerview !
Great stuff !!!
Really great tutorial and looking forward to putting some HTML5 and CSS3 in action without worrying about ‘certain’ browsers :)