Pikachu | Pure CSS Day 65

After day 64 I realized something… I forgot most of the stuff I knew. Of course, panic took place, then escapism crept in [the escape was real people] but then soon after, I had to face the issue. I have to reacquaint myself with CSS. I came across this awesome article about making vector art using pure CSS. It was also accounted with a challenge that spans along 50 days. I decided this will be included within my own 180-day challenge.

At first, I was like no. I have to make something big and awesome. I put too much pressure into making awesome stuff which in turn made me not do anything at all so making small things that will slowly grow into bigger and better things seemed the right approach to me at the moment. And I am glad I made that decision because I actually completed the task! [YAY] Not only that, I remembered quite a few things, and stuff actually clicked in my mind. And most importantly I started thinking of things as components which will come handy once I start React. Okay, let me just get into the project right. Yeah…

So I started off by following the tutorial in the article and by the end of it I had a cute Koala, check the demo here.

Now, that I got the hang of the basics it’s time to make my own. I decided to go with Pikachu because well pokemon. First off, I did the vector art using Sketch and made sure I separate the components to later help me in the code

look at that file structure yo!

well of course using a graphics editor is easy, but translating this to code is the hefty part. so let’s get going. [I’ll illustrate the process using a sequence of imaging which I think is better than me discussing the process. You will see my thought process during developemnt]

Yay! You can check out the final result here!

Also, I added a readme file in my Github for this project that lists out the resources using in this project [look at me using markdown and stuff] If you want to check out the resources here’s a link to the file.

That’s it for today.

Happy coding 🙂

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *