DEV Community

Johnny Fekete
Johnny Fekete

Posted on

CSS Christmas Calendar Submission

What I built

I built CSS Christmas Calendar as an experiment, in which I published a new CSS art every day in December until Christmas.

I created every artwork individually by using different CSS techniques, and all code is publicly available, so anyone can look behind the scenes and get inspired.

I wanted to keep the project challenging, so no JavaScript has been used in the whole calendar¹.

To make the project more educative, I create a series of articles here on about the highlights of what I learned during the creative process.

Category Submission:

Random Roulette

App Link


CSS Christmas Calendar screenshot

CSS Christmas Calendar screenshot

CSS Christmas Calendar screenshot


For every day of the Christmas period, I created a new CSS-art, related to the Holidays. They ranged from Christmas stockings to animated toy locomotive and rotating 3D Christmas tree.
Each item got inspired by winter and Christmas, and I used various techniques to bring them to life.

Link to Source Code

Permissive License

MIT License


I was always fascinated by CSS-art.

I saw many cool designs on Twitter, and even here on this platform; I also tried to create a few in the past - but never dug deep in the topic.

CSS was always a technology used to create pleasant UI's, maybe basic transition animations.

Then this December I realized that my CSS skills could use some polishing, so I set a challenge to myself to create a Christmassy artwork every day, using totally different styles and techniques.

This lead to CSS Christmas Calendar, in which I could learn a lot about CSS grids, 3D transformations, CSS variables and their scopes, custom gradient backgrounds, pug templating, and - of course - publishing to the Digital Ocean Apps platform.

I wanted to keep the project open and useful for others too, so made all code available, and I created this

How I built it

I was working on the project for a couple of hours every day during these 4 weeks.

I had to come up with an art idea every day, then identify its key parts and create the code.

I worked on the artworks in individual environments, and only added them to the calendar once they were polished there.

Finally, I committed my changes on Github, and then the magic happened: Digital Ocean's App platform detected my changes and automatically published it to the web, so just a few seconds later it was publicly available to everyone.

I was amazed by the simplicity of this deployment process, and the ease of configuration, so I will write an article in this series about how I set up the project in Digital Ocean.

Rotating 3D Christmas tree

¹ I had to use JavaScript on day 22 to play/pause a melody, but it was not used in any of the animations or graphics.

Top comments (0)