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.
Top comments (8)
Yeah that might be one way to go about it - practice makes perfect ...
My take on it is that we need more/better teaching on the fundamentals of CSS - what I mean is, often it seems that CSS is just a random hodgepodge of tricks and abacadabra, however there is a method to the madness, there are deeply-hidden reasons why it works the way it does, and why it evolved the way it did ...
I think understanding more about the fundamentals and the mechanisms of how CSS works internally has the potential to move us beyond the mindset of "it doesn't work, so I google it and pluck a solution from Stackoverflow - now it seems to work, but I STILL don't have a clue why ..."
That's an interesting take for sure. I'm definitely the type that wants to understand how and why something works before using it. For example, when doing this practice with CSS Battle, it's not about remember this line of code does this, I learned which properties do what thing, which is probably why I felt that it was a good experience for me :) I agree with you about understanding more about the fundamentals but at the same time, if there are already solutions out there you can use it but just understand, that's it is my two cents on it.
Neat! Thanks for a great link
Awesome! thanks for the link I def could use some CSS practice to use to Material and Bootstrap lol.
No problem! It really does help, and it's fun too :D good luck!
Great advice brother. I'll definitely try it
Give it ago, then you will find out CSS is not so bad 🤣
Would you allow me to publish your post translated into Brazilian Portuguese, here on DevTo 😉?