Skip to Content

Web Development & Design Foundations with HTML5

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.

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.
Web Development & Design Foundations with HTML5

Review Activities

Review Games

Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.

Resources

10th Edition Student Files

HTML Validator
HTML Reference

CSS Validator
CSS Reference

Color Chart
Design Checklist