jaeswift-website/api/data/awesomelist/micromata--awesome-css-learning.json

{"slug": "micromata--awesome-css-learning", "title": "Css Learning", "description": "A tiny list limited to the best CSS Learning Resources", "github_url": "https://github.com/micromata/awesome-css-learning", "stars": "2.4K", "tag": "Learn", "entry_count": 51, "subcategory_count": 4, "subcategories": [{"name": "General", "parent": "", "entries": [{"name": "CSS References", "url": "#css-references", "description": ""}, {"name": "CSS in a nutshell", "url": "#css-in-a-nutshell", "description": ""}, {"name": "Fundamental concepts", "url": "#fundamental-concepts", "description": ""}, {"name": "CSS units", "url": "#css-units", "description": ""}, {"name": "Selectors", "url": "#selectors", "description": ""}, {"name": "Custom properties (aka CSS variables)", "url": "#custom-properties-aka-css-variables", "description": ""}, {"name": "Layout", "url": "#layout", "description": ""}, {"name": "Animation", "url": "#animation", "description": ""}, {"name": "Related", "url": "#related", "description": ""}, {"name": "codrops", "url": "https://tympanus.net/codrops/css_reference/", "description": "An extensive CSS reference offering way more content than [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)."}, {"name": "Can I use", "url": "https://caniuse.com", "description": "Interactive browser support tables for CSS (and HTML5)."}, {"name": "Introduction to CSS", "url": "https://scrimba.com/g/gintrotocss", "description": "This screencast series will teach you the basics of CSS in about one hour."}, {"name": "The cascade", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade", "description": "This article explains what the cascade is and how this affects you."}, {"name": "Specificity and inheritance", "url": "https://www.smashingmagazine.com/2010/04/css-specificity-and-inheritance/", "description": "Understanding specificity and inheritance is important to master CSS. This article will help."}, {"name": "CSS Box Model", "url": "https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "description": "An article explaining the foundation of layout on the web."}, {"name": "Responsive Design", "url": "https://web.dev/learn/design/", "description": "Extensive information about all aspects of responsive design to make sites that look great and work well for everyone."}, {"name": "The Lengths of CSS", "url": "https://css-tricks.com/the-lengths-of-css/", "description": "Overview covering absolute and relative units."}, {"name": "Fun with Viewport Units", "url": "https://css-tricks.com/fun-viewport-units/", "description": "Imparts the basics and shows some nifty use-cases."}, {"name": "Basic CSS Selectors", "url": "https://www.sitepoint.com/css-selectors/", "description": "An introduction to the very basic CSS selectors you need to know."}, {"name": "Advanced CSS Selectors", "url": "https://www.smashingmagazine.com/2009/08/taming-advanced-css-selectors/", "description": "Level up your knowledge. From attribute selectors to CSS3 pseudo classes."}, {"name": "CSS Diner", "url": "https://flukeout.github.io", "description": "Learn how to use CSS selectors with this fun little game."}, {"name": "CSS Variables: Why Should You Care?", "url": "https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care", "description": "A short introduction to CSS variables."}, {"name": "Locally Scoped CSS Variables: What, How, and Why", "url": "https://una.im/local-css-vars/", "description": "Describes the advantages of locally scoped CSS variables."}, {"name": "Using CSS variables correctly", "url": "https://www.madebymike.com.au/writing/using-css-variables/", "description": "Patterns and anti-patterns for using CSS variables."}, {"name": "Everything you need to know about CSS Variables", "url": "https://medium.freecodecamp.org/everything-you-need-to-know-about-css-variables-c74d922ea855", "description": "In depth article going beyond the basics of CSS Variables using real-world examples."}, {"name": "Getting Reactive with CSS", "url": "https://www.youtube.com/watch?v=4IRPxCMAIfA", "description": "Mindblowing talk about the possibilities of the combination of CSS variables and functional reactive programming in JavaScript."}, {"name": "Learn CSS Layout", "url": "http://book.mixu.net/css", "description": "Learn about CSS layout techniques in 5 chapters."}, {"name": "Layout Land", "url": "https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag", "description": "Jen Simmons video series about the new CSS Layout possibilities."}, {"name": "Laying Out The Future With Grid And Flexbox", "url": "https://www.youtube.com/watch?v=hj355PRbwSQ", "description": "Introduction of a new layout system encompassing Flexbox, CSS Grid and the Box Alignment Module."}]}, {"name": "Classic layouting", "parent": "Layout", "entries": [{"name": "Floats", "url": "https://tympanus.net/codrops/css_reference/float/", "description": "In depth information about how to use (and clear) floats."}, {"name": "Positioning Types", "url": "https://scotch.io/bar-talk/5-things-you-might-not-know-about-the-css-positioning-types", "description": "A closer look at a few little-known things related to the CSS positioning layout method."}, {"name": "inline-block", "url": "https://iamsteve.me/blog/entry/inline_block", "description": "Shows in which cases it makes sense to use the display property `inline-block` for layouting."}]}, {"name": "Flexbox", "parent": "Layout", "entries": [{"name": "A Complete Guide to Flexbox", "url": "https://css-tricks.com/snippets/css/a-guide-to-flexbox/", "description": "All you need to know about Flexbox on one page."}, {"name": "Flexbox playground", "url": "https://codepen.io/enxaneta/full/adLPwv", "description": "Play with Flexbox examples on CodePen."}, {"name": "Flexbox Defense", "url": "http://www.flexboxdefense.com", "description": "A tower defense game in the browser to learn about Flexbox with fun."}, {"name": "Flexbox Froggy", "url": "https://flexboxfroggy.com", "description": "Learn all the basics of Flexbox with a fun game involving frogs and lily pads."}, {"name": "Flexbugs", "url": "https://github.com/philipwalton/flexbugs", "description": "Community-curated list of flexbox issues and cross-browser workarounds for them.", "stars": "13k"}, {"name": "Flexbox Zombies", "url": "https://flexboxzombies.com", "description": "A training course driven by a storyline where you use Flexbox and a crossbow to hunt zombies."}, {"name": "What the Flexbox?", "url": "https://flexbox.io/", "description": "A simple, free 20 video course that will help you master CSS Flexbox!"}]}, {"name": "Grid", "parent": "Layout", "entries": [{"name": "A Complete Guide to Grid", "url": "https://css-tricks.com/snippets/css/complete-guide-grid/", "description": "All you need to know about CSS Grid Layout on one page."}, {"name": "Grid by Example", "url": "https://gridbyexample.com", "description": "Besides examples of how to use Grid, this site also has additional useful learning resources."}, {"name": "Designing with Grid", "url": "https://talks.jensimmons.com/J5VRbA/designing-with-grid", "description": "Talk about the new layout possibilities CSS Grid is offering."}, {"name": "Grid Garden", "url": "https://cssgridgarden.com", "description": "Lovely game where you write CSS code to grow your carrot garden."}, {"name": "GridBugs", "url": "https://github.com/rachelandrew/gridbugs", "description": "Community-curated list of Grid interop issues and workarounds for them.", "stars": "1.2k"}, {"name": "Grid Critters", "url": "https://www.gridcritters.com", "description": "Learn CSS grid layout by mastering an adventure game."}, {"name": "CSS Grid", "url": "https://cssgrid.io", "description": "Learn CSS grid with Wes Bos - Free 4 hours video course, 25 Videos."}, {"name": "CSS Transitions and Transforms for Beginners", "url": "https://robots.thoughtbot.com/transitions-and-transforms", "description": "An introduction to CSS transitions and CSS (2D) transforms."}, {"name": "All you need to know about CSS Transitions", "url": "https://blog.alexmaccaw.com/all-you-need-to-know-about-css-transitions/", "description": "Also addressing advanced topics from chaining and events to hardware acceleration and animation functions."}, {"name": "CSS 3D transforms", "url": "https://3dtransforms.desandro.com", "description": "Multi page tutorial with examples like card flip and carousel effects."}, {"name": "CSS Animation for Beginners", "url": "https://robots.thoughtbot.com/css-animation-for-beginners", "description": "Imparts the concepts of CSS animations with keyframes."}, {"name": "animatable", "url": "http://leaverou.github.io/animatable/", "description": "Nice little page demonstrating which CSS properties are animatable."}]}], "name": ""}