Hey everyone 👋, today I want to share with you one (of many) thing that I did which made CSS clicked for me.

When I started out learning CSS I wanted to put what I had learnt into practice. But I am lousy at designing things so while I wanted to do some layouts and designs with CSS, I was lacking for ideas. Looking back now, maybe I should have picked a website and made a clone of its design and layout 🤷, but I think as a beginner it was a little bit intimidating.

So how did I manage to do it?

One day, I saw a video on YouTube where developers were challenging each other to something called CSS Battle. CSS Battle is a website that has various "Art" which is designed purely using CSS, they provide the colour palette for you and all you have to do is recreate the design with as few characters as possible.

I thought, that looks really fun, I enjoy a good puzzle/challenge so I gave it ago. I wasn't too concerned with getting the highest score or using fewest characters, I just wanted to write some CSS.

I remember, I spent the whole day on that website, trying to recreate different designs (CSS Art?). I think, I learnt so many new things about positioning, pseudo-elements, transform, and other various CSS properties I have never heard before. But, I think what kept me on that website was me trying to get 100% match on the designs (it never happened 😥).

I would recommend anyone someone who is struggling to find a method to make CSS stick, to give CSS Battle a try. I still the "techniques" I learned from when I solved the CSS Battle in my projects today.

If you made it this far, thank you for reading, here is a big heart for you, created using one div and pseudo-elements.

Have you tried CSS Battle before? What do you think of it?

If you want to get in touch with me, feel free to reach out to me on Twitter.