Web Development & Design Foundations with HTML5

Responsive Web Design

• Ethan Marcotte's Responsive Web Design Article
• W3C CSS3 Media Queries
• Use of CSS in the Wild
• Viewport Sizes
• Google: Responsive Web Design Basics

Media Queries Examples & Tutorials

• CSS-Tricks Media Queries Code Snippets
• Media Queries Examples
• Sample Media Queries
• Ems in CSS Media Queries
• Retina Display Media Query
• Google: How to Choose Breakpoints
  

CSS Flexible Box Layout

The CSS Flexible Box Layout Module provides for a flexible layout—elements contained within a flex container can be configured in one dimension — either horizontally or vertically in a flexible manner with flexible sizing.

• A Guide to Flexbox
• CSS Flexbox Please!
• MDN Docs Flexbox

CSS Grid Layout

The purpose of CSS Grid Layout is to configure a two-dimensional grid-based layout. CSS Grid Layout is optimized for two-dimensional page layout.

• Getting Started with CSS Grid
• Grid By Example
• Complete Guide to Grids
• Seven Ways You Can Place Elements with CSS Grid

Designing for the Mobile Web

• W3C Mobile Web Initiative
• W3C Mobile Web Best Practices (MWBP 1.0)
• Flip Cards for MWBP 1.0
• Mobile First
• Mobile Web Development
• Mobile First Helps with Big Issues
• Mobile Should Come First
  
• Opera Mini: Web Content Authoring Guidelines

Responsive Images

• Improving Responsive Images with the Picture Element
• A Complete Guide to the Picture Element
• Responsive Images Community Group
• Responsive Images: Use Cases and Documented Code Snippets
• Responsive Images Sizes Attribute

Testing Mobile Display

• Chris Pederick's Web Developer Extension (Resize > Display Window Size)
• Opera Mobile Emulator (Windows Only download and install)
• iPhone Emulator (Runs in a browser window)
• iPhoney (Mac only download and install)
• Am I Responsive
• iOS SDK (Mac only)
• Android SDK

Chapter Updates

• Page 329 Hands-on Practice 7.4 Step 2
  The word "header" should be "head".
  
  
• Page 331 Hands-On Practice 7.5 Step 1
  Replace the phrase "header section" with "head section"
  
  
• Page 332 Hands-On Practice 7.5 Step 2
  The word "aisde" should be "aside".
  
  
• Page 349 Hands-On Practice 7.9 Step 4
  Figure 7.43 shows a grid layout wireframe that corresponds to the Medium Display shown in Figure 7.44.
  
  
• Page 351 Hands-On Practice 7.9 Step 5, Second paragraph
  The width of the first column in the grid should be set to 150px width.
  
  
• Page 356 Hands-On Practice 7.12
  You'll work with the img element's sizes and srcset attributes in this hands-on practice.