You've already started watching HTML5 Quick Start with Boilerplate

Resume Video Start Over

HTML5 Quick Start with Boilerplate

3:34 with Nick Pettit

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