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

This course is included in our On-demand training solution.

Overview

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

Prerequisites

None

Expected Duration

120 min.

Course Objectives

Course Introduction

Overview of Responsive Web Design

  • describe the concept of responsive web design, its core components, and contrast adaptive, fluid, and responsive design
  • Fluid Layouts

  • contrast fixed and fluid layouts and use proportional width settings to achieve fluid grid layouts
  • The CSS3 FlexBox

  • implement the CSS3 Flexbox as part of a responsive design web layout
  • Using the CSS3 Grid Layout As a Flexible Container

  • describe how to implement the CSS3 grid layout with flexible lengths (fraction units)
  • Semantic Grid Systems

  • describe how to implement semantic grid systems using a preprocessor such as Sass
  • Measurements for Responsiveness

  • describe and contrast use of percentages, ems, rems, and viewport units in responsive design
  • Rounding Issues

  • describe the issue of rounding
  • Text and Responsive Web Design

  • configure flexible text with appropriate measurement units for size and line height and features such as text overflow in a responsive web design solution
  • Flexible Images

  • use the maxwidth attribute to configure images to be responsive
  • Flexible Background Images

  • configure tiled background images to be responsive
  • Using the CSS3 Overflow Property with Images

  • describe the CSS overflow property and implement it as a part of a responsive web design solution for images
  • Using Sprites in Responsive Design

  • use sprites for background images as part of a responsive design solution
  • SVG

  • describe scalable vector images (SVG) and use SVG to implement scaling images
  • The HTML5 Canvas

  • describe the HTML5 canvas and use the canvas to implement scaling images
  • The HTML5 Picture Element

  • describe and use the new HTML5 picture element
  • Flexible Videos

  • recall use of maxwidth attribute and use intrinsic ratio to work with embedded video to make it responsive
  • Introducing Media Queries

  • describe media queries, their syntax, breakpoints, using both major and minor breakpoints, and their application in responsive web design
  • Media Queries and Dimensions

  • use media queries with device or viewport dimensions
  • Using the CSS3 Viewport Parameter with a Media Query

  • contrast the viewport meta tag and CSS3 parameter and combine with a media query for device adaptation
  • Media Queries and Screen Resolution

  • configure a screen resolution media query
  • Working with Multiple Media Queries

  • work with multiple media queries, combining and negating queries
  • Working with Additional Media Types

  • work with available media types apart from screen
  • Working with Additional Media Features

  • work with features such as input mechanism and color
  • Media Queries – Compatibility with Older Browsers

  • describe how to resolve compatibility issues relating to media queries in older browsers
  • Exercise: Responsive Web Design Strategies

    MONTHLY SUBSCRIPTION

    $129/month
     

    ANNUAL SUBSCRIPTION

    $1295/year

    Multi-license discounts available for Annual and Monthly subscriptions.