Previous | Table of Contents | Next

{ Responsive Design Exercise. }

Part I

Answer the following questions

  • What is an em?
  • What is the difference between em and rem?
  • What is "mobile first" design?
  • What is BEM?

Part II

For this exercise you will be building a small grid system! Your task is to create the following classes:

.col-4 - consumes 33% of the width when the screen size is greater than 960 pixels, 50% of the width when the screen size is greater than 765 pixels and 100% of the width when the screen size is less than 765 pixels.

.col-6 - consumes 50% of the width when the screen size is greater than 960 pixels and 100% of the width when the screen size is less than 960 pixels

.col-12 - consumes 100% of the width when the screen size at all sizes.

You can find the solutions here

When you're ready, move on to Introduction to Bootstrap

Continue

Creative Commons License