Introduction

Today I made my first CSS artwork. It was a coffee mug. And thinking of sharing this with all, I am writing this post. I consider it a journey because it is very different from writing CSS for styling websites.

I styled a lot of websites using CSS but never made a CSS artwork. Whenever I saw any artwork on Twitter shared by the dev community I thought about the difficulty in making it. I thought that there might be a lot of work went into it and a lot of CSS knowledge that I still don't have. But today I found an article on dev.to that helped me in starting and making my first CSS artwork. It contains the link to some important websites that you will need.

I saw many artwork codepens and the second thing that my eyes saw was the length of code. This made me upset.

Starting with the artwork

But today I just made a folder in my documents folder and opened VS Code and made two files: index.html and style.scss.
Yea, I use SCSS and not CSS as SCSS makes writing CSS a lot easier. But then when I was going to start typing HTML, I started wondering about the thing that I was going to create.

Then I opened FIGMA, design tool that I use. And made a new file. Then I started designing the coffee mug that I saw in the above mentioned article. I didn't copy the code or referred to the code, but instead used my prior CSS knowledge. I made a design with element hierarchy.

Then I made the div for the cup, that I took as the base for making the art. And began styling it. It took me some time to style the cup but subsequent elements took no time. The artwork was ready in an hour's time.

Feelings After completing it

I was feeling great after completing it. I got my lost confidence, that was really needed. I posted it on codepen and then shared it on Twitter as well with the community that appreciates it.

Conculsion

If you have even a little knowledge about CSS, then just start making it. It will teach a lot of things during the journey. The best experience can be gained by doing it and not reading other's experience. Take this post as a motivation for you to start making your own CSS artwork.