CSS Resources Recommended by the Tech Community
Tags: css, webdev, frontend
Published: 2019-05-29 20:24:56

---
title: CSS Resources Recommended by the Tech Community
published: true
description: A curated list of awesome CSS resources shared by the community
tags: #css, #webdev, #frontend
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3serxrc2q64qvfat4wtz.jpg
---
Yesterday I launched my first course [CSS Layout and Animations](https://designcode.io/css-layout-and-animations) on Design+Code. 

I asked people on Twitter to share their favorite CSS resources. 
{% twitter 1133456916443803648 %}

I've worked with CSS a lot the last 3 years and was surprised by how many of the resources I hadn't seen before. Here is a list of the resources shared by the tech community.

### Ones I Hadn't Seen Before:

[Daily CSS Design](https://dailycssdesign.com/) by Bjørn Fjellstad on [Dribble](https://dribbble.com/bear-bjorn/) and [Instagram](https://www.instagram.com/dailycssdesign/)
This is a gorgeous collection of CSS inspiration. Bjørn's goal was to to create one design every day for a year.

[Cody House](https://codyhouse.co/) [@codywebhouse](https://twitter.com/CodyWebHouse) on Twitter.
This is a CSS framework and library of accessible HTML, CSS, JavaScript components. It has some nice documentation and examples on the site. 

[css-reference.io](https://cssreference.io/) by Jeremy Thomas [@jgthms](https://twitter.com/jgthms) on Twitter.
A comprehensive reference on all things CSS. It has a lot of great visuals.

[CSS Cheat Sheet](https://adam-marsden.co.uk/css-cheat-sheet) by Adam Marsden [@AdamMarsdenUK](https://twitter.com/AdamMarsdenUK) on Twitter.
A reference for CSS goodness.

[30 Seconds of CSS](https://30-seconds.github.io/30-seconds-of-css/) by [atomiks](https://github.com/atomiks) on GitHub. 
A curated collection of useful CSS snippets you can understand in 30 seconds or less. 

### Most Popular Resources

By far the top favorites were CSS-Tricks and Mozilla Developer Network(MDN)
{% twitter 1133744361664110592 %}

[CSS-Tricks](https://css-tricks.com/)
CSS-Tricks has been around for a long time and is a great resource for just about anything you can think of when it comes to CSS and Front-end in general.

[MDN's web docs](https://developer.mozilla.org/en-US/)
MDN has reference guides for most things related to web technology. There are guides, tutorials and pathways to learning on the site. 

### More Great Resources Mentioned
[CodePen](https://codepen.io/)
One of my favorites and something I use a lot in my course. CodePen is like Dribbble for developers. It is an online code editor for designers and developers of any skill, and is particularly empowering for people learning to code.

[CSS Visual Dictionary](https://www.amazon.com/CSS-Visual-Dictionary-Greg-Sidelnikov/dp/1983065633) by [@js_tut](https://twitter.com/js_tut) on Twitter
It has over 250 visual diagrams explaining all CSS properties and values currently supported by all major browsers in common use.

Greg has a lot of great resources online that he often shares for free with the community. You can follow him on Twitter to keep up-to-date with his latest work.

[CSS Grid Generator](https://cssgrid-generator.netlify.com/) by Sarah Drasner [@sarah_edo](https://twitter.com/sarah_edo) on Twitter 
It is a small visual tool that generates CSS Grid code for you. You can designate rows, columns, gaps, and units, and then drag to create child divs to make dynamic layouts easily. 

[Flexbox Froggy] (https://flexboxfroggy.com/) by [@playcodepip](https://twitter.com/playcodepip)on Twitter
A site for gamified learning. Flexbox Froggy is a game where you help Froggy and friends by writing CSS code. 

[Codrops](https://tympanus.net/codrops/)[@codrops](https://twitter.com/codrops) on Twitter
A site dedicated to providing useful tutorials, insightful articles, creative inspiration and free resources for web designers and developers.

They also have a [Code Playground](https://tympanus.net/codrops/category/playground/) with experiments, plugins and articles related to web development and programming.

[FreeCodeCamp](https://www.freecodecamp.org/) FreeCodeCamp is a non-profit that's helping millions of people learn to code for free. There are a couple of sections in the curriculum dedicated just to CSS. 

[Lea Verou](https://twitter.com/LeaVerou) is a very inspiring person to follow on Twitter. She is a wealth of information including the things she shares in her book [CSS Secrets](https://www.amazon.com/CSS-Secrets-Lea-Verou/dp/1449372635?tag=leaverou-20)

[Rachel Andrew](https://twitter.com/rachelandrew) if you care about CSS Grid at all you should follow Rachel. Check out her site [Grid By Example](https://gridbyexample.com/)

[Jen Simmons](https://twitter.com/jensimmons) another great person to follow if you like grid or web layout in general. She has a lot of amazing examples on her website [The Experimental Layout Lab](https://labs.jensimmons.com/) and her YouTube Channel [Layout Land](https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag)

[Wes Bos's courses] (https://cssgrid.io/)
[Wes Bos](https://twitter.com/wesbos) has a lot of great content online from courses to his podcast [Syntax FM](https://syntax.fm/) with co-host [Scott Tolenski](https://twitter.com/stolinski)


[Jonas Schmetmann](https://twitter.com/jonasschmedtman) Jonas has a fantastic [Advanced CSS and Sass](https://www.udemy.com/advanced-css-and-sass/?couponCode=TWITTER4) course on Udemy. I see him brought up all the time when people ask for a CSS course. I've personally taken his course and loved it. 




What are your favorite CSS resources? Anything I am missing you would like to add? Let me know in the comments.



Cover Photo by [Lukas](https://www.pexels.com/photo/code-coding-computer-data-574073/) from Pexels