CSS References and Resource
Tags: beginners, css
Published: 2019-12-11 11:09:16

---
title: CSS References and Resource
published: true
description: Reference materials and learning resources for CSS as part of FrontEnd Development Zero to Hero series of articles.
tags: beginners, css
series: FrontEnd Development Zero to Hero
---
This post contains _reference materials_ that helped in writing the [CSS section](https://dev.to/ziizium/introduction-to-css-1fm) of [this series](https://dev.to/ziizium/frontend-development-zero-to-hero-j0j) 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.

{% link https://dev.to/acupoftee/25-days-of-css-animations-teaching-myself-css-through-motion-design-4l10 %} 

<hr>

{% link https://dev.to/devmount/learn-css-animation-by-creating-pure-css-loaders-3lm6 %}

<hr>

{% link https://dev.to/ananyaneogi/css-can-do-that-18g7 %}

<hr>

{% link https://dev.to/ladybug/css-cheat-sheets-3ee0 %} 

<hr>

##__Youtube Videos__

####__Brad Traversy: CSS variables__

{% youtube sQUB039MG0I %}

####__Brad Traversy: Flexbox CSS in 20 Minutes__

{% youtube JJSoEo8JSnc %}

##__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://adamsilver.io/). 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

<hr>

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