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
|
