Coding One Step at a Time <No Shortcuts>

Confession- it took me 7 hours to try and change just 3-4 things in the code on my site. Something that could take 7 seconds to do in a template automated design. But was it worth it? Sure, doesn't the saying go, "it's not about the destination, it's about the journey," or some rubbish like that?

It was a fair and even battle, sometimes I broke the code sometimes it broke me:

There was even a pep talk I got last night from my Uber driver who overheard a phone call where I vented about how I was struggling with this task. His words were, "it will get better with time, don't worry it was also hard for me at first."

He was right, today after finally seeing my changes (minor yet functioning) reflected on my live site, I felt like on top of the world. I did not take the shortcut, I took the long road and even though I am exhausted, I feel I made some progress, mentally, emotionally and in my coding knowledge.

Check out my before and after baby steps:

01. Basic text is out, playful text is in

No one wants to be welcomed to a boring AF site.

Here is what the template had in place (notice the text in the first header and the one under):

So I went into the code:

And changed my text in the code:

Would you not agree this is much more entertaining?

02. Spice up that font

I did not like that basic betch font I had before so I gave that baby a make over. I mean look at it!

I went to my typography section and saw it was set to "Modern sans-serif:"

Modern sans-serif it's time for you to go. Let's say hello to "Consistent mono" (no not like the illness please!)

Here is the new look, love the retro vibe:

03. Teal is the new white

Going with the more retro font I wanted a vintage color to match. The default is white, color code "#fffff" which is so vanilla (am I right?!):

Then I made a trip over to https://coolors.co/ and found myself a sexy teal:

Grabbed that #CCF0EC

Slapped it into the code:

And ta da:

Teal looks good on you!

04. Logo needs to go go

After I uploaded my logo I did not like that it was all the way to the left:

In the code I saw it was telling the logo to stay in that corner!

So I thought "no no, logo it's time to go go." I then directed it to go from "Logo on the left" to "Logo on the middle"

And I was shocked to see it listened to me and actually moved:

Good logo, staaaay.

All in all, these changes might seem so minor and we take for granted how easy they are to change in template design builders like Wix or Squarespace. But in life there are no shortcuts. I came to learn and I did it the hard long long long way (after writing this post 8 hours..). I never felt more proud.