My Coding Journey: Week 3 — Time to Make a Pudding

Leanne Rybintsev
Sep 2, 2018 · 2 min read
He ain’t messin’.

Last week, I learnt (the hard way), the importance of relative size properties in CSS and finally managed to resize my animated bunny without separating it from its nose in the process.

As cute as my new bigger (or smaller!) bunny was, I couldn’t deny that the deconstructed version was vaguely amusing, at least once I’d found a way to resolve it, should I want to.

This got me thinking, could a disbanding bunny head be of some use to anyone? Probably not, but to quote a 100-year-old man I once saw in a Youtube video, “If a cake fails, it’s time to make a pudding.” With this in mind, I set about seeing whether the deconstructed bunny head could indeed be made into some kind of figurative pudding.

The results were…interesting, and tend to flicker, so if you’re sensitive to that, please don’t hit ‘Run Pen’.

It comes to something when you are slightly scared off your own creation (is this how Mary Shelley came up with Frankenstein’s monster? God, I hope not.) To be honest, I turned the rabbit’s head pink by accident (I just picked a random colour to see whether the animation was working. Turns out, it was, with horrifying results.)

As far exploding fluffy creatures go, this went reasonably well. The biggest issue so far has been that the “I told you so” message is visible before the head has exploded in certain viewport sizes. Presumably the solution to this is to set the size of the <p> tag as relative to that of the bunny head but sadly I cannot, for the life of me, get this to work. The <p> tag just disappears permanently behind the bunny head. (Code available on my Codepen, should you wish to look at it.)

So this week’s tasks will consist mainly of ensuring that the menacing messages from a cartoon rabbit appear only at the appropriate moments.

There’s never a dull moment with coding…

Leanne Rybintsev

Written by

English. Irish. Travel. Coffee. Code. (she/her)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade