Overview/Description
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
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