{"id":405,"url":"https://github.com/micromata/awesome-css-learning","last_synced_at":"2025-09-28T23:31:53.883Z","repository":{"id":40437267,"uuid":"132377364","full_name":"micromata/awesome-css-learning","owner":"micromata","description":"A tiny list limited to the best CSS Learning Resources","archived":false,"fork":false,"pushed_at":"2023-12-01T00:53:11.000Z","size":314,"stargazers_count":3375,"open_issues_count":8,"forks_count":240,"subscribers_count":62,"default_branch":"master","last_synced_at":"2024-05-21T13:16:24.664Z","etag":null,"topics":["awesome","awesome-list","css","css-learning","learning","resources"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/micromata.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":".github/contributing.md","funding":null,"license":"LICENSE.MD","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-05-06T21:26:52.000Z","updated_at":"2024-05-21T13:16:24.665Z","dependencies_parsed_at":"2024-01-16T15:47:41.169Z","dependency_job_id":null,"html_url":"https://github.com/micromata/awesome-css-learning","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micromata%2Fawesome-css-learning","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micromata%2Fawesome-css-learning/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micromata%2Fawesome-css-learning/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/micromata%2Fawesome-css-learning/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/micromata","download_url":"https://codeload.github.com/micromata/awesome-css-learning/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234475348,"owners_count":18839361,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awesome","awesome-list","css","css-learning","learning","resources"],"created_at":"2024-01-05T20:12:54.026Z","updated_at":"2025-09-28T23:31:48.835Z","avatar_url":"https://github.com/micromata.png","language":null,"readme":"# Awesome CSS Learning [![Awesome](https://awesome.re/badge.svg)](https://awesome.re) \u003ca href=\"https://developer.mozilla.org/docs/Web/CSS\"\u003e\u003cimg src=\"https://upload.wikimedia.org/wikipedia/commons/d/d5/CSS3_logo_and_wordmark.svg\" width=\"125\" align=\"right\" alt=\"CSS Logo\"\u003e\u003c/a\u003e\n\n\u003e An awesome list limited to the best CSS learning resources\n\nThis list is mainly about [CSS](https://developer.mozilla.org/docs/Web/CSS) – the language and the modules. Not about naming conventions, architecture paradigms, frameworks, pre-processors, post-processors, CSS-in-JS or other aspects of todays CSS ecosystem.\n\n*Please read the [contribution guidelines](.github/contributing.md) before contributing.*\n\n## Contents\n\n- [CSS References](#css-references)\n- [CSS in a nutshell](#css-in-a-nutshell)\n- [Fundamental concepts](#fundamental-concepts)\n- [CSS units](#css-units)\n- [Selectors](#selectors)\n- [Custom properties (aka CSS variables)](#custom-properties-aka-css-variables)\n- [Layout](#layout)\n- [Animation](#animation)\n- [Related](#related)\n\n---\n\n## CSS References\n\n- [codrops](https://tympanus.net/codrops/css_reference/) - An extensive CSS reference offering way more content than [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference).\n- [Can I use](https://caniuse.com) - Interactive browser support tables for CSS (and HTML5).\n\n## CSS in a nutshell\n\n- [Introduction to CSS](https://scrimba.com/g/gintrotocss) - This screencast series will teach you the basics of CSS in about one hour.\n\n## Fundamental concepts\n\n- [The cascade](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade) - This article explains what the cascade is and how this affects you.\n- [Specificity and inheritance](https://www.smashingmagazine.com/2010/04/css-specificity-and-inheritance/) - Understanding specificity and inheritance is important to master CSS. This article will help.\n- [CSS Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model) - An article explaining the foundation of layout on the web.\n  - Also have a look at the detailed information about the [box-sizing](https://css-tricks.com/box-sizing/) property.\n- [Responsive Design](https://web.dev/learn/design/) - Extensive information about all aspects of responsive design to make sites that look great and work well for everyone.\n\n## CSS units\n\n- [The Lengths of CSS](https://css-tricks.com/the-lengths-of-css/) - Overview covering absolute and relative units.\n- [Fun with Viewport Units](https://css-tricks.com/fun-viewport-units/) - Imparts the basics and shows some nifty use-cases.\n\n## Selectors\n\n- [Basic CSS Selectors](https://www.sitepoint.com/css-selectors/) - An introduction to the very basic CSS selectors you need to know.\n- [Advanced CSS Selectors](https://www.smashingmagazine.com/2009/08/taming-advanced-css-selectors/) - Level up your knowledge. From attribute selectors to CSS3 pseudo classes.\n- [CSS Diner](https://flukeout.github.io) - Learn how to use CSS selectors with this fun little game.\n\n## Custom properties (aka CSS variables)\n\n- [CSS Variables: Why Should You Care?](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care) - A short introduction to CSS variables.\n- [Locally Scoped CSS Variables: What, How, and Why](https://una.im/local-css-vars/) - Describes the advantages of locally scoped CSS variables.\n- [Using CSS variables correctly](https://www.madebymike.com.au/writing/using-css-variables/) - Patterns and anti-patterns for using CSS variables.\n- [Everything you need to know about CSS Variables](https://medium.freecodecamp.org/everything-you-need-to-know-about-css-variables-c74d922ea855) - In depth article going beyond the basics of CSS Variables using real-world examples.\n- [Getting Reactive with CSS](https://www.youtube.com/watch?v=4IRPxCMAIfA) - Mindblowing talk about the possibilities of the combination of CSS variables and functional reactive programming in JavaScript.\n\n## Layout\n\n- [Learn CSS Layout](http://book.mixu.net/css) - Learn about CSS layout techniques in 5 chapters.\n- [Layout Land](https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag) - Jen Simmons video series about the new CSS Layout possibilities.\n- [Laying Out The Future With Grid And Flexbox](https://www.youtube.com/watch?v=hj355PRbwSQ) - Introduction of a new layout system encompassing Flexbox, CSS Grid and the Box Alignment Module.\n\n### Classic layouting\n\n- [Floats](https://tympanus.net/codrops/css_reference/float/) - In depth information about how to use (and clear) floats.\n- [Positioning Types](https://scotch.io/bar-talk/5-things-you-might-not-know-about-the-css-positioning-types) - A closer look at a few little-known things related to the CSS positioning layout method.\n- [inline-block](https://iamsteve.me/blog/entry/inline_block) - Shows in which cases it makes sense to use the display property `inline-block` for layouting.\n\n### Flexbox\n\n- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - All you need to know about Flexbox on one page.\n\u003c!--lint ignore no-dead-urls--\u003e\n- [Flexbox playground](https://codepen.io/enxaneta/full/adLPwv) - Play with Flexbox examples on CodePen.\n- [Flexbox Defense](http://www.flexboxdefense.com) - A tower defense game in the browser to learn about Flexbox with fun.\n- [Flexbox Froggy](https://flexboxfroggy.com) - Learn all the basics of Flexbox with a fun game involving frogs and lily pads.\n- [Flexbugs](https://github.com/philipwalton/flexbugs) - Community-curated list of flexbox issues and cross-browser workarounds for them.\n- [Flexbox Zombies](https://flexboxzombies.com) - A training course driven by a storyline where you use Flexbox and a crossbow to hunt zombies.\n- [What the Flexbox?](https://flexbox.io/) - A simple, free 20 video course that will help you master CSS Flexbox!\n\n### Grid\n\n- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) - All you need to know about CSS Grid Layout on one page.\n- [Grid by Example](https://gridbyexample.com) - Besides examples of how to use Grid, this site also has additional useful learning resources.\n- [Designing with Grid](https://talks.jensimmons.com/J5VRbA/designing-with-grid) - Talk about the new layout possibilities CSS Grid is offering.\n- [Grid Garden](https://cssgridgarden.com) - Lovely game where you write CSS code to grow your carrot garden.\n- [GridBugs](https://github.com/rachelandrew/gridbugs) - Community-curated list of Grid interop issues and workarounds for them.\n- [Grid Critters](https://www.gridcritters.com) - Learn CSS grid layout by mastering an adventure game.\n- [CSS Grid](https://cssgrid.io) - Learn CSS grid with Wes Bos - Free 4 hours video course, 25 Videos.\n\n## Animation\n\n- [CSS Transitions and Transforms for Beginners](https://robots.thoughtbot.com/transitions-and-transforms) - An introduction to CSS transitions and CSS (2D) transforms.\n- [All you need to know about CSS Transitions](https://blog.alexmaccaw.com/all-you-need-to-know-about-css-transitions/) - Also addressing advanced topics from chaining and events to hardware acceleration and animation functions.\n- [CSS 3D transforms](https://3dtransforms.desandro.com) - Multi page tutorial with examples like card flip and carousel effects.\n- [CSS Animation for Beginners](https://robots.thoughtbot.com/css-animation-for-beginners) - Imparts the concepts of CSS animations with keyframes.\n- [animatable](http://leaverou.github.io/animatable/) - Nice little page demonstrating which CSS properties are animatable. \n\n---\n\n## Related\n\n[Awesome JavaScript Learning](https://github.com/micromata/awesome-javascript-learning) - A tiny list limited to the best JavaScript learning resources.\n","funding_links":[],"categories":["Technical","学习","Learn","Others","Related","Live Site:   [searchAwesome](https://search-awesome.vercel.app/)","Uncategorized","Other Lists","Basic Concepts","frontend","Themed Directories"],"sub_categories":["awesome-*","Single Topics","Uncategorized","TeX Lists","CSS"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicromata%2Fawesome-css-learning","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicromata%2Fawesome-css-learning","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicromata%2Fawesome-css-learning/lists"}