I was almost in the middle of my #100DaysOfCode challenge when I started noticing on my twitter feed several cute images with the hashtag #dailyCssImages. When I would click on them I could see the code, all the beauty of CSS/SCSS and just a few lines of HTML. I started digging on images and codes, I followed several developers on Codepen who created either simple and cute or complicated and detailed images. I was fascinated. Some days past and I found an article on Medium with the title “A Beginner’s Guide to Pure CSS Images”, written by the creator of Daily CSS Images challenge, named Michael Mangialardi. It was a tutorial on how to start creating CSS Images. I decided for my 44th day of #100DaysOfCode to give it a try. The result can be seen below. My pen’s description was:
Day: 44 of 100 I am planning on taking the challenge #dailycssimages. This is my first time trying to do a "koala" using only CSS. I followed this guide here I am sure I will learn so many new things with the challenge, I love cute little things and that's what I am planning to make. I have to admit I am awful at drawing by hand but I will challenge myself to get better with code and design.
After finished reading the article I was hooked. I subscribed to the 10-week challenge and the next day I received my first email. The theme was “Bear Cub”.
Honestly, my first image sucked.
Strange enough, although I didn’t like the result, I was happy with my creation!
The next day I changed my approach to designing images. I first made a simple sketch with pen and paper.
And then I tried to code it. Ok, once again the result wasn’t great, but it was better than the firsts’ day.
On the 3rd and 4th day I tried to add more details in my images and I google for some animal-inspiration.
I finally created these images:
On day 5, I designed a cute creature and people seemed to really like it.
This boosted my confidence and I was ready for the 2nd week. I won’t get into a lot of detail… but I learned a couple of new tools and I tried to apply my recent knowledge into the images.
The 3rd week must be on of my favorites for two reasons:
- The theme was FOOD!
- I started animating
Video-tutorial The hamburger until today has 1019 views on codepen
The 4th week started... with a detailed Frankenstein
… and ended with a monster! Well, I gave my monster a twist, and I decided to make it cute.
You can clearly witness how I got better at coding but not at drawing.
The 5th week was all about superheroes
As I like to be playful I combined three things:
Et voila the results:
On weeks 6 and 7 I designed icons and logos
This is how I found an apple app store icon on google images:
And this is how I recreated it:
As for the logos:
The elm logo was a bit tricky, so I took advantage of the Clippy tool:
And I ended up with this logo:
On my 40th day, I made a Nintendo 2DS
I got inspired by this image:
I quickly sketched a draw:
And after applying some CSS I had my own Nitendo 2DS:
The 9th week I felt really inspired
I created five different images based on the same color palette.
The three of them were minimalistic and quite abstract.
On day 44 I created a robot. First I google some images, when I found the one I liked most, I drew it, and then I code it.
On day 45, I decided to do something similar, a space inspired mascot-robot!
I finished the challenge with a delicious cake
Here are all my pure CSS images for the #dailyCssImages challengeThis pen has 2.523 views and that makes me extremely happy as I spent numerous hours searching and coding.
This challenge helped me in so many different ways:
- I got better at CSS/SCSS, I also learned about animations.
- I learned new tools about colors, shapes, and animations.
- I connected with people all around the world on Codepen, Twitter, and Youtube.
- I shared my knowledge on Codepen and Youtube and I hope I helped and inspired other developers.
- I learned to be more patient and focused on my image and my code rather than get distracted by little things.
- I got better at time management.
- I did NOT get better at drawing!
Thank you for taking the time to read my story. If you feel inspired please share it. It would be great if you could subscribe to my youtube channel as it helps me create more content.