Member-only story
Originally published as a thread on Twitter, I wanted to compile this list of CSS and SVG resources all in one place for easy reference. I’ve updated some of the resources and as a bonus, also added additional information and useful tools that were not on the original thread.
Who Am I?
I’m a designer-turned-developer who started my #100DaysOfCode journey in April 2020 with an aim to get better at JavaScript. Somewhere along the way, I got derailed by some beautiful CSS art I was seeing from other developers on the platform. It was a complete mystery but as I started to explore this new world, I found it a beautiful fit for my designer/artist side.
On Twitter, people would often ask me about tutorials and how to get better. To be honest, I don’t really follow tutorials. I love working on my own ideas and googling as needed when I got stuck or needed to dive deeper to understand something. I think this is a great way of bringing your own ideas to life and keeps you challenged!
That said, tutorials & documentation play a HUGE role in my learning. So, without further ado, here are some resources I like. I hope they’ll be beneficial to you!
CSS art
- A great place to start
https://www.creativebloq.com/amp/features/get-started-with-css-art - Great tutorial aimed at the beginner with a free video course
https://medium.com/coding-artist/a-beginners-guide-to-pure-css-images-ef9a5d069dd - Master shapes; They’re a cornerstone for creating CSS art
https://css-tricks.com/the-shapes-of-css/ - How to draw with gradients…
