1
00:00:00,000 --> 00:00:02,460
[? Music ?] [Treehouse presents]

2
00:00:02,460 --> 00:00:05,930
[Quick Tips] [HTML5 Quick Start with Boilerplate with Nick Pettit]

3
00:00:05,930 --> 00:00:07,170
Hi, I'm Nick.

4
00:00:07,170 --> 00:00:10,270
In this Treehouse Quick Tip, we're going to learn how to get a head start

5
00:00:10,270 --> 00:00:14,660
on your next web project using the HTML5 Boilerplate.

6
00:00:14,660 --> 00:00:18,550
The Web has reached a mature state where there is lots of rich history,

7
00:00:18,550 --> 00:00:21,700
legacy code, a huge variety of web browsers,

8
00:00:21,700 --> 00:00:23,820
and more devices like tablets and phones

9
00:00:23,820 --> 00:00:25,710
than ever before.

10
00:00:25,710 --> 00:00:28,240
It can be tough even knowing where to begin.

11
00:00:28,240 --> 00:00:31,620
Fortunately, there is HTML5 Boilerplate,

12
00:00:31,620 --> 00:00:33,200
which can help you get a jump start.

13
00:00:33,200 --> 00:00:35,340
Let's check it out.

14
00:00:35,340 --> 00:00:40,780
First, head on over to HTML5Boilerplate.com.

15
00:00:40,780 --> 00:00:45,150
HTML5 Boilerplate is a free and open-source project

16
00:00:45,150 --> 00:00:48,730
that's designed to help web designers and developers like you and me

17
00:00:48,730 --> 00:00:52,270
get a head start on their next website.

18
00:00:52,270 --> 00:00:55,380
If we scroll down here, we can see that it includes

19
00:00:55,380 --> 00:00:58,500
Modernizer, which allows you to more easily include

20
00:00:58,500 --> 00:01:01,280
HTML5 and CSS3 features

21
00:01:01,280 --> 00:01:04,010
even when you have to support older browsers.

22
00:01:04,010 --> 00:01:07,310
It also includes the latest version of jQuery,

23
00:01:07,310 --> 00:01:10,860
optimized Google Analytics code, and more.

24
00:01:10,860 --> 00:01:15,440
In addition, it also includes Normalize.css,

25
00:01:15,440 --> 00:01:19,660
which is a modern CSS reset that will remove the default styling

26
00:01:19,660 --> 00:01:22,190
that most browsers apply.

27
00:01:22,190 --> 00:01:24,300
This will create a level playing field

28
00:01:24,300 --> 00:01:26,790
for you to build your website.

29
00:01:26,790 --> 00:01:29,050
Currently, at the time of this recording,

30
00:01:29,050 --> 00:01:33,970
HTML5 Boilerplate is in version 4.0.

31
00:01:33,970 --> 00:01:38,580
To download it, we'll go ahead and click this download button here,

32
00:01:38,580 --> 00:01:43,530
and then we'll go ahead and unzip the file that we download,

33
00:01:43,530 --> 00:01:49,190
and after we've unzipped the contents, we'll end up with a web directory

34
00:01:49,190 --> 00:01:52,190
that you can start customizing for your needs.

35
00:01:52,190 --> 00:01:56,790
For example, there are placeholder app icons

36
00:01:56,790 --> 00:02:02,060
for mobile phones, but likely you'll want to replace these.

37
00:02:02,060 --> 00:02:08,240
Now let's take a look at the HTML that comes with Boilerplate.

38
00:02:08,240 --> 00:02:11,710
I'm going to open it up in my text editor,

39
00:02:11,710 --> 00:02:15,310
which in this case is Sublime Text 2,

40
00:02:15,310 --> 00:02:21,670
and if you look at this HTML and you've seen some basic HTML before,

41
00:02:21,670 --> 00:02:25,810
there might be a lot here that looks strange or confusing to you.

42
00:02:25,810 --> 00:02:31,870
The more bizarre parts are mostly due to support for older browsers

43
00:02:31,870 --> 00:02:35,160
as well as some inconsistencies in older versions

44
00:02:35,160 --> 00:02:37,530
of Internet Explorer.

45
00:02:37,530 --> 00:02:40,450
For example, if we look up here at the top

46
00:02:40,450 --> 00:02:44,930
or if we look right here, we'll see a lot of conditional comments

47
00:02:44,930 --> 00:02:50,870
that will only take effect for specific versions of Internet Explorer.

48
00:02:50,870 --> 00:02:54,320
In most cases, you'll want to go ahead and leave these in

49
00:02:54,320 --> 00:02:59,460
as they'll offer the greatest range of cross-browser support for you.

50
00:02:59,460 --> 00:03:03,240
If we scroll down here, you'll see an HTML comment

51
00:03:03,240 --> 00:03:07,940
that says, "Add  your site or application content here."

52
00:03:07,940 --> 00:03:13,290
Right here at line 25 is where you'll want to go ahead

53
00:03:13,290 --> 00:03:16,740
and start adding the content for your website,

54
00:03:16,740 --> 00:03:22,590
which uncoincidentally, is between the 2 body tags.

55
00:03:22,590 --> 00:03:25,460
HTML5 and all the browser inconsistencies

56
00:03:25,460 --> 00:03:29,670
can be confusing, but if you just want to jump ahead of all of that

57
00:03:29,670 --> 00:03:31,300
and get started making your website,

58
00:03:31,300 --> 00:03:34,720
HTML5 Boilerplate is a great way to do that.