10 Steps to Becoming a JavaScript Developer

It’s the programmers’ market with companies from around the world in a state of constant search and recruitment. According to LinkedIn, there are over 2,000,000 JavaScript-related job offers worldwide now. Businesses try to attract devs not only with fat paychecks but also with creative atmospheres in which to work.

New tech companies design their offices to boost creativity with conducive layout and design. Relaxation rooms packed with games, consoles, dartboards, foosball tables, musical instruments, comfy furniture, and much more, are almost standard nowadays. Sounds good, doesn’t it?

Interested? So, let’s see what you need to do to become a part of this new era. We’ve prepared a brief step-by-step guide on how to become a JavaScript developer and join the programmer community.

Why become JavaScript developer?

Over the last few years, I have met hundreds of students. Most of them struggled to choose the programming language which would suit their ambitions and guarantee exciting job opportunities. No wonder. There are many paths a would-be programmer can choose. To pick one language and dedicate the time to master it is difficult. So why should you consider JavaScript as your weapon of choice? The simplest way is to answer the question: what is (and what isn’t) a JavaScript developer?

Is a JavaScript developer a front-end developer?

In most cases, yes, JavaScript is the front layer of almost every single modern website. What that means is that even all the most well-known websites, like Facebook, Google, Amazon, and YouTube need frontend JavaScript developers. JavaScript programmers can also work on the backend side - but that’s another story.

Frontend developers, besides writing JavaScript code, also focus on layout and styles; namely, Cascading Style Sheets, usually referred to as CSS. CSS is used to apply colors, manage the position of elements and arrange the space on a website.

JavaScript, however, is all about dynamics. For instance, respond to user clicks, fetch some data from the server, dynamically update the page. This is crucial when it comes to the User Experience (UX) and User Interface (UI). With JavaScript, your website is way more flexible and easy to use.

Now that you know a little about what JavaScript is for, let’s find out how to become a JavaScript developer! I have prepared a list of 10 easy steps for you to follow. Stick to them and you should be just fine.

Step 1: Learn the basics

The hardest step of all.

There will be many problems, such as:

• Where do I start?
• I don’t understand the resources.
• Where do I write code?

First, you need to set up your machine. Whether it’s Windows, Linux or Mac, get a programming IDE, or in newbie-speak, a “programmer’s text editor”, like Webstorm or Atom. Then try writing Hello World (1. below) in the selected IDE/editor.

Before I recommend any resources, let me give you a quick overview of the knowledge and skills that you need to learn first:

• How to write Hello World in JavaScript
• What is a variable
• Types of variables and how to create each of them
• What is a loop and how to iterate over arrays
• Document Object Model tree (DOM tree)
• How to write HTML. Learn about tags, especially: head, body, a, div and p.
• Selecting DOM nodes. Learn keywords like querySelect, querySelectAll and get used to them.
• Play with CSS. Create a first-class and assign the HTML tags. Bonus if you learn how to do this through JavaScript.

You can learn all that online or through a private on-site course. Which one to choose? I leave that decision to you.

Step 2: Work on your first homemade project

This is a crucial step. You need to get an idea of how to connect the bits. Every JavaScript programmer that came before you had to take this step.

You can create a very simple static website, such as:

• Calculator
• Currency converter
• Traffic lights simulator (with automatic switching)

Keep it to yourself. Try to make it look professional. Don’t hesitate to use Google.

Possibly, you will bump into projects like Bootstrap or jQuery. Bonus points if you decide to spend a few days learning how to use them.

At this point, stay away from frameworks like Angular, Vue, or React. You need to learn a few more things before you jump into that world.

You might be also interested in the article:

Tech

Javascript's For Loop Statements - a brief guide

Step 3: Take a course to solidify what you have learned

Most likely you should aim for a boot camp course for beginners.

If you’ve ever wanted to learn a second (or third) language, you had to go to classes. It’s the same for programming languages - including the career path of a JavaScript developer.

You may be surprised by the course price (up to 5k$+), but don’t be afraid, it will pay off quickly.

If you can’t afford an on-site course, try an online one. There are some that are 20 hours long for as little as $20. Check out udemy.com for possibilities.

Step 4: Explore best JavaScript practices

By this point, you should be fairly confident in creating simple websites. You should easily be able to create HTML, CSS and JS files, and seamlessly connect them.

When it comes to JavaScript, you should now brush up your knowledge. You most likely feel quite confident with loops and accessing the DOM. You have probably learned how to:

• Concatenate strings (The concat() method is used to join two or more strings)
• How to convert strings to integers
• How to inject information into the DOM tree (using document.createElement and then appendChild), possibly even the use of jQuery

You have also created quite a few functions. You can explain what a function parameter is and when the function is being invoked. You know that code is being executed sequentially.

This is a huge milestone. Congrats. Now let’s get down to business because you are on the last few steps before interviews.

• Focus on how your code looks. Format it just like you learned on the courses.
• Split your code into small parts. Don’t hesitate to create local variables and functions to make it clear what is going on in the code.
• Make sure you know how to distinguish odd/even elements in a loop, or how to color the 3rd node on a list.
• Explore Math.random() and other handy built-in functions prefixed with Array or Object.

You might be also interested in the article:

Tech

Introducing Data Visualization in D3 JavaScript library

Step 5: Learn ECMAScript 6

ECMAScript is a standard and JavaScript implements it.

ECMAScript introduces new concepts that you definitely need to learn:

• Arrow functions
• Promises and async/await enhancement
• Collections (maps, sets)

