To flex my web development muscles, I’m trying to tackle these super fun CodePen challenges each week. If you haven’t heard of these, CodePen issues weekly coding challenges based on a monthly theme. They’re a great opportunity to be creative, learn new skills, and connect with the web developer community.

October’s theme was “Opposites”, and the final week’s challenge was called “Fast and Slow”:

For this final week of the Opposites challenge, movement and speed come into the picture! This week, we’re working with the opposites Fast and Slow…

I decided to build off CodePen’s suggestion to create “The Tortoise and the Hare”, and you can see the result below:

This was a fun challenge for a few reasons:

• I haven’t built shapes beyond a square without a guiding tutorial before, so I learned how to create a trapezoid for this challenge
• I haven’t used @keyframes outside of a tutorial before, so this was my first custom CSS animation.
• I had to do my own troubleshooting to figure out why my animations weren’t working initially; turns out, I needed to add position: absolute; to my critters’ divs.

For one of my first solo coding challenges, I’m pretty pleased with how it turned out. It’s a bit rough, but I’m hoping that polish will come with practice.