Yesterday I launched my first course CSS Layout and Animations on Design+Code.
I asked people on Twitter to share their favorite CSS resources.
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 by Bjørn Fjellstad on Dribble and Instagram
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 @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 by Jeremy Thomas @jgthms on Twitter.
A comprehensive reference on all things CSS. It has a lot of great visuals.
CSS Cheat Sheet by Adam Marsden @AdamMarsdenUK on Twitter.
A reference for CSS goodness.
30 Seconds of CSS by 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)
CSS-Tricks
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
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
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 by @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 by Sarah Drasner @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 by @playcodepipon Twitter
A site for gamified learning. Flexbox Froggy is a game where you help Froggy and friends by writing CSS code.
Codrops@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 with experiments, plugins and articles related to web development and programming.
FreeCodeCamp 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 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
Rachel Andrew if you care about CSS Grid at all you should follow Rachel. Check out her site Grid By Example
Jen Simmons 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 and her YouTube Channel Layout Land
Wes Bos's courses
Wes Bos has a lot of great content online from courses to his podcast Syntax FM with co-host Scott Tolenski
Jonas Schmetmann Jonas has a fantastic Advanced CSS and Sass 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 from Pexels
Top comments (6)
Thanks for the great list of resources. This one has me confused though:
All the daily designs are done in canvas, which is far from CSS. Don't get me wrong, they look incredible, but quite misleading.
You are right. I think some of the later ones added more technologies. This is what it says on the site
"What technologies do you use?
The simplest ones are just made with HTML, CSS, and SVGs. For the 3D looking ones I'm using WebGL through three.js. Three.js has certain 3d shapes, such as spheres, boxes and planes, built-in which I use a lot with modifications. I'm adding color and textures to those shapes by coding fragment shaders."
github.com/awesome-css-group/aweso...
I'm a big fan of these 'awesome' curated lists. There seems to be at least one for all the major frameworks/languages out there, including react, vue, nodejs and even sass/scss
Excellent css guide
Amazing!! thanks for sharing :smile)
thanks