I'm sure that you and many others would agree that CSS is... well, disliked and is found to be quite difficult! Many developers dread coding in this beautiful language. But have you ever asked yourself: WHY?

Why is it hard to master? Is it cursed? Who the heck has the ability to remember over 540 properties? Why isn't this div centred? I'm pretty sure we've all asked those questions at times or all the time and still do today. There are so many questions and statements made against this beautiful language but have you ever asked yourself: What makes CSS difficult... for me?

What is CSS art?

Art is something you paint or even draw... so is it drawing with code? Yes!

Hold your horses- no need to panic! You might think its not possible, it is. Yes, its no secret that CSS art seems like a very intimidating and difficult coding challenge. I can promise you that its not, it depends on what you are drawing and how big it is. Drawing with CSS is really just smaller components (built piece by piece- to make it seem less complex), combined together to get your desired design. You don't even have to learn complex CSS to accomplish this- but you'll get there, eventually.

What can it do for me?

Making CSS art is truly enjoyable and fun, at least for me. Have you thought of an answer so as to why CSS is difficult for you? Either way, no worries because CSS arts is here to the rescue! There are so many benefits behind CSS arts:

1. You learn and discover CSS properties that you normally don't use.
2. You become better at debugging CSS code.
3. You improve your designing and problem solving skills.
4. The more you code, the better you remember most properties.
5. Improves your speed when writing CSS.

As you practise, experiment, while being patient, you will see an improvement in your skills. Yeah, you read right, there's no doubt about that! And, along the way, even develop genuine love and deeper interest in CSS arts, and the language itself. You'll even wonder- why was CSS difficult in the first place :)

How to get started?

Decide on what you want to make. Start small, aim to know how to make a circle, then proceed to make 2 more, position them, you got yourself a faceless Mickey Mouse. Congrats! Now, build the eyes, the tongue, the nose, the mouth etc. Get all crazy and creative. Remember, build piece-by-piece and experiment with all kinds of properties: pseudo-elements, pseudo-classes, positions and add animations.

My CSS arts for inspiration (hope they do inspire)

It's been approximately 6 months since I started to learn how to code . I struggled with CSS for the first 4 months, because I was rushing through it and not taking my time. Today, I am a self-proclaimed CSS Lover, but that doesn't mean I don't face challenges :-) I have simply improved my attitude and skills through building CSS art.

1. Cactus

This is my first CSS art. I actually watched a YouTube video on how to make a pineapple. As you can see, I changed the design and added my own look. To be honest though, I was not happy with myself because I didn't come up with it.

2. Self-Portrait

Second art, I was genuinely happy with myself here. It came out better than I expected. (Disclaimer: I tried to draw myself).

3. Hello Kitty

My fourth art. (I skipped the 3rd one because I believe in saving the best for last). I love Hello Kitty so much, I challenged myself to recreate her with pure code and I did a pretty darn good job! Although, I really struggled with the ears :(

4. Gumbal & Richard Watterson

5th art, same with Kitty. I challenged myself, coded and these are the results! At this stage, I never again struggled to centre divs and I finally understood how the ::before and ::after pseudo-elements work. My 6th art was then Richard, AKA Mr Dad :)

5. Apple

8th art is a fruit :0 Cute one, isn't he!

6. Hello Kitty Alarm Clock

My recent art, I wanted to play with animations and actually make this clock functional (without JavaScript! Yes, its possible). I did, but I just couldn't understand how the :checked pseudo-class operated.

Conclusions

Coffee

The best for last: My 3rd CSS art. This is by far the best CSS art I have ever coded, I'm actually planning to even print it out and frame it. From this art, I learned how to use the box-shadow property and it honestly elevates the design :) I LOVE BOX-SHADOWS!!!!

That's a wrap. I hope I have enlightened you with some valuable information and eased your frustrations on CSS. Rome wasn't build in one day- it takes patience, learning without practise is useless- build AND experiment with code. Have a positive attitude and learning CSS will be very enjoyable and easy.