Get Started With HTML5 Boilerplate

HTML5 Boilerplate is a professional front-end template for building web applications or sites. It's chock-full of cross-browser compatibility features, CSS resets, base styles, and optional server configs to give your project the best possible start.
Course info
Rating
(144)
Level
Beginner
Updated
Aug 2, 2014
Duration
58m
Table of contents
Description
Course info
Rating
(144)
Level
Beginner
Updated
Aug 2, 2014
Duration
58m
Description

When you start a new project, it's unlikely you start with a blank HTML file. You probably have some kind of starting template, or your IDE builds a rough file with some elements preloaded. That's what HTML5 Boilerplate is: a starter template to use on all your projects. HTML5 Boilerplate is built and used by some of the most respected names in the industry, and is packed full of standards-compliant and browser-friendly code to make sure that all of your projects get off on the right foot.

About the author
About the author

Chris is a freelance WordPress theme and plugin developer, one half of the design studio Arcane Palette Creative Design, lead developer of WordPress theme shop Museum Themes and Project Manager for the event management plugin Event Espresso. In his free time, he makes electronic music.

More from the author
WordPress Fundamentals: WP_Query and the Loop
Intermediate
1h 45m
May 15, 2015
More courses by Chris Reynolds
Section Introduction Transcripts
Section Introduction Transcripts

HTML5 Boilerplate in Depth
Now that we know what HTML5 Boilerplate is and what it can do, let's take a deeper look at the project template files that comprise it to see how it's laid out for you. In this module, we're going to focus on the actual files. All the HTML5 Boilerplate files are commented extensively to make it as easy as possible to use by web developers of any level. I'll be focusing on the two HTML files, the index. html and 404. html, the two CSS files, normalize. css and main. css. They include the JavaScript files, the. htaccess file, and the crossdomain. xml file. Let's get started by looking at the index. html.

Getting HTML5 Boilerplate
Now let's talk about getting yourself a copy of HTML5 Boilerplate. There are actually quite a few different options, and I'm going to walk through each one. In this module, I'll show you how to download the project files from the HTML5 Boilerplate site, cloning the project via GitHub, which is also the easiest way to get the additional optional files like the server configs, and downloading three different customized variations of HTML5 Boilerplate, including one that combines HTML5 Boilerplate with Twitter Bootstrap. Let's get started.

Building With HTML5 Boilerplate
In this module, we're going to use everything that I've talked about to create a demo page for an ecommerce site. Now we'll be writing this entirely in HTML, which probably isn't 100% realistic. You probably wouldn't write a whole ecommerce site in straight HTML, no matter how dedicated you were. You'd more likely use some sort of ecommerce platform like Magento, or else build it inside a CMS like WordPress. But for the sake of this demo, we'll just look at the HTML aspects, and assume that this should be built inside some sort of template system. For this example, I'll be creating a product page for a box of booster packs for the collectable card game, Magic the Gathering. As much as possible, we'll be treating this like a real site, loading some external JavaScript libraries to deal with images and image galleries, and a really simple script that will allow us to shrink the header when our user scrolls down the page. We'll also be using schema. org metadata to optimize our product page for search engines, and I'll talk a little about what schema. org is, and why you'd want to use it. In the end, we'll wind up with a product page that looks like this. To get started, I'm going to download a custom build of HTML5 Boilerplate.