CSS & HTML Holiday Trees


Happy Holidays and Happy New Year everybody! I made this tutorial originally for the CodeNewbie DC December meet up, but was unfortunately too sick with a cold to give the tutorial live. Since I had some extra time over the holidays, I decided to spruce (no pun intended) up this holiday tree tutorial and post it to my blog for everyone to enjoy!

In this tutorial, you’ll learn how to make a holiday tree using shapes made only of HTML and CSS. We’ll be using CodePen to create the trees. You can stop there if you’d like to just keep it for yourself, or, if you’d like, you can pull down my repository from GitHub and add your tree to the forest.

For more of an incentive, I’ll be purchasing carbon offsets through the Nature Conservancy for every 3 trees planted on my site. Plant a virtual tree, plant a real tree!

This tutorial is based on a CSS Christmas Tree tutorial from CSS Viking. You can find the original here!

Continue reading