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
There are no updates for this chapter.
Review Activities
Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.
Resources
HTML ValidatorHTML Reference
CSS Validator
CSS Reference
Color Chart
Design Checklist