Intro -- HTML5 Boilerplate Web Development -- Table of Contents -- HTML5 Boilerplate Web Development -- Credits -- About the Author -- About the Reviewers -- www.PacktPub.com -- Support files, eBooks, discount offers and more -- Why Subscribe? -- Free Access for Packt account holders -- Preface -- What this book covers -- What you need for this book -- Who this book is for -- Conventions -- Reader feedback -- Customer support -- Downloading the example code -- Errata -- Piracy -- Questions -- 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 -- 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 -- Protocol-relative URLs -- Google CDN hosting -- Adding Google Analytics ID -- Updating humans.txt -- Summary -- 3. Creating Your Site -- Working on the markup -- Creating the markup -- Deciding which element to use -- Writing valid markup -- Creating the styles -- Why not reset.css? -- 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? -- Sass -- Less -- Stylus.

Using HTML5 Boilerplate with style languages -- Sass -- Less -- Stylus -- Summary -- 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 -- 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 -- 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 example.com/foo to example.com/foo/ -- Option 2: Rewrite example.com/foo/ to example.com/foo -- 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 -- 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 -- A. 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 -- Edge -- IE9 -- IE8 -- IE7 -- Emulate IE9 -- Emulate IE8 -- Emulate IE7 -- IE5 -- Contribute -- Reporting issues -- Pull requests -- Index.

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

Description based on publisher supplied metadata and other sources.

Electronic reproduction. Ann Arbor, Michigan : ProQuest Ebook Central, 2018. Available via World Wide Web. Access may be limited to ProQuest Ebook Central affiliated libraries.