Session 04 - CSS, Part 2 - including Flexbox

Harvard Extension School  
Fall 2024

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 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 remedy, normalize, and reset, slide26

Presentation contains 26 slides