Session 04 - CSS, Part 2 - including Flexbox

Harvard Extension School  
Fall 2023

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

Topics

  1. CSS Review
  2. CSS Specificity
  3. Box Model
  4. CSS Flexbox
  5. CSS Flexbox and Grid
  6. CSS Flexbox
  7. Lists as Navigation
  8. Two approaches - border or content?
  9. Working an Example
  10. Flex and Simple Layouts
  11. CSS calc()
  12. CSS Remedy, Normalize, and Reset

Session 04 - CSS, Part 2 - including Flexbox, slide1
CSS Review, slide2
CSS Guides and Reference and Tools, slide3
Anatomy of a CSS Rule, slide4
CSS selectors - elements, class, id, and contextual, slide5
class selectors, slide6
Contextual Selectors, slide7
CSS Specificity, slide8
CSS Selector Specificity, slide9
Specificity, slide10
Box Model, slide11
Box Sizing - How do you measure width?, slide12
When 25% is not 1/4 of the screen, slide13
* { box-sizing: border-box; }, slide14
CSS Flexbox, slide15
CSS Flexbox and Grid, slide16
CSS Flexbox, slide17
flex-basis, slide18
flex-grow and flex-shrink, slide19
Flex and Wrap, slide20
Lists as Navigation, slide21
Two approaches - border or content?, slide22
Working an Example, slide23
Some Notes about the Example, slide24
Flex and Simple Layouts, slide25
CSS calc(), slide26
CSS Remedy, Normalize, and Reset, slide27

Presentation contains 27 slides