Top 50 Awesome List

micromata/awesome-css-learning

Learn  8 months ago  1.7k
A tiny list limited to the best CSS Learning Resources
View byDAY/WEEK/README
View on Github

Apr 9th

Animation

  • All you need to know about CSS Transitions - Also addressing advanced topics from chaining and events to hardware acceleration and animation functions.
  • Oct 20th, 2020

    Layout

    Grid

  • Grid by Example - Besides examples of how to use Grid this site also has additional useful learning resources.
  • Dec 13th, 2019

    Layout

    Grid

  • Designing with Grid - Talk about the new layout possibilities CSS Grid is offering.
  • Oct 2nd, 2018

    Layout

    Grid

  • Grid Critters - Learn CSS grid layout by mastering an adventure game.
  • May 28th, 2018

    Layout

    Grid

  • GridBugsstars1.2k - Community-curated list of Grid interop issues and workarounds for them.
  • May 11th, 2018

    Animation

  • CSS Transitions and Transforms for Beginners - An introduction to to CSS transitions and CSS (2D) transforms.
  • CSS 3D transforms - Multi page tutorial with examples like card flip and carousel effects.
  • CSS Animation for Beginners - Imparts the concepts of CSS animations with keyframes.
  • animatable - Nice little page demonstrating which CSS properties are animatable.
  • May 9th, 2018

    Layout

  • Learn CSS Layout - Learn about CSS layout techniques in 5 chapters.
  • Layout

    Grid

  • Grid Garden - Lovely game where you write CSS code to grow your carrot garden.
  • May 8th, 2018

    Layout

  • Laying Out The Future With Grid And Flexbox - Introduction of a new layout system encompassing Flexbox, CSS Grid and the Box Alignment Module.
  • May 7th, 2018

    Fundamental concepts

  • The cascade - This article explains what the cascade is and how this affects you.
  • Specificity and inheritance - Understanding specificity and inheritance is important to master CSS. This article will help.
  • CSS Box Model - An article explaining the foundation of layout on the web.
    • Also have a look at the detailed information about the box-sizing property.
  • CSS in a nutshell

  • Introduction to CSS - This Screencast series will teach you the basics of CSS in about one hour.
  • Custom properties (aka CSS variables)

  • CSS Variables: Why Should You Care? - A short introduction to CSS variables.
  • Locally Scoped CSS Variables: What, How, and Why - Describes the advantages of locally scoped CSS variables.
  • Using CSS variables correctly - Patterns and anti-patterns for using CSS variables.
  • Everything you need to know about CSS Variables - In depth article going beyond the basics of CSS Variables using real-world examples.
  • Getting Reactive with CSS - Mindblowing talk about the possibilities of the combination of CSS variables and functional reactive programming in JavaScript.
  • Selectors

  • Basic CSS Selectors - An introducing to the very basic CSS selectors you need to know.
  • Advanced CSS Selectors - Level up your knowledge. From attribute selectors to CSS3 pseudo classes.
  • Layout

    Classic layouting

  • Floats - In depth information about how to use (and clear) floats.
  • Positioning Types - A closer look at a few little-known things related to the CSS positioning layout method.
  • inline-block - Shows in which cases it makes sense to use the display property inline-block for layouting.
  • CSS References

  • Can I use - Interactive browser support tables for CSS (and HTML5).
  • May 6th, 2018

    CSS References

  • codrops - An extensive CSS reference offering way more content than MDN.
  • CSS units

  • The Lengths of CSS - Overview covering absolute and relative units.
  • Fun with Viewport Units - Imparts the basics and shows some nifty use-cases.
  • Selectors

  • CSS Dinner - Learn how to use CSS selectors with this fun little game.
  • Layout

  • Layout Land - Jen Simmons video series about the new CSS Layout possibilities.
  • Layout

    Flexbox

  • A Complete Guide to Flexbox - All you need to know about Flexbox on one page.
  • Layout

    Grid

  • A Complete Guide to Grid - All you need to know about CSS Grid Layout on one page.
  • Last Checked At: 2021-11-26T18:26:33.908Z
    Previous
    micromata/awesome-javascript-learning
    Next
    dend/awesome-product-management

    About

    Track your favorite github awesome repo, not just star it. trackawesomelist.com provides website, newsletter, RSS for tracking the popular awesome list by daily and weekly.
    Contact us: [email protected]
    Track Awesome List - Track your favorite Github awesome repos, not just star them | Product Hunt

    Subscribe

    Subscribe to our weekly newsletter to receive the awesome updates! We never send spam and you can unsubscribe instantly with one click. Here's past issues.

    Links

    Follow us on TwitterSubscribe us on TelegramSubmit awesome list repoNewsletterDonateSitemap