When you say “re-writing” do you mean recoding it with your own code, or do you mean looking at the…
Carl Peterson

So, Here’s how I Learn by re-writing Other People’s Code

Let’s assume you wanted to “re-write” the medium clap that I worked on:

1. Copy and retype it word for word.

Okay, so here you aren’ t doing anything special.

You just copy what you see.

You may be quick to think this isn’t fruitful, but you’re wrong.

Instead of just looking through with your eyes, actually copying each line of code by hand helps you spot loopholes you’d have missed if you just “looked through” with your eyes.

Try it!

2. Try to recreate what you copied without looking at the code

Okay, this time things are different.

You aren’t trying to copy word for word. Instead, you try to recall what you copied — from memory.

You will miss a lot of things.

You wont get all of it right, but that is fine.

At this stage, feel free to take a second look at the code you’re copying from. You’ll learn even more this time.

This is the “active” learning stage.

You’re grinding through solving problems. You’ll learn even more here.

So, do I do these every single time?

Well, no I don’t.

If I have another project for which I can “actively” practice, I just do Step 1 above.

Step 2 is replaced with the project I have in mind.

This is what I did for the medium clap. I copied the Codrops icon animations line by line, then I moved on to “actively” practice with the Medium Clap.

And did I go back to check stuff from the copied code?

You bet I did!

Thanks for reaching out Carl Peterson 😃

This turned out longer than I had thought.

Cheers :)