Session 05 - CSS and Flex and Responsive CSS

Harvard Extension School  
Fall 2021

Course Web Site: https://cscie12.dce.harvard.edu/

Topics

  1. A CSS Example: WebAIM
  2. CSS Best Practices
  3. CSS Rules and Specificity
  4. Box Sizing - How do you measure width?
  5. CSS calc()
  6. CSS Normalize and Reset
  7. CSS Flexbox and Grid
  8. CSS Flexbox
  9. Solar System
  10. Responsive Layouts
  11. Responsive Example - Birds!

Session 05 - CSS and Flex and Responsive CSS, slide1
A CSS Example: WebAIM, slide2
CSS Best Practices, slide3
CSS Best Practices, slide4
Beware of Divitis and Classitis, slide5
Avoid Divitis, Classitis, Tagitis, etc., slide6
CSS Rules and Specificity, slide7
CSS Selector Specificity, slide8
Box Sizing - How do you measure width?, slide9
CSS calc(), slide10
CSS Normalize and Reset, slide11
CSS "Reset", slide12
CSS Normalize, slide13
CSS Flexbox and Grid, slide14
CSS Flexbox, slide15
flex-basis, slide16
flex-grow and flex-shrink, slide17
Flex and Wrap, slide18
Flex and Simple Layouts, slide19
Solar System, slide20
Responsive Layouts, slide21
Responsive Web Design: CSS Media Query, slide22
Responsive Example - Birds!, slide23

Presentation contains 23 slides