Codepen Challenge: Halloween '25
Hey there! I'm learning (and trying my best) to be a better developer with each passing day through practice and writing. Pleasure to meet you!
Hey! I’m back with another challenge recap! This time it’s for October’s Halloween Challenge!
I was a little behind on this compared to the others, but no matter! I can always return to it later, which I did.
From what I gather, this seems to be an annual thing, which is pretty cool. Means there’s always something fun to look forward to every year!
Now, let’s get on with the challenge!
What are CodePen challenges?
If you’re not familiar with the CodePen challenge, each month CodePen hosts a challenge, with an overarching theme for that month. The theme is then broken down with a related challenge for each week. A new one starts on the first Monday of each month.
Every week, they provide a template to get you started(which you could either bounce off or start from scratch), as well as ideas and resources to get you going.
The next week’s challenge is posted on the following Monday.
Even if you missed a challenge when it first went live, you’re good. You can view the archive and still tag your projects if you wanna work on your own time.
Week 1: Halloween Time
The goal here was to make a halloween themed pen that has something to do with the concept of time. This could be a timer or clock, an hourglass, or a beat the clock game. Whatever it is, it has to be halloween and time related.
I went with a simple countdown timer. A looked at one resource to help me, but I don’t know if it was just me, but I got a little confused along the way because it didn’t seem to do what I wanted. Then I decided to look at a video that helped me get on track. I’ll link to it below.
Here is the pen:
https://codepen.io/juanita-washington/pen/YPwxXoE
This pen really helped me work on my JS skills.
Week 2: Halloween Masks
Nothing to see here!
Week 3: Halloween Tricks
The goal here was to make a pen that has some neat front-end trick in it. Here, I decided to keep things a bit simple and leave a "Happy Halloween!". The trick was that each individual letter had a ghost effect upon hover!
https://codepen.io/juanita-washington/pen/gbPKMwN
Week 4: Halloween Fun
Here we'd have to make a pen showcasing our favorite part of Halloween. For me, the first thing I thought of was of course candy! I created this pen using this js-confetti library that supports emojis!
At first I used every Halloween related emoji, but I decided to just stick to the candy-themed ones. Sometimes less is more!
https://codepen.io/juanita-washington/pen/zxrmKgm
The only thing is the animation plays once, and you'd have to refresh the page to see it again. But other than that, it's a success in my book!
Wrap-up
This month's projects were really fun to do, with each one teaching me something new along the way. I'd say I'm pleased with my contribution to the spirit (ha) of Halloween!
