Session 04 - CSS, Part 2 - including Flexbox

Harvard Extension School  
Fall 2022

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

Topics

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

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

Presentation contains 28 slides