I wanted to share a fun project that I recently finished using only HTML and CSS.
I was scrolling thru Twitter last week when I saw the following tweet:
— Mary Katherine “but everyone calls me mk” McKenzie (@MaryKMcKenzie) November 15, 2017
Since I have spent most of my time to this point working on HTML and CSS, the tweet immediately caught my eye.
Finding a project that uses HTML and CSS was exactly what I was looking for so I clicked the link to learn more.
The Holiday Tree Project
The project involves creating a Holiday Tree using only HTML and CSS.
I have seen people use CSS to create interesting shapes but it isn’t something that I have tried myself so I was anxious to learn something new. As an added bonus, the author is contributing to the Nature Conservancy for every three virtual trees created.
A chance to use and grow my HTML and CSS skills and help a good cause? Sign me up!
The original article includes a link to a great tutorial on how to create the basic tree using CodePen. The post is very detailed and not only includes the code needed to make the tree but it also explains how each section of code works.
In a matter of minutes, you will have your basic tree finished. Now it is time to get creative.
Trimming the Tree
When I starting working on the project I had a vision for how my tree would look. I wanted it to have garland, lights, a star, and a snow effect.
Based on the examples, I felt everything was doable except for the snow. I wasn’t sure if that was something that could be done using only HTML and CSS.
Between CodePen and Google searches, I was able to find some examples of garland and lights. I took those ideas and tweaked them a bit to make something unique to my tree.
The star idea turned out to be more difficult. I found a few different ways to create the star shape, but none of them really satisfied me. There was always some type of interaction with the initials banner that I didn’t like.
My next idea was to put my initials on the star, but this proved difficult as well. Since the star is actually made up of multiple triangles, I couldn’t figure out how to display the text on top of the triangles.
I knew I could create an image for the star and display the text over the top, but I didn’t feel like that was in keeping with the HTML and CSS only theme so I decided to discard the star idea altogether.
Instead, I decided to make my initials look like stars. I removed the banner background, added some spacing, and changed the color to gold.
For the next step, I did a Google search for “CSS Snowflake Animation”. There were quite a few results and most of them pointed back to this CSS code snippet by Nicky Christensen. I made a few minor changes, mainly reposting the images on my own domain so as not to use his bandwidth, and my tree was complete.
You can click here to see my Holiday Tree and the code behind it.
The last step involves adding your tree to the website. This part is optional and requires the use of Git and GitHub.
The author has included detailed instructions for this step as well, but as a Windows user, I found it best to use the GitHub Desktop app.
The Desktop app takes the place of using the command line and makes the whole process of forking the file, creating a new branch, adding your code, and submitting a Pull Request much easier. Even as a relatively new GitHub user, I found this process intuitive and self-explanatory using the app.
If you are looking for a fun project to spend a few hours on, I would definitely recommend using your HTML and CSS skills to create your own Holiday Tree.
The project is simple enough that even new programmers can give it a try but there is enough room for customization to make it challenging for experienced programmers as well.
If you do create your own tree be sure to add a link in the comment section so that I can check it out.