Flexible Images & Media Queries

Responsive Web Design    |    Intermediate
  • 17 videos | 1h 34m 12s
  • Earns a Badge
Rating 4.1 of 9 users Rating 4.1 of 9 users (9)
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

  • 7m 6s
    During this video, you will learn how to configure flexible text with appropriate measurement units for size and line height, as well as features such as text-overflow, in a responsive web design solution. FREE ACCESS
  • 5m 25s
    In this video, you will use the maxwidth attribute to make images responsive. FREE ACCESS
  • Locked
    3.  Flexible Background Images
    3m 23s
    In this video, you will configure tiled background images to be responsive to the width of the browser. FREE ACCESS
  • Locked
    4.  Using the CSS3 Overflow Property with Images
    4m 27s
    Upon completion of this video, you will be able to describe the CSS overflow property and implement it as part of a responsive web design solution for images. FREE ACCESS
  • Locked
    5.  Using Sprites in Responsive Design
    8m 15s
    In this video, find out how to use sprites for background images as part of a responsive design solution. FREE ACCESS
  • Locked
    6.  SVG
    5m 8s
    Upon completion of this video, you will be able to describe scalable vector images (SVG) and use SVG to scale images. FREE ACCESS
  • Locked
    7.  The HTML5 Canvas
    5m 38s
    Upon completion of this video, you will be able to describe the HTML5 canvas and use the canvas to implement scaling images. FREE ACCESS
  • Locked
    8.  The HTML Picture Element
    7m 23s
    Upon completion of this video, you will be able to describe and use the new HTML element. FREE ACCESS
  • Locked
    9.  Flexible Videos
    4m 24s
    After completing this video, you will be able to recall the use of the maxwidth attribute and use intrinsic ratio to work with embedded video to make it responsive. FREE ACCESS
  • Locked
    10.  Media Queries
    3m 59s
    After completing this video, you will be able to describe media queries, their syntax, breakpoints, using both major and minor breakpoints, and their application in responsive web design. FREE ACCESS
  • Locked
    11.  Media Queries and Dimensions
    5m 8s
    In this video, you will learn how to use media queries with device or viewport dimensions. FREE ACCESS
  • Locked
    12.  Using the CSS3 viewport Parameter with a Media Query
    5m 25s
    In this video, you will learn how to contrast the viewport meta tag with the CSS parameter and combine with a media query for device adaptation. FREE ACCESS
  • Locked
    13.  Media Queries and Screen Resolution
    7m 34s
    In this video, learn how to configure a media query for screen resolution. FREE ACCESS
  • Locked
    14.  Working with Multiple Media Queries
    6m 28s
    Learn how to work with multiple media queries, combining and negating queries. FREE ACCESS
  • Locked
    15.  Working with Additional Media Types
    5m 57s
    In this video, find out how to work with available media types other than screen. FREE ACCESS
  • Locked
    16.  Working with Additional Media Features
    3m 6s
    During this video, you will learn how to work with features such as input mechanisms and color. FREE ACCESS
  • Locked
    17.  Media Queries - Compatibility with Older Browsers
    5m 27s
    After completing this video, you will be able to describe how to resolve compatibility issues relating to media queries in older browsers. FREE ACCESS

EARN A DIGITAL BADGE WHEN YOU COMPLETE THIS COURSE

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

Digital badges are yours to keep, forever.

YOU MIGHT ALSO LIKE

Journey Web Development Basics
Rating 4.1 of 10 users Rating 4.1 of 10 users (10)
Channel Wintellect React
Journey Creating Styled and Responsive Sites

PEOPLE WHO VIEWED THIS ALSO VIEWED THESE

Course Programming for Engineering Leaders: No-code & Low-code Platforms
Rating 4.7 of 47 users Rating 4.7 of 47 users (47)
Course Leadercamp on-demand: Energy Management
Rating 4.7 of 283 users Rating 4.7 of 283 users (283)
Course Web Design Enhancements
Rating 4.7 of 73 users Rating 4.7 of 73 users (73)