Feb 20: Layout and Flexbox

Learning Objectives

After today's class, you should be able to:

• Control the position and z-index of block elements using CSS.
• Define @page and @media rules based on media size and type.
• Use CSS Flexbox to control layout and alignment of elements.

Lesson Outline

Lecture [45 min]

• 16_Display-Flexbox.pdf – courtesy Dr. Kirkpatrick

  • Activity Sheet – CSS Position and CSS Flexbox
  • Live Editor – CSS 4 and 6
  • Flexbox Playground – on CodePen

• CSS-Tricks – A Website About Making Websites

  • CSS Flexbox Layout Guide
  • Calculating CSS Specificity Value

Next Week [30 min]

• Exam 1: Preparation – on Feb 27th (in 1 week)

  • In class, on paper, no book/notes

• Project 1: Design Sketch – due March 3rd (in 1.5 weeks)

  • Brainstorm project ideas or theme
  • Come up with a clever team name