Session 05 - CSS, Part 3 (including Flexbox)

Harvard Extension School  
Spring 2022

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

Topics

  1. Two approaches - border or content?
  2. CSS Best Practices
  3. CSS Rules and Specificity
  4. Box Sizing - How do you measure width?
  5. CSS calc()
  6. CSS Normalize, Reset, or Remedy
  7. CSS Flexbox and Grid
  8. CSS Flexbox
  9. Solar System Example

Session 05 - CSS, Part 3 (including Flexbox), slide1
Two approaches - border or content?, 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
When 25% is not 1/4 of the screen, slide10
* { box-sizing: border-box; }, slide11
CSS calc(), slide12
CSS Normalize, Reset, or Remedy, slide13
CSS Flexbox and Grid, slide14
CSS Flexbox, slide15
flex-basis, slide16
flex-grow and flex-shrink, slide17
Flex and Wrap, slide18
When working with images, max-width is your friend!, slide19
Solar System Example, slide20
Flex and Simple Layouts, slide21

Presentation contains 21 slides