18 GitHub Repositories to Become a CSS Master 🎨🧙‍♂️
Tags: webdev, design, css, github
Published: 2022-04-26 15:59:40

---
title: 18 GitHub Repositories to Become a CSS Master 🎨🧙‍♂️
published: true
description: 
tags: webdev, design, css, github
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vucegoei3axhxo4ew0wd.png
canonical_url: https://madza.hashnode.dev/18-github-repositories-to-become-a-css-master
---
A while ago I wrote [an article](https://dev.to/madza/21-github-repositories-to-become-a-javascript-master-5bpa) about the repositories you need to master [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript). It got some great feedback, so I decided to make a sequel about [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) as well.

I have further sorted all the resources into categories from learning the basics to style guides, best practices, useful tricks, and tricks as well as additional resources you can study to broaden your CSS knowledge even more.

<hr />

## Learning Resources

### 1.  [Awesome-css-learning](https://github.com/micromata/awesome-css-learning)

> ⭐ GitHub stars: 1k+

{% github https://github.com/micromata/awesome-css-learning no-readme %}

A list of the best CSS learning resources.

### 2. [CSS-reference](https://github.com/jgthms/css-reference)

> ⭐ GitHub stars: 4k+

{% github https://github.com/jgthms/css-reference no-readme %}

CSS Reference: a free visual guide to the most popular CSS properties. 

Available as [cssreference.io](https://cssreference.io/).

### 3. [Magic-of-css](https://github.com/adamschwartz/magic-of-css)

> ⭐ GitHub stars: 5k+

{% github https://github.com/adamschwartz/magic-of-css no-readme %}

A CSS course to turn you into a magician.

<hr />

## Style Guides and Best Practices

### 4. [CSS-architecture](https://github.com/jareware/css-architecture)

> ⭐ GitHub stars: 2k+

{% github https://github.com/jareware/css-architecture no-readme %}

8 simple rules for a robust, scalable CSS architecture.

### 5. [Bevacqua-css](https://github.com/bevacqua/css)

> ⭐ GitHub stars: 800+

{% github https://github.com/bevacqua/css no-readme %}

CSS: The Good Parts.

### 6. [CSS-style-guide](https://github.com/dropbox/css-style-guide)

> ⭐ GitHub stars: 700+

{% github https://github.com/dropbox/css-style-guide no-readme %}

Dropbox’s CSS authoring style guide.

### 7. [Airbnb-css](https://github.com/airbnb/css)

> ⭐ GitHub stars: 6k+

{% github https://github.com/airbnb/css no-readme %}

A mostly reasonable approach to CSS and Sass.

<hr />

## Flexbox and Grid

### 8. [Flex-cheatsheet](https://github.com/yoksel/flex-cheatsheet)

> ⭐ GitHub stars: 900+

{% github https://github.com/yoksel/flex-cheatsheet no-readme %}

Flexbox cheat sheet with visual examples.

### 9. [Flexbox30](https://github.com/samanthaming/Flexbox30)

> ⭐ GitHub stars: 1k+

{% github https://github.com/samanthaming/Flexbox30 no-readme %}

Learn Flexbox in 30 days with 30 code tidbits.

### 10. [Awesome-css-grid](https://github.com/valentinogagliardi/awesome-css-grid)

> ⭐ GitHub stars: 200+

{% github https://github.com/valentinogagliardi/awesome-css-grid no-readme %}

A curated list of CSS Grid Resources.

### 11. [Gridgarden](https://github.com/thomaspark/gridgarden)

> ⭐ GitHub stars: 2k+

{% github https://github.com/thomaspark/gridgarden no-readme %}

An interactive game for learning CSS grid layout.

<hr />

## Useful Tips and Tricks

### 12. [You-need-to-know-css](https://github.com/l-hammer/You-need-to-know-css)

> ⭐ GitHub stars: 4k+

{% github https://github.com/l-hammer/You-need-to-know-css no-readme %}

CSS tricks for web developers

### 13. [CSS-protips](https://github.com/AllThingsSmitty/css-protips)

> ⭐ GitHub stars: 21k+

{% github https://github.com/AllThingsSmitty/css-protips no-readme %}

A collection of tips to help take your CSS skills pro

### 14. [30-seconds-of-css](https://github.com/30-seconds/30-seconds-of-css)

> ⭐ GitHub stars: 15k+

{% github https://github.com/30-seconds/30-seconds-of-css no-readme %}

Short CSS code snippets for all your development needs.

### 15. [You-dont-need-javascript](https://github.com/you-dont-need/You-Dont-Need-JavaScript)

> ⭐ GitHub stars: 17k+

{% github https://github.com/you-dont-need/You-Dont-Need-JavaScript no-readme %}

CSS is powerful, you can do a lot of things without JS.

<hr />

## Additional Resources

### 16. [Awesome-css-frameworks](https://github.com/troxler/awesome-css-frameworks)

> ⭐ GitHub stars: 4k+

{% github https://github.com/troxler/awesome-css-frameworks no-readme %}

List of awesome CSS frameworks in 2022.

### 17. [Must-watch-css](https://github.com/AllThingsSmitty/must-watch-css)

> ⭐ GitHub stars: 4k+

{% github https://github.com/AllThingsSmitty/must-watch-css no-readme %}

A useful list of must-watch talks about CSS.

### 18. [Scalable-css-reading-list](https://github.com/davidtheclark/scalable-css-reading-list)

> ⭐ GitHub stars: 1k+

{% github https://github.com/davidtheclark/scalable-css-reading-list no-readme %}

Collected dispatches from The Quest for Scalable CSS.

<hr>

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on [Twitter](https://twitter.com/madzadev), [LinkedIn](https://www.linkedin.com/in/madzadev/) and [GitHub](https://github.com/madzadev)!

Visit my [Blog](https://madza.dev/blog) for more articles like this.