You've already started watching HTML5 Quick Start with Boilerplate
In this Treehouse Quick Tip, Nick explains how to get a head start on your next project with HTML5 Boilerplate. Boilerplate is a front-end template that gives you everything you need to make your HTML5-based site ready for any browser.
-
0:00
[? Music ?] [Treehouse presents]
-
0:02
[Quick Tips] [HTML5 Quick Start with Boilerplate with Nick Pettit]
-
0:05
Hi, I'm Nick.
-
0:07
In this Treehouse Quick Tip, we're going to learn how to get a head start
-
0:10
on your next web project using the HTML5 Boilerplate.
-
0:14
The Web has reached a mature state where there is lots of rich history,
-
0:18
legacy code, a huge variety of web browsers,
-
0:21
and more devices like tablets and phones
-
0:23
than ever before.
-
0:25
It can be tough even knowing where to begin.
-
0:28
Fortunately, there is HTML5 Boilerplate,
-
0:31
which can help you get a jump start.
-
0:33
Let's check it out.
-
0:35
First, head on over to HTML5Boilerplate.com.
-
0:40
HTML5 Boilerplate is a free and open-source project
-
0:45
that's designed to help web designers and developers like you and me
-
0:48
get a head start on their next website.
-
0:52
If we scroll down here, we can see that it includes
-
0:55
Modernizer, which allows you to more easily include
-
0:58
HTML5 and CSS3 features
-
1:01
even when you have to support older browsers.
-
1:04
It also includes the latest version of jQuery,
-
1:07
optimized Google Analytics code, and more.
-
1:10
In addition, it also includes Normalize.css,
-
1:15
which is a modern CSS reset that will remove the default styling
-
1:19
that most browsers apply.
-
1:22
This will create a level playing field
-
1:24
for you to build your website.
-
1:26
Currently, at the time of this recording,
-
1:29
HTML5 Boilerplate is in version 4.0.
-
1:33
To download it, we'll go ahead and click this download button here,
-
1:38
and then we'll go ahead and unzip the file that we download,
-
1:43
and after we've unzipped the contents, we'll end up with a web directory
-
1:49
that you can start customizing for your needs.
-
1:52
For example, there are placeholder app icons
-
1:56
for mobile phones, but likely you'll want to replace these.
-
2:02
Now let's take a look at the HTML that comes with Boilerplate.
-
2:08
I'm going to open it up in my text editor,
-
2:11
which in this case is Sublime Text 2,
-
2:15
and if you look at this HTML and you've seen some basic HTML before,
-
2:21
there might be a lot here that looks strange or confusing to you.
-
2:25
The more bizarre parts are mostly due to support for older browsers
-
2:31
as well as some inconsistencies in older versions
-
2:35
of Internet Explorer.
-
2:37
For example, if we look up here at the top
-
2:40
or if we look right here, we'll see a lot of conditional comments
-
2:44
that will only take effect for specific versions of Internet Explorer.
-
2:50
In most cases, you'll want to go ahead and leave these in
-
2:54
as they'll offer the greatest range of cross-browser support for you.
-
2:59
If we scroll down here, you'll see an HTML comment
-
3:03
that says, "Add your site or application content here."
-
3:07
Right here at line 25 is where you'll want to go ahead
-
3:13
and start adding the content for your website,
-
3:16
which uncoincidentally, is between the 2 body tags.
-
3:22
HTML5 and all the browser inconsistencies
-
3:25
can be confusing, but if you just want to jump ahead of all of that
-
3:29
and get started making your website,
-
3:31
HTML5 Boilerplate is a great way to do that.
You need to sign up for Treehouse in order to download course files.
Sign up