Course Details

Previous Page

Responsive Web Design: Flexible Grids, Images, and Media Queries

Target Audience
Expected Duration
Lesson Objectives
Course Number

With the rise of hand-held devices and mobile browsing, web applications have needed to become responsive to the accessing device. This course introduces responsive web design and demonstrates how to apply responsive design strategies. It covers the core components of responsive web design - flexible grids, flexible images, and media queries.

Target Audience
Web developers who want to learn how to design responsive web applications using fluid grids, images, and media queries


Expected Duration (hours)

Lesson Objectives

Responsive Web Design: Flexible Grids, Images, and Media Queries

  • start the course
  • describe the concept of responsive web design, its core components, and contrast adaptive, fluid, and responsive design
  • contrast fixed and fluid layouts and use proportional width settings to achieve fluid grid layouts
  • implement the CSS3 Flexbox as part of a responsive design web layout
  • describe how to implement the CSS3 grid layout with flexible lengths (fraction units)
  • describe how to implement semantic grid systems using a preprocessor such as Sass
  • describe and contrast use of percentages, ems, rems, and viewport units in responsive design
  • describe the issue of rounding
  • configure flexible text with appropriate measurement units for size and line height and features such as text overflow in a responsive web design solution
  • use the maxwidth attribute to configure images to be responsive
  • configure tiled background images to be responsive
  • describe the CSS overflow property and implement it as a part of a responsive web design solution for images
  • use sprites for background images as part of a responsive design solution
  • describe scalable vector images (SVG) and use SVG to implement scaling images
  • describe the HTML5 canvas and use the canvas to implement scaling images
  • describe and use the new HTML5 picture element
  • recall use of maxwidth attribute and use intrinsic ratio to work with embedded video to make it responsive
  • describe media queries, their syntax, breakpoints, using both major and minor breakpoints, and their application in responsive web design
  • use media queries with device or viewport dimensions
  • contrast the viewport meta tag and CSS3 parameter and combine with a media query for device adaptation
  • configure a screen resolution media query
  • work with multiple media queries, combining and negating queries
  • work with available media types apart from screen
  • work with features such as input mechanism and color
  • describe how to resolve compatibility issues relating to media queries in older browsers
  • apply fluid grids, flexible images, and media queries to your web design
  • Course Number: