Tip of the week #007: Become better at CSS using Codepen

A lot of people struggle with CSS and I think one of the reasons is that you often have to write CSS in an existing code base. For beginners this is can feel overwhelming, as CSS in larger projects may feel like a Jenga tower waiting for you to edit the one line of code that brings the whole thing down. For many developers CSS is just one of those things you have to do in a project, and there's rarely enough time to experiment.

This is where Codepen comes in. Tools like these (JSFiddle, for instance) is easy to hop into, write some code and execute it — without having to set up a whole project locally on your computer.

This is especially nice if you want to try out a CSS selector you just learned about. For instance, the other day I learned, through a blog post by Manuel Matuzović, that you can write case insensitive arguments in an attribute selector, where the author had created a demo for this using Codepen.

Another great use case is if you just want to create stuff. Personally I've created dusins of components just for the fun of it, as a way to learn CSS better. For a while one of my favorite things to do was to roam Dribbble, find a design that I liked and recreate it in code. After all, that's what my job entails — recreate what others have designed.

Even though most of the client projects I work on don't need me to create pixel art using ~500 lines of :nth-child selectors or need colorful 3D light switches, I've still learned a great deal just by creating and experimenting.

PS: I'm not affiliated with Codepen whatsoever, I'm just a fan. You can easily boil this tip down to "just build stuff" — and Codepen happens to be a great place to do that.