IT Skills     Web Development and Graphic Design     Web Design     Responsive Web Design

---

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.

---

---

Objectives

Responsive Web Design 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 Measurements and Rounding describe and contrast use of percentages, ems, rems, and viewport units in responsive design describe the issue of rounding Flexible Text and Media 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 Media Queries 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 Practice: Working with Responsive Web Design apply fluid grids, flexible images, and media queries to your web design