Flexible Images & Media Queries

Responsive Web Design
  • 17 Videos | 1h 39m 12s
  • Earns a Badge
Likes 7 Likes 7
Two core components of responsive web design include flexible images and media queries. Learn how to use these components to apply responsive design strategies for your web applications.

WHAT YOU WILL LEARN

  • 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 HTML 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 CSS 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 compatability issues relating to media queries in older browsers

IN THIS COURSE

  • Playable
    1. 
    Text and Responsive Web Design
    7m 6s
    UP NEXT
  • Playable
    2. 
    Flexible Images
    5m 25s
  • Locked
    3. 
    Flexible Background Images
    3m 23s
  • Locked
    4. 
    Using the CSS3 Overflow Property with Images
    4m 27s
  • Locked
    5. 
    Using Sprites in Responsive Design
    8m 15s
  • Locked
    6. 
    SVG
    5m 8s
  • Locked
    7. 
    The HTML5 Canvas
    5m 38s
  • Locked
    8. 
    The HTML Picture Element
    7m 23s
  • Locked
    9. 
    Flexible Videos
    4m 24s
  • Locked
    10. 
    Media Queries
    3m 59s
  • Locked
    11. 
    Media Queries and Dimensions
    5m 8s
  • Locked
    12. 
    Using the CSS3 viewport Parameter with a Media Query
    5m 25s
  • Locked
    13. 
    Media Queries and Screen Resolution
    7m 34s
  • Locked
    14. 
    Working with Multiple Media Queries
    6m 28s
  • Locked
    15. 
    Working with Additional Media Types
    5m 57s
  • Locked
    16. 
    Working with Additional Media Features
    3m 6s
  • Locked
    17. 
    Media Queries - Compatibility with Older Browsers
    5m 27s

EARN A DIGITAL BADGE WHEN YOU COMPLETE THIS COURSE

Skillsoft is providing you the opportunity to earn a digital badge upon successful completion of this course, which can be shared on any social network or business platform

Digital badges are yours to keep, forever.

YOU MIGHT ALSO LIKE

CHANNEL Cisco Design
Likes 30 Likes 30  
Likes 754 Likes 754