Habdul Hazeez

Posted on Dec 11, 2019

CSS References and Resource

#beginners #css

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

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.

DEV Community