HTML5 Quick Start with Boilerplate

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