Size & Units

Need a refresher on vh, vw, A, %, px and min/max values? We got you.

rate limit

Code not recognized.

About this course

units shown in design panel in editor 2.0

Understanding those unit options are helpful when building pages for a desktop and especially when configuring your layouts for other screen sizes.

This course can be taken sequentially, however, feel free to pick and choose the lessons that are most useful to you!

 

If you finish all of the lessons in this course, you'll be able to:

  • define what a viewport is and what the viewport width (vw) and viewport height (vh) units can do for you
  • understand the difference between an absolute unit and a relative unit
  • know what 'A' means in the editor and when this unit might come in handy
  • know where to find and how to use min and max values to constrain sizes
 

For a better experience, you should have:

Curriculum20 min course

  • Understanding units for size and layout
  • px and %
  • Absolute & Relative sizes
  • vh and vw
  • What is a viewport?
  • Viewport width (vw) and Viewport height (vh)
  • Demo: Using viewport units
  • A (auto)
  • A is for Auto
  • Size constraints
  • Min and Max
  • Wrap up
  • How'd it go? (survey)

About this course

units shown in design panel in editor 2.0

Understanding those unit options are helpful when building pages for a desktop and especially when configuring your layouts for other screen sizes.

This course can be taken sequentially, however, feel free to pick and choose the lessons that are most useful to you!

 

If you finish all of the lessons in this course, you'll be able to:

  • define what a viewport is and what the viewport width (vw) and viewport height (vh) units can do for you
  • understand the difference between an absolute unit and a relative unit
  • know what 'A' means in the editor and when this unit might come in handy
  • know where to find and how to use min and max values to constrain sizes
 

For a better experience, you should have:

Curriculum20 min course

  • Understanding units for size and layout
  • px and %
  • Absolute & Relative sizes
  • vh and vw
  • What is a viewport?
  • Viewport width (vw) and Viewport height (vh)
  • Demo: Using viewport units
  • A (auto)
  • A is for Auto
  • Size constraints
  • Min and Max
  • Wrap up
  • How'd it go? (survey)