How to Learn CSS

Lesson Plan¹

• Selectors - in Level 3 specifications and cross browser support
  • MDN Reference
  • pseudo-element selectors act as if an element was dynamically inserted
• Inhertance and Cascade
  • MDN Reference
• Box Model
  • The standard CSS Box Model takes the width that you have given an element, then adds onto that width the padding and border — meaning that the space taken up by the element is larger than the width you gave it.
  • alternate box model which uses the given width on the element as the width of the visible element on screen. Any padding or border will inset the content of the box from the edges.
  • Box Model and Box Sizing
  • Globally Use Alternative Box Model
• Normal Flow
  • MDN Flow Layout
• Formatting Context defines an outer and an inner type
  • The outer controls how the element behaves alongside other elements on the page, the inner controls how the children should look
  • [ ][MDN Display Ref](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
• Layout
  • MDN Learn Layout
  • Getting Started with Layout
• Alignment
  • MDN Box Alignment is common concept used in flexbox, grid, multicol, and box layout
  • Flexbox Alignment
• Sizing - Intrinsic and Extrinsic Sizing specification, and how it relates to Grid and Flexbox
  • modern layout methods can do a lot of the space distribution for us.
  • Understanding how Flexbox assigns space (or the Grid fr unit works) is worthwhile
  • Sizing in Layout
  • Flexbox Sizing
• Responsive Design
  • Responsive Web Design Is
  • Media Queries
• Fonts and Typography
  • Variable Fonts and the Future of Web Design
  • Dynamic Typography With Modern CSS and Variable Fonts
  • Implementing a Variable Font With Fallback Web Fonts
  • Firefox Font Editor
• Transform and Animation
  • Using Transforms
  • CSS Animations
  • CSS Transitions
  • Choose your own adventure