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