Published on | Prototyping: From UX to Front End — Medium Maret Eiland

This article was first published on developerlife.com.

Photo by Greg Rakozy

When I decided start on my journey to becoming a designer who can code, I didn’t expect it to be so hard. I am learning how to code not to become a developer, but to ensure that the vision I have when designing a product will come to life accurately. The only way to this is to get a deeper understanding of all the parts of building a software product, which includes development.

Learning how to code was fun, but building something myself at the end was incredibly difficult. I couldn’t do it by myself, and needed help. There’s a huge gap between learning the basics and being able to build “something”. Also JavaScript (JS) is a very flexible language with few rules compared to other languages like Java. Examples people post online look all quite different and that makes building harder.

I decided to approach learning one step at the time and this story is about how it went, what I learnt on the way and what was the outcome.

Before I continue sharing the experience, I want to tell you about my background, so you can have a better understanding why I chose the tools and methods I did and why they worked for me. Whether you are a designer or not, but new to world of coding, take my experience with a pinch of salt and use the pieces that serve you and create your own way to learn and to succeed.

I am a Product Designer starting with zero JS and any other programming language experience. I had strong intuition that being able to read and write code is and will be important, but I didn’t know how to make it happen.

It took me 7 weeks to learn how to read and write very basic JS code. That includes spending 4 hours a day, 5 days a week focusing on just learning JS. The overall length of time, from start (looking for resources), to finish (completing the sample exercises), was 10 weeks. This includes being pulled away from coding for 3 weeks due to unexpected circumstances (life happens).

Looking for resources

After doing some research trying to find of the best videos, courses and books online on JS, I chose a highly recommended book for beginners called Eloquent JavaScript by Marijn Haverbeke. That ended up being a painful mistake. The chapters were too long, examples to understand the content unusual and also information thought didn’t prepare me enough to complete the exercises at the end of each chapter.

After 2 weeks of struggling with Eloquent JS, I gave up and went to find other resources. I discovered a book called A Smarter Way to Learn JavaScript by Mark Myers and started again. This book made all the difference.

Learning JS became fun. It has super short chapters, about 3 pages, and at the end of each chapter there are 20 short exercises. I only studied chapters 1 to 42 (included), 69–75 (included) and classes from Mozilla Developer Network as guided by my mentor, Nazmul Idris. I found that completing 10 exercises was enough to practice. If you are already familiar with other languages, this book will be too slow for you.

Study tips: plan, time tracking, notes

I started off by creating a study plan, estimating how long it would take me to finish the book (I did this for both books). At the start of each day I planned which chapters I was going to learn. The goal was clear — understand content deeply.

In order to see how good I was with setting expectations, I tracked my time with Toggl. It helped me to take 10 min breaks after every 30 min deep learning sessions. If you want to learn more about deep work, check out this awesome video.

Whenever I took a break, I made sure I was resting fully and not on any device. I would take a nap, do Tai Chi or just close my eyes and be in quiet. Deep learning takes a lot of energy, so be sure to pace yourself.

While learning, I would take notes and add them into one long document. I recommend this for everyone. It did slow me down, but it had two benefits:

I would get more practice by writing out code snippets by hand.
When I built my own program, I was able to come back to the notes easily.

Outcome

Here’s the simple spreadsheet program I created with the help of Nazmul. I intended to create more examples, but decided to move on to learning React and React Native and focus on front-end styling. If you are learning JS, clone this repository from Github and change it, and play with it to practice.

Finishing thoughts

Learning to code changed me. It made me a better designer. It taught me how to think. It taught me how to have a beginners mind. I am now able to understand the world of developers better. I have a deeper understanding of how they build and how they think.

Learning JavaScript was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Learning JavaScript

Cool stuff, every week

More Articles