This is also a great time to focus on functions like:

• Map
• Reduce
• Filter

And to better understand the keyword which is a common troublemaker in the JS world.

Bonus points if you learn advanced topics, such as:

• Iterators
• Generators

Step 6: Learn your first framework

By now, you should know jQuery and its basic functionality. (Even if you skipped the bonus points!) However, it is just a library and to make things more complicated, it’s not being used - it was in the past. Now is the time to learn something that powers most newly-created websites.

The frameworks you might consider are:

1. Angular. Actively developed by Google developers. A great framework with all of the functionalities that a simple project needs. Very friendly to learn, with great documentation.
2. React. Technically not a framework, React is a library for handling views. Along with Redux, it’s on the rise. This is my personal choice and I recommend it to you if you are eager to learn more advanced topics and explore the future of web and native development. Used on facebook.com and actively developed by Facebook developers. Comes with great documentation as well.
3. Vue. A solution just in between React and Angular. Commonly described as very easy to learn and with the easiest learning curve. Adopts the best patterns from Angular and React. In my opinion, it falls short of React but you should try it for sure. It is being actively developed by the Alibaba group.

Remember, this is a long step. Take your time. Learn npm and yarn during the process and a couple of new libraries for your next project.

Step 7: Brush up your styling skills in CSS and learn HTML-5

Congratulations on getting this far! You should write your resume and try sending it to a few companies/agencies to get some feedback.

During this process, you’ll have discovered that besides JavaScript, you will be expected to understand CSS and know its basic principles. Namely:

• Selectors, including special characters like > and +
• Precedence of tags, classes and ids
• Flexbox and its rules

Bonus points if you learn:

• One of the CSS preprocessors, like SASS or LESS
• Some CSS patterns like BEM or SMACSS

Naturally, along with CSS you should become very comfortable with HTML and its extension HTML5:

• New tags: section, article, header, footer, nav
• Canvas
• Dataset and classList

Then you should gain at least a basic understanding of the following topics:

• Web sockets
• Storage, cache
• SVG

As you can see, the list is quite long. The good news is, most of it you can learn within a week.

Note: If you apply for a strictly UI/UX frontend job you should spend quite a few weeks on just CSS. This is probably not a job for a JavaScript developer.

Step 8: Prepare for interviews

Get ready for showtime. Review your notes and keywords from the world of JavaScript developers. To do this, there is one great course that I highly recommend: JavaScript: Understanding the Weird Parts.

Spend a few bucks (it should be priced between $10-20) to get the best understanding of the topics you’ve learnt. I’m not affiliated with the guy but I took this course myself and I guarantee you will like it.

The key concepts you need to practice are:

• Execution contexts
• “this” keyword
• Closures and callbacks
• IIFE
• Array functions: map, filter, reduce
• Creating new objects through the constructor function
• Digital prototype

Step 9: Tools and design patterns to become expert in JavaScript

If you got a job, great! If not, reiterate, practice, and focus on the key points from the feedback to get on your JavaScript career path!

From now on, I assume you’re already performing small tasks as a junior developer. That probably means you got to know npm fairly well. You should also have found your favorite editor/IDE. The ones I usually see are Atom or Intellij/Webstorm and I highly recommend you pick one of the two. Another good alternative is Visual Studio Code.

Now is the time to get equipped with Chrome and Firefox plugins. Check the documentation of the framework you use. Whether it is Angular, React, Vue, or some other, it probably comes with a great plugin for your Chrome Dev Tools. To add to that, consider Lighthouse and Dimensions.

Warning: Install plugins with caution. Some of them are used to spy on you or your employer.

Then focus on productivity to become an expert in JavaScript. Ctrl+c and Ctrl+v are not the only shortcuts you should know. In fact, I doubt you will need those two very often. However, there are quite a few others which will make your work a lot easier:

• Selection shortcuts, f.in. select whole line, cut whole line, select full length of closest word, etc.
• Open autocomplete box.
• Switch between the most recent files (similar to alt+tab on the system level).
• Navigate between the IDE windows, especially switching between editor and terminal.

After all that, you are ready to focus on the quality and reusability of your code. The fact that you have developed a solution to the problem does not mean it is done. Most likely the solution needs to be flexible and reusable too. It should adapt to different environments and support many edge cases.

Start exploring Design Patterns. Most of them are the same across multiple languages, and if you dare, you can read resources from C++ or Java too. The most common (and valuable) book I recommend is, Design Patterns: Elements of Reusable Object-Oriented Software by Gang of Four. At Boldare, we also like Clean Code by Robert C. Martin.

The most notable patterns you should explore first are:

1. Factory
2. Singleton and Dependency Injection
3. MV* patterns
4. Prototype
5. Iterator

Step 10: Learn algorithms and how to increase the performance of your solutions

The last milestone to accomplish. By now, you know how to develop reusable code, but it also needs to be robust.

A 5% increase in the speed of your application would mean million-dollar savings at Google.

Prepare yourself for such big projects so that when the opportunity comes you won’t miss it.

You should probably start with sorting algorithms like Quick Sort and Merge Sort and then move on to the graph algorithms, breadth-first search and depth-first search. Once you get to know these, get yourself a book on algorithms to proceed further.

How to become a JavaScript developer? A brief summary.

Cool! Congratulations on reading this lengthy post, you are probably really eager to become a JavaScript developer so get started on your frontend skills right away. Make a weekly plan and write your goals for the year-end. It will take at least a few months if not more to accomplish these 10 steps. I’m keeping my fingers crossed for you! Good luck!