HTML5 Boilerplate Web Development

HTML5 Boilerplate Web Development
eBook: $14.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $39.98    Print cover: $24.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Master HTML5 Boilerplate as starting templates for future projects
  • Learn how to optimize your workflow with HTML5 Boilerplate templates and set up servers optimized for performance
  • Learn to feature-detect and serve appropriate styles and scripts across browser types

Book Details

Language : English
Paperback : 174 pages [ 235mm x 191mm ]
Release Date : November 2012
ISBN : 1849518505
ISBN 13 : 9781849518505
Author(s) : Divya Manian
Topics and Technologies : All Books, Web Development, Open Source, Web Development

Table of Contents

Chapter 1: Before We Begin
Chapter 2: Starting Your Project
Chapter 3: Creating Your Site
Chapter 4: Adding Interactivity and Completing Your Site
Chapter 5: Customizing the Apache Server
Chapter 6: Making Your Site Better
Chapter 7: Automate Deployment With the Build Script
Appendix: You Are an Expert, Now What
  • Chapter 1: Before We Begin
    • Features of HTML5 Boilerplate
      • Cross-browser compatibility
        • Doctype
        • Normalize.css
        • Clearfix
        • Search box styling
        • Conditional classes
        • Modernizr
        • No console.log errors
        • Helper classes
      • Performance optimizations
      • Progressive enhancement
      • Accessible focus styles
      • Print styles
    • Tools to start with
      • Beware
    • Where to get files
    • An overview of H5BP files
    • Asking for help
    • Summary
    • Chapter 2: Starting Your Project
      • Creating your initial project folder
        • Downloading the latest version of HTML5 Boilerplate
        • Using the shell script
      • Creating our project
      • House-keeping
        • Setting the tags
        • Editing favicons
        • Adding third-party libraries
          • Using a Content Delivery Network
        • Adding Google Analytics ID
        • Updating humans.txt
      • Summary
      • Chapter 3: Creating Your Site
        • Working on the markup
          • Creating the markup
            • Deciding which element to use
            • Writing valid markup
        • Creating the styles
          • Helpful style classes we can use
            • Image replacement
            • Hiding elements
            • Hiding elements visually
            • Hiding elements without impacting layout
            • Clearing floats
          • Writing valid stylesheets
          • Style languages to write productive stylesheets
            • Advantages
            • Disadvantages
            • Where to learn?
            • Using HTML5 Boilerplate with style languages
        • Summary
        • Chapter 4: Adding Interactivity and Completing Your Site
          • Using jQuery
          • Using other libraries
          • Adding smooth-scroll plugin and interaction
          • Adding HTML5 features safely with Modernizr
            • When to use Modernizr.load
            • Using Modernizr to load CSS features
          • Testing our site
            • Testing on non-desktop browsers
          • Summary
          • Chapter 5: Customizing the Apache Server
            • Server-side configurations
            • Setting up the Apache server
              • Installing Apache
                • Mac
                • Windows
                • Linux
              • Configuring Apache
            • Features available out of the box
              • Removing ETags
              • Gzip components
              • Using Expires header for better cache control
              • Custom 404 page
              • Forcing the latest IE version
              • Using UTF-8 encoding
              • Serving the right MIME types
              • Blocking access to hidden folders
              • Blocking access to backup and source files
              • Starting Rewrite engine
              • Preventing 404 errors for non-existing redirected folders
            • Additional customizations
              • Suppressing or forcing the "www." at the beginning of URLs
              • Setting cookies from iFrames
              • PHP security defaults
              • Stop advertising Apache version
              • Allowing concatenation from within specific JS and CSS files
              • Stopping screen flicker in IE on CSS rollovers
              • Preventing SSL certificate warnings
              • Cross-domain policies you should be aware of
              • Cross-domain AJAX requests
              • CORS-enabled images
              • Webfont access
            • Using other server configuration files
              • web.config
              • lighttpd.conf
              • nginx.conf
              • node.js
              • Google App Engine
            • Summary
            • Chapter 6: Making Your Site Better
              • Finding the best experience for Internet Explorer
                • Mobile-first styles for IE
                  • ie.scss
                  • main.scss
                • Printing with jQuery in IE6 and IE7
                • Styling disabled form elements in Internet Explorer
                • Suppressing IE6 image toolbar
              • Writing CSS3 easier with tools
                • Sass
                • Less
                • Output CSS
                • Converting HTML5 Boilerplate CSS to Sass or Less
                  • HTML5 Boilerplate Compass extension
                  • HTMl5 Boilerplate Sass fork
              • Print considerations
              • Finding and using polyfills
              • Making your site faster
                • DNS prefetching
              • Making your site more visible on search engines
                • Directing search spiders to your site map
                • Implementing X-Robots-Tag headers
                • Trailing slash redirects
                  • Option 1: Rewrite to
                  • Option 2: Rewrite to
              • Handling users without JavaScript
              • Optimizing your images
                • 8-bit PNGs
                • Tools for image optimization
                  • ImageAlpha
                  • ImageOptim
                • Using image sprites
                  • CSS sprites from within Adobe Photoshop
                  • CSS sprites with Compass
                  • SpriteMe
              • Augmenting Google Analytics
                • Adding more tracking settings
                • Anonymize IP addresses
                • Tracking jQuery AJAX requests in Google Analytics
                • Tracking JavaScript errors in Google Analytics
              • Summary
              • Chapter 7: Automate Deployment With the Build Script
                • The build script
                  • Ant build script
                  • Node build script
                  • Which build script to use
                • Using the Ant build script
                  • Installing the build script
                  • Smaller image files
                  • Smaller CSS file
                  • Smaller and fewer JS files
                  • No comments in files
                  • Build options
                    • Minifying markup
                    • Preventing image optimization
                    • Using CSSLint
                    • Using JSHint
                    • Setting up the SHA filenames
                  • Using with Drupal or WordPress
                    • Updating build.xml
                    • Setting up the project configuration properties
                    • Setting the JS file delineator
                • Using the Node build script
                  • Grunt
                • Installing Node build script
                  • Initializing your project
                  • Using the Node build script with an existing project
                • Using the Node build script to build your project
                  • Text
                  • Minify
                  • Server
                  • Connect
                • Using with Drupal or WordPress
              • Next steps
              • Summary
                • Appendix: You Are an Expert, Now What
                  • Writing unit tests for your code
                    • Creating a testing environment
                      • Esoteric defaults you should know about
                    • Meta UTF-8
                    • The HTML Doctype
                    • The details behind the clearfix solution
                    • What do the print styles do
                      • Print media query
                      • Optimizing colors and backgrounds
                      • Better links
                      • Rendering all code and quotes within one page
                      • Rendering tables better
                      • Rendering images better
                      • Margins on pages
                      • Optimal settings for orphans and widows
                      • Keeping headings with content
                    • What are protocol-relative URLs
                    • Using conditional comments
                      • Browser style hacks
                      • Server-side browser detection
                      • Stylesheets based on conditional comments
                      • Class names based on conditional comments
                    • What is meta x-ua-compatible
                      • Meta tag in your HTML page
                      • HTTP header response from the server
                  • Contribute
                    • Reporting issues
                    • Pull requests

                  Divya Manian

                  Divya Manian is the co-creator of the HTML5 Boilerplate framework. She has worked on projects to benefit the web development community such as HTML5 Please, Move the Web Forward, and HTML5 Readiness. She is also a member of the W3C. Previously, she used to be an embedded C++ programmer.
                  Sorry, we don't have any reviews for this title yet.

                  Code Downloads

                  Download the code and support files for this book.

                  Submit Errata

                  Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                  - 1 submitted: last submission 04 Sep 2013

                  Errata type: Code| Page number: 50 | Errata date: 26 June 2013


                  In the code section, there needs to be a space between t-tab__navitem and js-tabitem.


                  Sample chapters

                  You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                  Frequently bought together

                  HTML5 Boilerplate Web Development +    Dominar phpMyAdmin para una administración efectiva de MySQL [Espanol] =
                  50% Off
                  the second eBook
                  Price for both: $19.50

                  Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                  What you will learn from this book

                  • Master the internals of HTML5 Boilerplate
                  • Write code using feature detection that will work in all browsers while providing alternate experiences where necessary
                  • Use a build tool to minimize the cost of deploying your project to production
                  • Maintain good page performance of web pages in your project by choosing the best server defaults
                  • Write end-to-end web projects that are robust and work across browsers by default
                  • Learn how to use HTML5 Boilerplate with CMSs and other language frameworks; such as Wordpress, Django, and more.
                  • Find ways to debug easily and methods of asking for help so you receive quick responses

                  In Detail

                  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’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.

                  "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.

                  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.

                  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.

                  "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.


                  "HTML5 Boilerplate Web Development" is a practical guide rich with information on getting the best out of the boilerplate. Readers follow the expert author through a project of building a music festival site; the tutorials and lessons learned are easily applicable to any website project.

                  Who this book is for

                  This book is for all developers who are familiar with creating web projects using HTML, CSS, and JavaScript, however, no deep knowledge is necessary. Some knowledge of what a web server is and how it can be configured is good to have. You should also not be afraid to use the command line (fear not! There are links within that should make you less afraid). There is no expectation that you know HTML5 Boilerplate.

                  Code Download and Errata
                  Packt Anytime, Anywhere
                  Register Books
                  Print Upgrades
                  eBook Downloads
                  Video Support
                  Contact Us
                  Awards Voting Nominations Previous Winners
                  Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                  Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software