A UX Designer’s 100-Day Evolution to A Code Monkey

Tian Gan
5 min readFeb 22, 2020
tian gan’s coding set-up with a second monitor and 90’s hip-hop music
2Pac = best coding companion

When was the last time you learned a new skill?

Granted, you learn something new all the time — I’ve been freelancing as a printmaker and graphic designer for the past 5 years; logistics, bookkeeping and creating diversified sources of income have taught me countless lessons.

But when was the last time that you, with a purpose and a plan, took a certain number of hours every week, devoted them to learning something new, used what you learned in new projects, and reflected on what you learned?

diagram of the learning spiral by Tian Gan
Good old learning spiral

#100DaysOfCode

… is a challenge where you commit to coding for at least 1 hour every day for a total of 100 days, and tweet your progress daily with the #100DaysOfCode hashtag.

I chose this challenge after starting my 100 Days of UX Sketches for a very utilitarian reason:

I believe that coding is a basic life skill that will get me better jobs.

To be more specific, I’m studying to become a product designer, and learning the basics of programming will help me put my design to production, better communicate with programmers in my team, and give me a bigger toolbox.

How exactly I did it:

  • I coded for a total of 100 days over a period of 159 days (2019. 9. 10–2020. 2. 16);
  • I spent roughly 128 hours in total: 25 hours on HTML, 47 hours on CSS and 56 hours on Javascript.
  • My go-to learning resource is FreeCodeCamp. I also used Codecademy, Codewars, Skillshare and some Youtube tutorials.
  • I used ATimeLogger to track my time spent and Loop to track how often I coded.
The first website I made.

Pretty early on I realized that my schedule doesn’t allow one hour of coding every day — life and school work often got in the way, and I decided to do it at my own pace.

FreeCodeCamp served as the red thread for me throughout the challenge; I followed the program with some deviations:

  • I was intrigued by the Pure CSS Image tutorial by Michael Mangialardi, so day 10–12 I made this animated little drum with pure CSS. It’s still one of my favorite projects because of its simplicity and playfulness.
A pure CSS animation
I also made this Quattro Formaggi in p5.JS
The last thing I made was a portfolio site showcasing my coding projects.

A community built around a hashtag

I tweeted about my progress every day as the challenge instructed. In the beginning, I was surprised to see that strangers would like, retweet and comment on my tweets; when I got really frustrated on some days (a few tears might have been shed) and tweeted about it, people offered advice and cheered me on; when I asked for help I almost invariably got it.

The power of doing something with a lot of others is profound. It reminds me of being in a running race — people start at different times and run at different speeds, but I am always running with someone, and like geese flying in a formation, the reduction of resistance is felt by everyone.

I have got more than 1,000 likes on my #100DaysOfCode tweets, gained close to 200 followers, and started following a few dozen people myself, which doesn’t seem much, but among them are teachers and mentors I trust, role models I look up to, and companions at different places on their journeys. These people made the process more than just another challenge on the internet.

So, what have I learned?

1. One of the joys of programming is logic.

It definitely feels like learning magic or a superpower sometimes.

In the beginning, I wondered if a brain like mine that’s used to dealing with graphics and interfaces would appreciate or even understand programming and its logic. It turns out, however, that learning how things work is completely fascinating.

In programming, there is this wonderful sense of how problems have solutions and things make sense, which isn’t always the case in other fields.

2. Help is everywhere; the better I am at finding help, the better I get at coding.

A few days in I discovered W3Schools; gradually I switched to MDN for reading documentation because it’s usually more detailed and structured.

I asked questions on Twitter and dug deep in FreeCodeCamp forums, Codewars threads and of course, on Stack Overflow.

I learned to put console.log in different places to debug my code, and when I Googled or asked, I got better and better at describing my problem.

3. Put myself out there.

Like that old tennis ball analogy, the more you put in, the more you get out. During the process, I made the effort to make documentation a part of the process, to share resources, and to market myself (in spite of how irritatingly ambitious that sounds).

I am by no means an end product; I’m a former literature major, self-taught printmaker and designer, now studying to become a product designer while playing with code.

I have no idea what the future holds, but I know that sharing my process will make me feel proud when looking back at this trying process, and I’d also like to think it might encourage you if you are also thinking about changing the course of your life or just trying something new.

Tweet from my 100th day

🙌 Thanks for reading! This is my second Medium article; the one before is on my 100 Days of UX Sketches.

👩‍💻 Check out more of my coding projects on Codepen, and I’m on Twitter at @gantiann. My design work can be found in my portfolio.

🌼 Special, special thanks to Daniel Dennerkrans for being an awesome coding mentor and maker of vegan cinnamon buns, and to my resident coding monkey Emil for always being there.

--

--