Cover image for HTML5 Boilerplate Web Development

HTML5 Boilerplate Web Development

Author Divya Manian
Release Date: 2012/11/01
ISBN: 9781849518505
Topic:
0%
57
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Master HTML5 Boilerplate web development with a robust set of templates to get your web projects done quickly and effectively

  • 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

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.

Table of Contents

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