CSS Hoothoot 🦉
CSS Hoothoot 🦉

CSS Hoothoot 🦉

Tags
CSS
CodePen
Pokemon
HTML
Published
Published on November 14, 2020
Last winter, I was a tech mentor for Technovation, a non-profit that teaches girls to code and build apps. Being a mentor got me thinking a lot about motivation and learning, and how we can better adapt resources to a given audience.
So, One of the classic front-end projects used in workshops is a to-do list app. It can work with kids. Most of them will follow along, and enjoy what they’re building, especially if coding is new to them and they can experience the wowfactor of pushing pixels on the screen. That being said, you’ll still lose some of them along the way. Kids usually don’t make to-do lists for fun.
When my group was learning HTML and CSS, I ended up making some fun practice projects that they could put together without feeling constrained creatively. One of the projects was to make their favourite Pokémon using CSS! It made coding feel more like drawing or painting (which it kind of is), so it was a lot more engaging. If you look up Pikachu on Codepen, you’ll find a ton of variety. Some people are trying to be as close to the original as possible, while others made adorable works in their own style, like this floating Pikachu!
I’m a big proponent of creative coding, and I don’t think fun projects should be reserved only for kids. I personally find it a lot more engaging to learn in this way. Yes, I might have a goal to improve some of my technical skills, but why not have some fun while I’m at it?
I ended up making Hoothoot in CSS, because I like the cute and round Pokémon ☺️It was challenging getting all the positioning right, but I’m pretty happy with the results. The gears around it’s eyes can be rotated too, so I might also turn this into a clock at some point 😄