Week 6

Responsive Design & Animation

Intro

This week, you’ll start writing media queries to adapt your Project 2 designs for a variety of viewports.

Sync Up

• Questions:
  • Less
  • Project 2 setup
• Review markup for Project 2
• Intro to responsive design, breakpoints, and animations

Activities

• Media queries
• Images
  • Image types and optimization
  • SVGs
  • Adding images to Glitch
• CSS interactions:
  • Transition – animate style changes
  • Transform – modify elements’ positions and sizes
  • Keyframe Animations ✳️

Assignment

• Complete Project 2 by styling your markup with responsive CSS (using Less)