For the first time, I just sat down and coded. And it was glorious.

Up until yesterday, for the past few weeks, I’ve been struggling with finding motivation, because of this one dang freeCodeCamp project. For those of you that don’t want to click the link for your own reasons, it’s essentially a portfolio page project.

Going into it, I was like “Yeah, this won’t be so bad. I won’t have to spend too long on it.” I got all of my libraries ready, including Bootstrap, Animate (which I ended up not using), and jQuery. I was prepared to begin coding. I started with the navbar, which wasn’t too hard to do considering how Bootstrap makes it easy to make a navbar. Shortly after I made the navbar, that’s when all heck broke loose.

I wanted to upload a picture of me to my profile page. It wasn’t a requirement, but I thought that it was a good idea, so I did it. This was the picture I wanted to use:

A picture that my friend took of me for a class in the first semester of my freshman year.

I wanted the picture to be a circle, so I did the piece of code that I was supposed to do.

img { border-radius: 50%; }

The image turned out to be an oval. Uh oh, I thought to myself. That’s not what I wanted. After doing a little bit of tinkering to try and make the image a circle without messing up the aspect ratio of the picture, I couldn’t find a solution. No big deal, I thought. I mean, I could just come back to it. So I decided to work on a short, one-sentence description of myself.

I did that, and then I tried to format the picture and the description so that the image was on the left and the description was on the right. That worked pretty well. The only problem with it was, however, was that the image and the description was too close to the navbar.

img { padding-top: 40%; }

The centered the text to the middle of the photo (for a reason that I can’t explain). But after I did that, I was bothered by how the photo looked again. It wasn’t a cricle like I wanted it to be, and it just overall clashed with the image I had in my mind.

That was the first version of the project. It was complete crap. But, there was an upside to it. You see, sometime in the middle of my writing, I was looking at the example project that freeCodeCamp gives you. When I chose the editor view, I noticed that next to the HTML, it said “Pug” in a really tiny font. Then, I noticed that the HTML was written in a different way. So, I searched “Pug HTML” and learned about it. Pug was an HTML preprocessor. I was going to use it, but then I realized that I didn’t like how it looked.

The telltale code

So, I did some more searching, and came accross an HTML and CSS reference site that talked about preprocessors (click me!). It was from this page that I learned about the HTML love of my life, HAML. It made HTML so simple, and the syntax looked heavenly. I converted all of my code to HAML.

Have I ever told you how beautiful your syntax is, my love?

But, it was on that same page that I discovered something I didn’t like. CSS preprocessors. I tried SASS, and it did not bode well with me. To be honest, I know it was supposed to make CSS somewhat easier, but it felt like it just became more difficult. So, I quickly scrapped it and moved back to normal, boring old CSS.

Now, for a couple of weeks, I’ve just been looking at the project saying “Today is going to be the day that I fix this!”, and then not doing anything about it. I lacked the motivation to. Then, I saw an email from the freeCodeCamp forums in my inbox. It was a summary of the most popular posts in the forum. I scrolled through, and found that someone had trouble finding motivation as well!

I’m going through the same thing, my dude.

Then, I read the top-voted post beneath it. All of a sudden, I was filled with the motivation to finish the dang project that had been causing me all of this trouble! It was like God slapped me in the face with motivation and inspiration. I knew what I had to do to finish. The first version was so bad that there was no recovering it. So I did what had to be done.

I started from scratch. The only thing that survived was the navbar (because I wasn’t doing that again).

So, while my parents and little brother were absent from the house, I got to work. I erased all of my bad code, and began writing some new code. I sat there on my bed, with my laptop on my lap, my back against my backpillow, just typing and searching for solutions. After around 30 to 40 minutes of work, my masterpiece (citation needed) was finished.

The image that CodePen generates is inaccurate. But it looks similar to this.

I was so proud of myself. I finally conquered the beast named “Lack of Motivation”. I learned a few things that day. The one that stuck out to me the most is that sometimes, a project will be so bad, there’s no saving it. There’s nothing wrong with starting from scratch.

Visit my portfolio page here.

Thank you for reading my first ever article on Medium. I’m currently training for a half-marathon for Team World Vision to raise money to get clean water for kids in Africa. Every $50 (50 USD) gets enough clean water for 1 kid in Africa. Donations are very essential in helping me achieve my goal of $1,310 (1,310 USD). If you would like to make a donation, please click here. Thank you.