CSS References and Resource

This post contains reference materials that helped in writing the CSS section of this series and resources to help you in your learning endeavors.

Articles

The following articles will help you advance your CSS skills. Take your time to read them and if they contain code examples do your best to follow along.

25 Days of CSS Animations: Teaching Myself CSS through Motion Design.

Tee ・ Oct 20 '19

#webdev #codepen #showdev #css

Learn CSS animation by creating pure CSS loaders

Andreas ・ Nov 26 '19

#css #beginners #tutorial #animation

CSS can do that?

Ananya Neogi ・ May 17 '19

#webdev #css

CSS Cheat Sheets!

Ali Spittel for Ladybug Podcast ・ Aug 12 '19

#css

Youtube Videos

Brad Traversy: CSS variables

Brad Traversy: Flexbox CSS in 20 Minutes

REFERENCES

1. What is cascading in CSS? https://www.quora.com/What-is-cascading-is-CSS/answer/Heidi-Cool
2. Advanced CSS cascade. http://css.maxdesign.com.au/selectutorial/advanced_cascade.htm
3. Stackoverflow: What is the meaning of cascading in CSS? https://stackoverflow.com/questions/1043001/what-is-the-meaning-of-cascading-in-css
4. Mozilla Developer Network: Cascade. https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade
5. z-index CSS tutorial. https://www.1keydata.com/css-tutorial/z-index.php
6. Floats Tutorial. https://internetingishard.com/html-and-css/floats/
7. CSS Box Model Tutorial. https://internetingishard.com/html-and-css/css-box-model/
8. Mozilla Developer Network: Mastering margin collapsing. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
9. Mozilla Developer Network: Basic concepts of flexbox. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
10. Mozilla Developer Network: Using media queries. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
11. Mozilla Developer Network: Using CSS animation. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
12. MaintanableCSS by Adam silver. https://maintainablecss.com/
13. CSS tricks: A Complete Guide to Flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
14. Using CSS transitions. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
15. Mozilla Developer Network: position. https://developer.mozilla.org/en-US/docs/Web/CSS/position
16. Write Better CSS. https://blog.theodo.com/2018/06/write-better-css-part-1/
17. Cascading Style Sheets Level 2 Revision 1. https://www.w3.org/TR/2011/REC-CSS2-20110607/
18. CSS Flexible Box Layout Module Level 1. https://www.w3.org/TR/css-flexbox-1/
19. CSS Grid Layout Module Level 1. https://www.w3.org/TR/css-grid-1/
20. Media Queries. https://www.w3.org/TR/css3-mediaqueries/
21. Flexbox History. https://annairish.github.io/historicizing/history

Up next, JavaScript. I'll see you then.