Layout workshop

elements

• block level
• inline
• sizing elements
  • width
  • height

Box model

• padding
• margin
• border
• How it behaves:
  • Why things wraps
  • box-sizing: border-box;

Containers

• How to position things
  • float
  • display : inline-block;

Positioning components

• floats

  • clearfix

• inline-block

Responsive Website?

• Mobile first
• media queries
  • make the page respond to the size of the page