How I transitioned to front-end developer in 6 months
I was a writer and editor of travel guide book. Without CS background it took about six months for me to become a front-end developer. One of the most important thing you have to figure out before you start is why you want to do this. No one can answer this for you, I can only give you some advices.
Before the journey
Let’s check out my story. The first thing to do is planning. You need a schedule and follow it without excuses. And here comes another big question, should I quit my current job to learn it full time or just learn it in my free time? First i chose the latter option. In the first month, I learn after work and on weekends. Then I found out this is an inefficient method. First of all, it’s exhausting and I don’t feel I can learn well under this condition. Second, learning a new skill requires lots of practice, and I don’t have enough time since i work 8 hours a day. Soon after I realized that I quit my job. And started learning full time.
Let’s take a roughly look at what skills are needed. Ok if you want to quit , now is the time. I had this thought for a moment when i saw front-end skill tree like above. I know, it was freaking me out. If you made up your mind like i did, congrats. This is a big step. Let’s do this!
Resourses and tools
The first tool I used was W3Schools, there are a lot of people see it as dictionary. It’s quite true but it’s easy and clear, especially for a beginner. And as a Chinese native speaker its Chinese version is an additional attraction. Anyway just make sure you read every lesson carefully and do all exercises.
Then I go to FreeCodeCamp, this is the site most people recommended to me. And it’s truly awesome. You read the guide and follow instructions to finish every challenge. It’s interactively and interesting. If you are stuck, there are hints available to check. If still can’t figure it out, just go check their forum, you can find most problems and solutions there. If still not , then just ask, you will get your answer really soon.
About getting help, there are several awesome communities you gotta know and you probably already heard them before. First one is Stack Overflow, it is the largest online community for developers to share and learn. You can also check careers info here (I know it’s too early to worry about that). I checked on its public Q&A every time I have problems. It’s amazing that you can literally find all kind of problems and solutions here.
To Chinese native speaker i want recommend 知乎(Zhihu). This is like Chinese version of Quora. There are lots of excellent developers in this community.
- Medium
Another site is Medium. Where you exactly at right now. It’s a blogging platform. People share knowledge, experiences, and stories here. I forced myself read several articles on it everyday. Sometimes learn some new stuffs, sometimes looking for useful tips and sometimes just looking for solutions of problems I stuck with. I like its UI, it’s clear, simple and comfortable to read. And that’s also the reason I chose this platform to share. It’s a good habit that always be eager and open mind for new things as a developer.
Another site I want to recommend is MDN web doc. You can find literally everything about web front-end on it. Such as HTML tags, CSS properties or Javascript methods. They got definition, description and examples under every page. It’s more detailed than W3school. I always check for definitions here when I feel confuse about something.
The last site I want to mention is Youtube. You can’t be more familiar with it. Watching how people write codes sometimes is more helpful than reading guide. It’s better to watch those videos with video maker talking in the way you can understand and source code attached. Would be much more easier to understand.
Learn by doing
If you finished HTML and CSS lessons on W3School and FreeCodeCamp, congrats, You have basic knowledge now. You are able to build a simple and static website now. Just open your IDE and write codes. It’s totally fine to make mistakes, actually it’s necessary to make mistakes. Learn by doing is always the correct way.
Make sure you can build a simple website before you start learning Javascript. Because it’s going to be easier for you to learn. You got to know where the requirements come from by understanding what you can do without Javascript. Now you are about to learn an actual programming language. Still I read its descriptions on W3School then do exercises on it and finish challenges on FreeCodeCamp.
I tried to write some small applications but I have no idea what to write. So I googled and found several kinds of application and function which are popular for beginners to build. Such as counter, photo slide show, temperature converter etc. Just choose one and start coding. Every time i get stuck I checked on communities and sites I mentioned above. Remember the feeling when you fix a problem which bother you whole day or when you finally built up an appilcation. That’s where motivations come from.
Now you can write some simple applications applying Javascript you just learned. Here comes another awesome community: Codepen. You can open up small projects easily and write whatever you want. The best part is there are so many open sources small applications you can check on Codepen. Some of them are really cool and fun to check. Just decide what you want to build then check is there already someone made similar applications. And don’t be afraid or shy to copy others. Learning is based on copying, no matter which domain you at. Just make sure you understand those codes before you write. And the other reason I like Codepen is they already set up the development environment for you, the only thing you have to do is coding, awesome, right?
Frameworks
Recently there are three most popular frameworks: React, Vue and Angular. I would suggest just learn one framework before you get a job. I got plenty reasons, but the most important one is there are only few positions require you to know more than one frameworks including agencies. How to choose which framework to learn. It’s quite easy, just go check their description and sample, if you are going to be a front-end developer, you got to deal with it all the time, so you got to choose the one you like, at least don’t hate it, right? I chose React and my reason is I love JSX.
I started learning React on its official site. They have course for beginners, just followed it step by step. And I built up my first React app using create react app. It’s friendly for beginner because it has a development environment already set up for you.
Let’s talk about development environment for a while. You can save a lot of time using frameworks and libraries but there are tools such as npm, Webpack, Babel which you must to learn. Those tools help us setting up the environment so that we can focus on writing code. Just check docs on their official site. These tools are popular not only because they are useful but also easy to learn.
After a week learning React myself, I felt I need help. Of course it’s better to figure things out by yourself. But when you need help just go get it. Our goal is to learn new skills and tools. Soon after this feeling camp up my mind I started looking for online course which is suitable for me. There are so many online courses out there, don’t make your choice based on price. Go check contents of course and reviews. To me the most important thing is I want someone who can answer my question online immediately.
To Chinese native speaker, I can recommend you my choice: Progress Bar. Their React course started from ES6 and including guide of npm, Webpack, Babel and CSS libraries. I think these are what exactly a beginner needs. One more thing their teacher talks clearly, easy to understand. This is really important and no need to explain.
I finished the whole course in about one month. The ideas of state and props are core of React. And they are easy to understand. The big issue is lifecycle, there are several methods that created to manage the lifecycle of components. It’s not difficult to understand but you gotta know why and when you need to use them. Redux is the same. Once you encounter situations which they are created to deal with, you will understand. I was confused when learning but just followed the class. So don’t worry if you are confused, just write codes and you will soon figure it out.
Selling yourself
After finished React course, I started to do my own side project. My goal is to build up a website as my portfolio and put several small applications on it. It is much more persuadable to convince people that I can code than just say it on resume. And to me it’s also a good way to practice coding. Now here we have several new things to learn. Where I am going to store my code and how should I manage my project? The answers are Git and GitHub. You probably already know it or learned it in the beginning because this is what every developers need to know.
Until then I still got one more step to go: find a job. I was confused that am I qualified to be a developer? Only thing I have no doubt is sitting and wondering aren’t going to help. That’s the reason I just sent out my resume without hesitating. After few days waiting, I finally got first response and opportunity to interview as a front-end developer. Although I was questioning myself but I wasn’t nervous. Because in the beginning I just sent my resume to positions which I was not interested in. So that I can take some interviews as practicing.
If you have no confidence in yourself like me, just pick some random positions and go for it, take it as practicing. In the end there’s nothing you can lose, right? Actually you might get a lot of feedback. Like you will know this domain better by talking with senior developers, you will know job content more by talking with managers. So don’t be shy.
I started to apply positions that attract me after finished several interviews and got some offers. Yap, I got several offers. To be honest these offers were not attracting at all. Sounds like I would have no problem to turn them down but it’s actually not easy. As a self-learned developer without CS background and practical experience I had no confidence at all. So every offer was like oasis in the desert to me. I had to convince myself keep looking for a better one and of course the right one.
Finally i got two offers which i am satisfied. Both offers located just 10 minutes away from my home by car. The first one is an agency and the second one is a large company with their own products. The reason i wanted to join the agency is because i was pretty sure i can learn more things there. The manager told me that i can learn back-end languages or new stuffs with their support. And in a large company they usually define and separate roles cleanly. It’s the right thing to do but i might have less opportunity learning new things there.
After few days struggling, i made my decision. I joined the agency. Now I have started my career as a front-end developer for more than 3 months. Still learning every day. So that’s how i made it. If you are interested in becoming a front-end developer, don’t be afraid. Just give it a try cause you have nothing to lose. If you need help, i am here always willing to help. Cheers!
