CSS Christmas Calendar Submission
Tags: dohackathon, css, html, design
Published: 2020-12-28 21:41:50

## 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 **dev.to** about the highlights of what I learned during the creative process.

### Category Submission: 
Random Roulette

### App Link
https://csschristmascalendar.com

### Screenshots
![CSS Christmas Calendar screenshot](https://dev-to-uploads.s3.amazonaws.com/i/91oqx7laq6x4ykhqm0hf.png)

![CSS Christmas Calendar screenshot](https://dev-to-uploads.s3.amazonaws.com/i/ld0w8l9o8gzfnofvzdas.png)

![CSS Christmas Calendar screenshot](https://dev-to-uploads.s3.amazonaws.com/i/tizbnebqi7wvb4q8s0oy.png)

### Description
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
https://github.com/johnnyfekete/CSSChristmasCalendar

### Permissive License
MIT License

## Background
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](https://dev-to-uploads.s3.amazonaws.com/i/0yt7k1qk1a8a6jzidb1y.gif)

---
¹ 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.