Make a small sketch website that has 3 or more distinct layouts (using at least 2 different media queries) for different screen sizes. Use relative units to size the elements (try using em or rem for responsive type sizing).

Remember to always include this meta tag in the <head> of every html document to assist in making your website mobile-friendly:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

And for a quick summary of responsive units:

  • % is relative to the parent element's size
  • VW, VH are relative to the viewport's (browser window or screen) size
  • EM is relative to the current element or parent element's font-size
  • REM is relative to the root element's (<html>) font-size

Further Reading