I have never written a line of Python in my life. And yet, this week I built my first Python project. 🐍

Leanne R — Wed, 25 Mar 2026 11:01:22 +0000

I've kept a reading journal on GitHub for years 📚 (223 books and counting, here if anyone is interested, though I doubt it). Every time I finished a book, I was manually updating the file. Tedious, and I usually forgot to update the book count. So I asked Claude if we could automate it.

First we talked through what I actually wanted.
Then what language to use (Python, apparently 🐍).
Then whether I needed to install Python (yes ⬇️).
Then what a token was and whether it was safe 🔐.
Then why my terminal said python3 instead of python (totally normal, good to know).
Then why there was an extra blank line above the new entry 🧐.

Every step, I asked questions. I learned to do things I hadn't done before:

Add Python to my machine
Generate a fine-grained Github access token and use it in a script

Now I run one line in my terminal with my book entry, and the script:

Automatically numbers the entry
Adds it to the right year
Updates my total count
Opens the repo in my browser. Done. ✅

My first Python project works, and the whole thing took less than hour.

Moral of the story: If you've been putting something off because "that's not really my thing" … maybe give it a go. 💪📚

Learn CSS Animations in 5 Minutes

Leanne R — Mon, 13 Apr 2020 15:51:00 +0000

In this article, I'll give you a whistle-stop tour of CSS animations. While this won't be enough to learn the topic in depth, it will give you a solid overview of some of the most important aspects such as:

Transitions
Animations
Effects
Tips and tricks

If you want to learn more about CSS animations after reading this article, I recommend you check out the Learn CSS Animations course over at Scrimba, which delves deeper into the topics covered here and gives you a chance to put your new skills to the test with a series of challenges.

Now, though, let's get stuck into the basics!

Transitions

Click the image to access the course.

Transitions allow an element's properties to change smoothly and gradually instead of instantly chopping to something new. Creating transitions is a two-step process:

First, we add the hover effect using the :hover pseudo-class. For example, if we want our heading to change style when hovered, we add hover to the .heading selector:

.heading:hover {
    color: brown;
    font-size: 25px;
}

Next, we add the transition property to the base selector. The first part of the value is the property we want to transition. The second part is the time it should take to transition in seconds. Multiple properties can be targeted by separating them with a comma:

.heading {
    color: darkblue;
    font-size: 15px;
    transition: color 0.5s, font-size 1s;
}

It is also possible to customize transitions with delays and specific timing functions. Head over to Scrimba to find out more and practice your new skills with a CSS transitions challenge.

Animations

Click the image to access the course.

Animations allow you to change an element's appearance without interaction from the end user. Unlike transitions, they can have more than two stages, which makes them much more powerful.

We define an animation with the @keyframes rule. For a two-step animation, we use the from and to keywords:

@keyframes grow {
    from {
        width: 50px;
        height: 50px;
        background: red;
    }
    to {
        width: 50px;
        height: 100px;
        background: green;
    }
}

For animations with three or more steps, we use percentages to specify at which stage of the animation we want the element to change:

@keyframes grow {
    0% {
        width: 50px;
        height: 50px;
        background: red;
    }
    50% {
        width: 100px;
        height: 50px;
        background: blue;
    }
    100% {
        width: 100px;
        height: 100px;
        background: green;
    }
}

Note: To ensure a smooth animation and be certain that no steps are missing, all the changing properties should be included throughout each step.

Now we have set up the animation, it's time to run it by adding the animation-name and animation-duration properties to the base selector of the element we want to animate:

.box {
    animation-name: first-animation;
    animation-duration: 1s;
}

Animations can also be customized with other optional properties such as animation-delay, animation-iteration-count, animation-timing-function, animation-direction and animation-fill-mode. Head on over to the course to find out more about these and the animation shorthand property, which is a handy, code-shortening tip!

Effects

Click the image to access the course.

This section looks at some of the effects and CSS tricks we can use to enhance our animations.

Scale: This effect changes the size of an element along the x-axis, the y-axis, or both:

@keyframes transform {
    100% {
        transform: scaleX(2) scaleY(0.5);
    }
}

Note: The shorthand for the above is:

@keyframes transform {
    100% {
        transform: scale(2, 0.5);
    }
}

Translation: With this effect, we can move our element from one place to another across the x-axis, the y-axis or both:

@keyframes transform {
    100% {
        transform: translate(10px, 50px);
    }
}

Rotation: This effect allows us to turn an element by a specified number of degrees:

@keyframes transform {
    100% {
        transform: rotate(90deg);
    }
}

Skew: The skew effect is similar to rotate, but rather than moving an element clockwise or anticlockwise, it moves it sideways, up or down:

@keyframes transform {
    100% {
        transform: skew(0deg, 50deg);
    }
}

To use these effects, we add them to an animation as above and then add the animation to our element's base selector in the normal way:

.box {
    animation-name: transform;
    animation-duration: 2s;
}

Tips and Tricks

This section looks at some handy tips and tricks for using CSS animations:

- Prefixes: Some old browsers require a prefix to use these effects successfully:

animation: size-down ease-out 0.5s infinite alternate both;
-webkit-animation: size-down ease-out 0.5s infinite alternate both;
-ms-animation: size-down ease-out 0.5s infinite alternate both;
-moz-animation: size-down ease-out 0.5s infinite alternate both;
-o-animation: size-down ease-out 0.5s infinite alternate both;

To ensure maximum browser compatibility, you may also need to use a fallback property.

- CSS Variables: These are a way of storing values in a placeholder which can then be used multiple times throughout the stylesheet, making it easier to use and update. Variables are defined like this:

:root {
    --box-unit: 50px;
}

And used like this:

.box {
    width: var(--box-unit);
    height: var(--box-unit);
}

- Custom Timing Functions: Cubic Bezier functions allow us to add further customization to the timing of our transitions and animations by specifying the speed of the animation at different points during its progression. This can be visualized in the graphs at this link.

Cubic Bezier functions are defined as follows, where the first two values are the starting x and y-axis positions on the graph and the third and fourth values are the end position:

transition-timing-function: cubic-bezier(0.62, 0.15, 0.4, 0.9);

That's all for our five-minute tour of CSS animations. I hope you learned a lot and have been inspired to check out the full course over at Scrimba!

Happy coding :)

Forem: Leanne R

I have never written a line of Python in my life. And yet, this week I built my first Python project. 🐍

Learn CSS Animations in 5 Minutes

Transitions

Animations

Effects

Tips and Tricks