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
Youtube Videos
Brad Traversy: CSS variables
Brad Traversy: Flexbox CSS in 20 Minutes
REFERENCES
- What is cascading in CSS? https://www.quora.com/What-is-cascading-is-CSS/answer/Heidi-Cool
- Advanced CSS cascade. http://css.maxdesign.com.au/selectutorial/advanced_cascade.htm
- Stackoverflow: What is the meaning of cascading in CSS? https://stackoverflow.com/questions/1043001/what-is-the-meaning-of-cascading-in-css
- Mozilla Developer Network: Cascade. https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade
- z-index CSS tutorial. https://www.1keydata.com/css-tutorial/z-index.php
- Floats Tutorial. https://internetingishard.com/html-and-css/floats/
- CSS Box Model Tutorial. https://internetingishard.com/html-and-css/css-box-model/
- Mozilla Developer Network: Mastering margin collapsing. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
- Mozilla Developer Network: Basic concepts of flexbox. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
- Mozilla Developer Network: Using media queries. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
- Mozilla Developer Network: Using CSS animation. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
- MaintanableCSS by Adam silver. https://maintainablecss.com/
- CSS tricks: A Complete Guide to Flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Using CSS transitions. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
- Mozilla Developer Network: position. https://developer.mozilla.org/en-US/docs/Web/CSS/position
- Write Better CSS. https://blog.theodo.com/2018/06/write-better-css-part-1/
- Cascading Style Sheets Level 2 Revision 1. https://www.w3.org/TR/2011/REC-CSS2-20110607/
- CSS Flexible Box Layout Module Level 1. https://www.w3.org/TR/css-flexbox-1/
- CSS Grid Layout Module Level 1. https://www.w3.org/TR/css-grid-1/
- Media Queries. https://www.w3.org/TR/css3-mediaqueries/
- Flexbox History. https://annairish.github.io/historicizing/history
Up next, JavaScript. I'll see you then.