Book Image

HTML5 Boilerplate Web Development

By : Divya Manian
Book Image

HTML5 Boilerplate Web Development

By: Divya Manian

Overview of this book

<p>HTML5 Boilerplate is the number one choice for many web developers to get their projects going. It provides a comprehensive set of starting templates to get your developments going, ensuring you don&rsquo;t forget any important elements of a typical web project while also ensuring you are writing quality code and mark up. Learning how to use this framework of page and code templates will allow you to kick-start your projects quickly without losing out on quality.<br /><br />"HTML5 Boilerplate Web Development" will enable you to build new projects effectively with minimal effort. HTML5 Boilerplate allows you to deploy quality websites successfully and quickly while also ensuring robust cross-browser performance. It takes you through the step-by-step process of creating a website and teaches you to take full advantage of the html layouts provided within HTML5 Boilerplate; be it styles, mark up, or code so you can accomplish your goals.<br /><br />This book will guide you through the process of building a music festival website, as an applicable example, using HTML5 Boilerplate. You will install, set up HTML5 Boilerplate and deploy production sites. <br /><br />First, we will look at how to install HTML5 Boilerplate so you can use it repeatedly to jumpstart your projects, then we will look at structuring your website using the base files. We will use Modernizr and feature detection to dynamically serve different styles and scripts based on support of certain features. We will discover how to best configure our server to provide high performance and security for our website. Finally, we employ the Build Tool to combine files, remove comments and make the site ready for production use.<br /><br />"HTML5 Boilerplate Web Development" offers a well-rounded tutorial in expert web development; not just a starting place for web projects. It develops code snippets, links to further resources for and in addition to makes you understand the nuances of HTML5 Boilerplate.</p>
Table of Contents (15 chapters)
HTML5 Boilerplate Web Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

An overview of H5BP files


The different files and folders that are a part of HTML5 Boilerplate are explained as follows:

  • index.html: This is the markup that we recommend you start all your HTML pages with.

  • main.css: The styles are located in a single stylesheet known as main.css, found within the css folder.

  • normalize.css: This file is located separately, so that you can use the latest updated version of normalize.css immediately. In production, ideally you should combine both main.css and normalize.css into a single file to ensure minimum number of network requests, so your pages load quicker.

  • doc: This folder contains all the documentation necessary to understand the HTML5 Boilerplate files.

  • img: This folder should contain all the images you will be using to create your website. This is empty to begin with, but you should include all the images you work with here.

  • js: This is the parent folder for all your scripts. HTML5 Boilerplate comes with a set of scripts that make it easier for you to get started. This folder contains the following files and folders:

    • vendor: This folder contains all the script libraries. You get the latest minified and unminified versions of jQuery and a custom build of modernizr. Any other libraries you will be using should ideally go within this folder.

    • plugins.js: All the jQuery plugins that you would be using should be inlined in this file. If you are using a jQuery carousel plugin, you would copy the code to plugins.js.

    • main.js: This will be the file from where you would invoke scripts that run on your page. Taking the example of the jQuery carousel plugin, we will invoke the plugin to run on our pages from this file.

  • 404.html: If you have a page that is not found, then this page can be served. Make sure it has all the information available and uses the same look and feel as other pages in your website.

  • humans.txt: This is a wonderful initiative that allows you to denote who worked on a website (read more about this initiative at humanstxt.org). We highly recommend you use this to indicate your work, and to inform anyone who is curious, whose work it was.

  • crossdomain.xml: This is useful if you would like to have flash files hosted elsewhere to access assets located on the domain where your website will be hosted. You could have a flash audio player from another domain using the files hosted on your website. In this case, you need to carefully choose your cross-domain policy (we will cover this file in detail in Chapter 5, Customizing the server).

  • robots.txt: Search engines use this file to understand which files to index and which not to index.

  • .htaccess: This is an Apache server configuration file specific to your website. Loads of best practices are included by default.

  • favicion.ico: Most browsers use the favicon when you bookmark a page on a website or next to the title of the page on a tab. By using a distinctive identifiable icon, you will be able to make your website stand out and be easy to navigate to.

  • apple-touch-icon-*.png: iOS and Android devices allow websites to be bookmarked to the homescreen of your phone. Both of them use these touch icons to represent your site when it is added to your home screen. Boilerplate comes with a set of icons to identify all the sizes and formats you need to create your icons in.

  • readme.md: The readme has all the license information and a list of features and where to get more information from, on using these files.