Learn Responsive Design

Learn responsive design techniques, like relative sizing units and media queries, to create websites viewable on devices of all sizes.

Start[missing "en.views.course_landing_page.learn-responsive-design.course_illustration" translation]
Chevron Left Icon
Sizing Elements
Lesson 1 of 2
Chevron Right Icon
  1. 1

    Modern technology allows users to browse the Internet via multiple devices, such as desktop monitors, mobile phones, tablets, and more. Devices of different screen sizes, however, pose a problem fo...

  2. 2

    Incorporating relative sizing starts by using units other than pixels. One unit of measurement you can use in CSS to create relatively-sized content is the em, written as [...] in CSS. Histor...

  3. 3

    The second relative unit of measurement in CSS is the rem, coded as [...] . Rem stands for root em. It acts similar to em, but instead of checking parent elements to size font, it checks the ...

  4. 4

    To size non-text HTML elements relative to their parent elements on the page you can use percentages. Percentages are often used to size box-model values, like width and height, padding, border...

  5. 5

    Percentages can also be used to set the padding and margin of elements. When height and width are set using percentages, you learned that the dimensions of child elements are calculated based on t...

  6. 6

    Although relative measurements provide consistent layouts across devices of different screen sizes, elements on a website can lose their integrity when they become too small or large. You can limit...

  7. 7

    You can also limit the minimum and maximum height of an element. 1. [...] — ensures a minimum height for an element's box. 2. [...] — ensures a maximum height for an element's b...

  8. 8

    Many websites contain a variety of different media, like images and videos. When a website contains such media, it's important to make sure that it is scaled proportionally so that users can correc...

  9. 9

    Background images of HTML elements can also be scaled responsively using CSS properties. [...] In the example above, the first CSS declaration sets the background image ( [...] is a placehol...

  10. 10

    Great work! You learned how to size elements on a website relative to other elements on the page. Let's review what you learned: - Content on a website can be sized relative to other elements on...

  1. 1

    When someone visits a website, it's possible they are viewing it on a phone, tablet, computer, or even a TV monitor. Because screen sizes can vary greatly across different devices, it's important f...

  2. 2

    CSS uses media queries to adapt a website's content to different screen sizes. With media queries, CSS can detect the size of the current screen and apply different CSS styles depending on the wi...

  3. 3

    Specific screen sizes can be targeted by setting multiple width and height media features. [...] and [...] are used to set the minimum width and minimum height, respectively. Conversely, [...]...

  4. 4

    Another media feature we can target is screen resolution. Many times we will want to supply higher quality media (images, video, etc.) only to users with screens that can support high resolution me...

  5. 5

    In previous exercises, we chained multiple media features of the same type in one media query by using the [...] operator. It allowed us to create a range by using [...] and [...] in the same...

  6. 6

    If only one of multiple media features in a media query must be met, media features can be separated in a comma separated list. For example, if we needed to apply a style when only one of the be...

  7. 7

    We know how to use media queries to apply CSS rules based on screen size and resolution, but how do we determine what queries to set? The points at which media queries are set are called _breakp...

  8. 8

    Incredible work! You learned how to change the way a website appears on different screens with media queries and breakpoints Throughout this lesson, you learned: - When a website responds to th...

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo

Learn Responsive Design

Start[missing "en.views.course_landing_page.learn-responsive-design.course_illustration" translation]