Day 18 – 25 Finished the Portfolio Page, and started Javascript

I haven’t blogged last week, but I’ve tried to spend a few hours here and there — a bit more consistently, and today, I finally finished the 10hr “Basic Javascript” session, and started “object-oriented programming”.

I’ve definitely been tempted by social media more than once – after all it’s only a new tab away. But last night (a sunday night), I’ve also resisted the temptation and coded for more than 2 hrs.

I was literally lost in problem-solving. I wanted to figure out the solution by myself so bad, I kept googling, staring at my codes, drawing out the logic …

It reminded me of my love for maths when I was in middle school. Just the pure joy of problem-solving.

Googling the answer might have been more efficient, but then that would’ve ruined the fun.

And after making more mistakes than I could have, I understood the right solution so much better.

Having a goal also helps – I want to finish “Basic Algorithm Scripting” by the end of May!

Day 17 – Devil is in the details & Page 3 of Personal Portfolio Page

Today I built page 3 of my portfolio page.

I encountered so many roadblocks, and many of them in the tiniest things. How come I can’t change the color of the h4 tag? (turns out text-color vs color makes a difference) How do I get rid of the underline of the a tag? How come I can’t put the h tag in the next column?

The last question took me the longest time, I made sure I used the grid system, and some texts was supposed to be the second column … ah … ! That drove me crazy, and I was scratching all over my head trying to figure it out.

Turned out, instead of class=”col-md-6″, i put something like class-“col-md-6”. Of course it won’t work!

Again the devil is in the details. Coding really taught me how to be exact on the small things.

Anyway, couldn’t believe I spent 2 hrs on a friday night coding. Now I think I finally earned me some legitimate youtube video hours!!

Screen Shot 2017-04-28 at 10.58.46 PM

Day 16 Built page two of Personal Portfolio Page – FCC

Today I built page two of my portfolio page! I was able to concentrate more, and get distracted less. At one point, I got so sleepy at 10pm that I just wanted to take a long nap.

But I reminded myself: if it’s not hard, anyone can do it. Train your relentlessness muscle, Joy. Then I got up.

And as I predicted, it only took me 5 min to get back on track again. Because as had happened before, once I got started, I simply couldn’t stop — I just had this strong desire to make things beautiful. And that led me to google, experiment, adjust … I was in the moment.

Screen Shot 2017-04-27 at 11.45.19 PM


Day 14-15 Built Page One of Personal Portfolio Page – FreeCodeCamp

Today is Day 15. I spent day 14 watching youtube videos and felt really empowered to build my own page. But day 15 didn’t happen until almost a week later, and it was always so hard to regain momentum after that long of a break.

I procrastinated. Watched some youtube videos. Read some facebook articles. Baked some yummy kale chips. Even took a 30 min nap at 10pm … ahaha.

But then I started coding again … ! So many questions one after another. How do I keep this background image appear?? Please, can you stay there, just not move while I move the h1 tag? Wait, seriously, just don’t move, I’m adding margin to the block element, not you, background image!

After a lot of googling and creative problem-solving, I somehow made it work! I felt soooo in love with the process in the end, because now my mind was all about making the site pretty, and I loooove making things look pretty! It just felt great having the freedom to assign whatever color, margin, width I want to any element of the website.

So here it is, page one of my portfolio website. It’s far from perfect, but I’m really content for now!

Screen Shot 2017-04-27 at 12.09.24 AM

Day 12-13* Finished the “Build a Tribute Page” Challenge

So time has elapsed quickly … the last post was written back in Nov 2016!

What happened between “Day 11” and “Day 12”? Lots of confusion, doubts and fear.

Confusion of how to apply what I’ve learned to the real challenge of building a page.

Doubts of whether I’ve mastered what I’ve learned on FCC.

Fear of not being able to finish the challenge. Fear of giving up.

When I kept hitting roadblocks of not being able to figure out how to center an element correctly, when I had questions about the grid systems etc., I finally let myself relax into the comfortable zone of procrastination, and let myself sit on the challenge for too long that I lost momentum to continue.

But then I somehow magically regained this momentum one random April day in 2017 (it’s an awfully long time to recover from a defeat, I know). I somehow stumbled upon a self-help book that talked about how a lot of times it’s our belief that we can’t achieve something‘, instead of our actual capabilities, that prevents us from achieving those things that matter in our lives. I realized resetting my mindset is key to continuing my coding quest. So I decided to pick everything up again.

I asked myself, “what is the quickest way for me to restart coding, and finish the challenge?”

The answer turn out to be incredibly easy – youtube it. See how other people are doing it, then learn, copy, and modify.

And that’s exactly what I did. Watching how other people accomplish the challenge helped tremendously. It answered lots of questions, and the challenge suddenly seemed doable again.

I also came across a discussion about the key to learning to code, and one comment mentioned “don’t ever try to be perfect. it won’t get you anywhere at the beginning stage of coding. Just google, make things done, and let a lot of the pending questions to be solved eventually by time.”

