learn-css-intermediate.md

CSS Intermediate Guide

Selectors and Specificity

• Selectors - Basics: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
• Pseudo classes: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
• Pseudo elements: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
• Cascade:
  • https://css-tricks.com/the-c-in-css-the-cascade
  • https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
• Specificity:
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
  • https://specifishity.com

CSS Layout

• Introduction
  • Introduction: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction
  • display: https://developer.mozilla.org/en-US/docs/Web/CSS/display
• Responsive Design:
  • Introduction
    • 1: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
    • 2: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks
  • Media Queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
• Flexbox
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • https://sharkcoder.com/layout/flexbox
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
  • https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
• Grid
  • https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids
  • https://css-tricks.com/snippets/css/complete-guide-grid/
  • https://learncssgrid.com/
• Positioning: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

Miscellaneous

• @font-face: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face