Chapter 7 Responsive Page Layout
Now that you’ve had some experience in coding HTML and CSS you’re ready to delve into designing web pages with responsive layouts that display well on both desktop and mobile browsers. you will explore new coding techniques, including CSS Flexible Box Layout, CSS Grid Layout, CSS media queries, CSS feature queries, and responsive images.
Media Queries Examples & Tutorials
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.
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.
Designing for the Mobile Web
Responsive Images
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.

Review Activities

Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.
Resources
10th Edition Student FilesHTML Validator
HTML Reference
CSS Validator
CSS Reference
Color Chart
Design Checklist