I realized my high expectation of doing everything right at the beginning was exactly what impeded me from taking quick actions. So I readjusted my expectation, and decided to accept the fact that as a beginner, I’m supposed to have imperfect codes, imperfect solutions, as well as tons of questions.

But that’s ok. What matters more is to keep the momentum going, and to get things done.

And that’s exactly what I did. I compared the solutions from three different people/youtubers, compared and combined their approaches , and coded my own way into finishing the first FCC challenge.

So here it is, my answer to the first FCC Challenge.

Screen Shot 2017-04-15 at 5.49.11 PM

Day 9-11: I built a basic tribute page.

Turns out it’s not easy at all — I already forgot a lot of the codes I have learned, and having the webpage showcase what I had in my mind turned out to be rather difficult. I wish I could just sketch something on a piece of paper, and having an app translate all the HTML codes for me … (wait, maybe there IS an app about this already??)

The FCC page wasn’t designed in enough of a user-friendly way for a newbie to go back and forth across sections searching for what he/she needed. Even things like centering a text, selecting a certain font, adding a “well”, embedding a link took me a loooooong time. But in the end the course materials, and a lot of googling worked.

So here it is, a basic tribute page I built for the basic front-end development project #1.


As you can see, this is far from perfect, and I have a lot more work to do (for example, I’d really love to change some of the fonts and font sizes, as well as freely adjust the margins of the list elements to be the same as those of the picture). But I’ll stop by now, and more to learn in the coming days.

Day 7&8 – Now the challenge REALLY begins

It’s been a while since my last post … more than a week ago? I feel like those past days quickly lapsed into a vacuum of inaction. Maybe what isn’t documented isn’t really lived. Wow, that’s pretty scary.

On a positive note, I dragged myself back on track on a weekday morning, and finished jQuery, which helped add a whole new level of dynamics and structure to my codes. The weird thing is, all the codes are organized in such a beautiful hierarchy that, I realize the more time I spend writing and reading them, the more it changes the way I think and look at things. For example, now when I read books, I feel like I’m reading codes, just in the language of “english”, and all I see is structures, which actually helps me to read and understand faster.

Coding is reshaping my brain, in a scary but exciting way.

And now is Friday evening, my slow and often jolty Amtrak train already passed New York’s Penn Station and is on way to New Haven. Having being sedentary on the train for so long made me a bit nauseous, but I semi-reluctantly opened my laptop anyway, and started the next section of FCC — the basic front-end development project, which is supposed to take 50 hrs in total. The project consists of two tasks, and the first one is to build a tribute page that looks like this —


I immediately felt overwhelmed at the task and doubted I remembered anything that I have followed along and learned in the past few weeks. Maybe I was learning fast only because there were many hints and examples in the lessons. Maybe I didn’t spend enough time to review, and actually retain all the new knowledge. Maybe I didn’t know how to code after all. 

Endless doubts aside, I told myself that the best way to learn was by doing, and that I would learn so much more after I fail, learn, fail better, and end up building this tribute page by myself.

However long it might take.


Day 6 – Finished Bootstrap

Saturday afternoon, a cup of soy latte, dozens of dried berries, a few Facebook distractions later, I finished the 5-hr Bootstrap session! I realized i’ve spent way less than 5-hr, probably 3-hrs to finish this section.

I also scrolled the FCC forum and saw posts by folks who said they got their first coding job even before they finished the certification in front-end development. That’s truly inspiring.

I can’t help but imagining myself becoming a “maker” through coding one day.

Now time to hit some golf balls on this lovely fall afternoon!

Day 5 – Starting Bootstrap

Today I started the second 5-hr session on Bootstrap. Bootstrap is a CSS framework that allows you to build responsive design so that your website can fit the screen of any mobile devices.

Pretty cool, right?

As usual it’s not too hard to get a hang of the basics in the first few sessions … I spent about 30 minutes until I reached the mini-session about “ditching CSS” all together. But I like JUST learnt it … I was so proud of my CSS baby, and now I have to let it go?

Fine fine … if Bootstrap is smarter.

I guess I’ll spend more time with it tomorrow then. It’s Friday night, time to go home now!

Day 4 – I finished the HTML/CSS lesson!

It’s another looooong day at work but we finally finished our report. When I got home bleary-eyed, I felt soooo tempted to just crash and watch tv shows ALL night.

Which I did. for the first half the night.

Then I started coding again, and half an hour later, I realized I’ve finished the entire 5-hr lesson on HTML/CSS since I started! Wow, every small step feels so doable, and looking back I feel like I’ve just completed an amazing 5k race!


While I progressed, I was worried that I would forget things I learned from days before. Turned out FreeCodeCamp did a wonderful job refreshing your memories on previous codes while teaching you new things. I’m absolutely in love with it! More interestingly, as I started coding, I thought I would be tired quickly, having worked intensely all day. However, I discovered that I felt more relaxed and refreshed as I was dissecting, analyzing and remembering my codes. Much more so compared with how I felt after an hour of TV shows. Is it crazy to think that an hour of coding might cause more relaxation than an hour of Netflix?

Maybe learning challenges are to our brains like what exercises are to our bodies. The more we work them, the more refreshed and rejuvenated they will feel!