Why I Built Free Code Camp’s Front End Projects Twice.

And how I learned React along the way.

When I started at Free Code Camp I hardly had any idea what the ‘front end’ was, let alone how to build something like a Tic-Tac-Toe game in JavaScript that runs in a browser. Luckily, Free Code Camp’s Front End Curriculum starts you off with simple HTML and CSS challenges and walks you up incrementally so you’re writing recursive functions and designing basic algorithms before you know it. Pretty soon you just can’t wait to solve the next challenge to see that satisfying ‘submit challenge’ animation and the unique compliment that comes with it.

And then you reach the intermediate algorithm challenges… and then you reach the front-end projects. Things get hard pretty quickly. Working with APIs. Parsing JSON responses. Figuring out geolocation. Adding functionality with jQuery. Bootstrapping things. Designing a calculator and countdown timer. Then, finally, coding a Tic-Tac-Toe Game and Simon Game from scratch. Oh, and don’t forget the Tic-Tac-Toe Game should be unbeatable! Finishing these challenges is no small feat, especially for someone new to the world of coding.

At length, and after battling with many TypeErrors and struggling for days to solve some of the algorithm challenges, I managed to finish my Simon Game and claim my Front End Certification — a shiny certificate better than any ‘challenge compliment’ animation. Now I was a real developer!

Then I remembered the three remaining certifications ahead of me. Well, I had finished the Front End, how hard could the rest be? I proceeded confidently into the Data Visualization projects, which begin with React. Build a simple Markdown Previewer? “Sure”, I said to myself, “No problem!”

…

React wasn’t having any of that attitude, clearly. After much frustration, I had to admit to myself I was in over my head. I had no idea how to write React components, deal with state, bind ‘this’ — what is ‘this’ anyway? Gone were the days of just adding $ to everything.

It was here that I had to take a step back and reevaluate my learning process. I needed to really learn React. Incidentally, the Free Code Camp curriculum for React was currently still being developed at this point in time, so I was definitely on my own. And this brings me to the point of my story, a point I hope you will find useful.

I, someone brand new to the world of coding, needed to learn how to solve simple problems using a library I had no idea how to work with.

In other words:

I faced a problem and needed to learn something new in order to solve it.

If you are reading this you may be a software developer, in which case I am told it is a useful trait to be able to learn new things. Otherwise, you may be an aspiring software developer like myself, in which case you are striving daily to learn new things. Otherwise, you may be a human, in which case it’s probably also useful to be able to learn new things. If you are none of these then you may be some web-crawling bot, in which case hello!

Unfortunately when it comes to ‘learning’, I think our expectations are heavily influenced by the educational paradigms of our society. We grow up in a world in which ‘learning’ implies school and tests and degrees. School is a structured environment in which a teacher prescribes precisely what material we are presented with and what we ‘need’ to ‘know’. These ‘need-to-know’ items become all we care about as students. “But is it going to be on the test?”

Furthermore, the teacher is responsible for developing a curriculum and syllabus; the student really has very little say in what is learned, what order it is learned in, or how it is learned. If this wasn’t enough, in school we really only have access to the professors and classes at our particular school. What if we just have a bad teacher? Our options are limited.

Is this an effective learning process? Is this an effective learning environment? Is this the best we can do?

I think we can do much better.

What if the student asked the question “How can I optimize my learning process?”

That’s exactly the question I finally asked myself after staring at my JavaScript Console wondering where it found the nerve to suggest to me that this.setState wasn’t a function…

So I decided to learn React from the very basics and only return to attempt the Free Code Camp projects when I had a very clear idea how I would build them. That is, I decided to redesign my learning strategy based on the current circumstances I found myself in.

I started by scouring the Internet for all the resources and advice I could find concerning React. I found a lot. But anyone can Google ‘How do I learn React?’ What useful lesson am I trying to impart here?

To learn effectively you have to become very self-aware of your own learning process.

To improve your learning process you have to become very cognizant of what works for you, how you learn effectively, and how to locate the best resources for your learning style. Then, you can begin to optimize your learning approach based on these observations. You can quickly dismiss anything that is not working very well for you. You can choose to do more of what produces useful results. You can constantly re-evaluate your approach. Knowledge is so democratized in our world that more than ever before are individuals empowered to truly take education into their own hands.

For example, I knew that I benefited from watching video tutorials and coding alongside them. I knew that after learning something in a tutorial, I would understand it better when I had to go off and code it on my own. I knew that sometimes when I was stuck on a problem, it was better to just leave and go listen to a podcast (there are so many great coding podcasts) or watch another video on the subject, rather than persisting in a state of frustration.

I knew that I benefited from adding small pieces together one by one rather than trying to create something more complex initially. I knew I benefited from repetition. I knew I benefited from mixing multiple styles of learning: visual (video talks, lectures, tutorials), auditory (podcasts, audiobooks), textual (books, documentation), interactive (stackOverflow, Free Code Camp’s community, pair programming), and hands-on (actually coding).

I knew that by transitioning between these different styles I could deal more effectively with the moments when I felt my productivity or focus declining.

I knew that sometimes it was better for me to consider a problem from a distance. For instance, I spent plenty of time thinking about how I would implement Conway’s Game of Life in code before I ever sat down to actually do it. I knew I benefited from making projects my own, for instance I loved adding my own touch to tutorials I was working through or coding up little ideas I had, no matter how mundane.

These are just some of the observations I made as I considered how I could optimize my own learning process. This type of self-reflection led me to set a goal of coding 20 projects in React before returning to the Free Code Camp projects, and along the way I decided to include the front-end projects among these 20.

I thought if I could rebuild the front-end projects in React then surely I would be prepared to tackle the React challenges. Moreover, I thought this would also help me learn a lot about how I could improve my own coding solutions by returning and rebuilding projects I had previously completed. In addition, doing this would just give me more experience in designing on the front-end.

In fact, I took things a step further and recorded and summarized my experiences to share with others and, again, of course, to continue building my experience and improving my knowledge. Here is a page I created summarizing my experience learning React, and here is a page detailing just my Front End Projects.

I made all of these choices because in the forefront of my mind was a desire to make my learning process as efficient as possible. Because of these steps, I returned and completed the React projects with much more success than I otherwise would have been capable of.

I hope that whoever you are and whatever you are trying to learn, you take advantage of the fact that you have total freedom to design your self-education process.

Be self-reflective. Be self-critical. Be creative. Be nimble and quick to adapt. Study how you have learned in the past. Understand what worked and what didn’t and apply those lessons now. Experiment. Imagine. Try to make your learning process as efficient and enjoyable and uniquely you as possible.

Remember the palpable stress that invariably precedes an important exam in school? Not once did I feel anything remotely like that as I was learning React in this way.

I think we can do much better.