CSS

Basic

Details

1. Selectors (at least know the main 10 different selectors, there’s more than 50 in total)
   1. Attribute selectors
   2. Class selectors
   3. ID selectors
   4. Type selectors
   5. Universal selectors
2. Flexbox
3. Box model
4. Positioning
5. Block vs inline elements
6. Margins, margin collapsing

Links

1. https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps
2. https://www.w3schools.com/cssref/css_selectors.asp
3. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
4. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
5. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
6. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
7. https://developer.mozilla.org/en-US/docs/Web/CSS/position
8. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
9. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Intermediate

Details

1. CSS animations
2. Grid layout
3. The stacking context
4. CSS fonts
5. Media queries, responsive design
6. calc()

Links

1. https://developer.mozilla.org/en-US/docs/Web/CSS/animation
2. https://css-tricks.com/snippets/css/complete-guide-grid/
3. https://learncssgrid.com/
4. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
5. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
6. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts
7. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries
8. https://css-tricks.com/a-complete-guide-to-css-media-queries/
9. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
10. https://developer.mozilla.org/en-US/docs/Web/CSS/calc
11. https://css-tricks.com/a-complete-guide-to-calc-in-css/