Canonical Learning Resources

• Helpful miscelaneous

  • Sandbox tool (JS Fiddle)
  • Image filler (Lorem Pixel)
  • Compatibility check tool (Can I use?)

• Comments (Stack Overflow Documentation)

• Selectors (Mozilla)

  • Basic selectors (Mozilla)
  • Attribute selectors (Mozilla)
  • Pseudo-classes & pseudo-elements (Mozilla)
  • Combinators & Multiple selectors (Mozilla)

• Conflicts, Cascading order & Specificity (Stack Overflow Documentation)

• Properties (w3)

  • Flow
    • Display (Mozilla | Stack Overflow Documentation)
    • Position (Mozilla | Stack Overflow Documentation)
    • Float (Mozilla)
    • Box model (w3)
    • Computing flows (w3, in detail)
    • Overflow & Visibility (w3)
  • Other
    • Font-weight (w3)
    • Text (w3)
    • Generated content (w3)
    • Automatic numbering, and lists (w3)
    • Colors and backgrounds (w3)
    • Table border (w3)
  • Inheritance (Mozilla)

• Units (Mozilla | Stack Overflow Documentation)

• Media queries, Breakpoints & Responsiveness (Mozilla | Stack Overflow Documentation)

  • Printing (w3)

• CSS3 (Mozilla, w3)

  • Flexbox (css-tricks)
  • Animation, Transition, Transform, GPU-bound rendering
  • In-depth CSS3

• Accessibility (w3)

• Debugging & Troubleshooting (Mozilla)

• Preprocessors (Sass | Less | Stylus)

  • Lints (Sass Lint | Style Lint | Less Hint | Stylint)

• Tooling (PostCSS | Webpack)

• Methodologies

  • OOCSS
  • BEM
  • SMACSS
  • AMCSS
  • SUITCSS
  • Idiomatic CSS
  • Atomic Design

• Web Components

  • Shadow DOM
    • Scoped CSS