We are living in a digital era where companies like Facebook, Google, Airbnb, Amazon and Uber are setting new frontiers and reshaping the global business ecosystem. None of this would be possible, however, if it were not for the work of programmers, including JavaScript developers, of course. The market demand for programmers is enormous these days, and for those who want to be JS devs, new opportunities arise every day.

It’s the programmers’ time. Companies all around the world are looking for them constantly. According to LinkedIn, there are 190,000 JavaScript-related job offers worldwide now. Businesses try to attract devs not only by offering them a fat paycheck but also the atmosphere of the workplace.

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

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

Why JavaScript?

In 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 a hard choice. 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 JavaScript developer a frontend developer?

Most usually, yes, JavaScript is the front layer of almost every single modern website. That means all your favorite websites like Facebook, Google, Amazon, and YouTube need and hire JavaScript developers. JavaScript can also be used 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 as CSS. CSS is used to apply colors, manage the position of elements and arrange the space on the website.

JavaScript however, is all about dynamics. For instance, respond to user click, fetch some data from the server, dynamically update the page. It is crucial when it comes to the User Experience and User Interface, with JavaScript your website is way more flexible and easy to use.

Now you know a little of what JavaScript is for, let’s find out how to become JS developer! I have prepared 10 steps for you to follow. Stick to them, and you should be 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 resource.
  • Where do I write code?

At first, set up your machine. Whether it’s Windows, Linux or Mac, get a programming IDE, or in newbie’s words “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 hint as to what you need to learn in the first place:

  1. How to write Hello World in JavaScript
  2. What is a variable
  3. Variable types and how to create each of them
  4. What is a loop and how to iterate over arrays
  5. Document Object Model tree (DOM tree)
  6. How to write HTML, learn about tags, especially: head, body, a, div and p.
  7. Selecting DOM nodes. Learn key words like querySelect, querySelectAll and get used to them.
  8. Have a little play with CSS. Create a first class and assign the html tags. Bonus if you learn how to do this through JavaScript.

All these things you can learn online or through a private on-site course. I leave the decision to you.

Step 2: Work on the first homemade little project

This is a crucial step. You need to get an idea of how to connect the bits.

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 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.

>>Interested in Angular or React? Check out an interview with our developers on differences between Angular and React

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 learned a second (or third) language, you went to classes. It’s the same for programming languages and JavaScript is no different.

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 practice

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 to 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 the business because you are on the last few runs 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 in the list.
  • Explore Math.random() and other handy built-in functions prefixed with Array or Object.

Step 5: Learn ECMAScript 6

ECMAScript is a standard and JavaScript implements it.

Many browsers do not support ECMAScript code. Thus, ECMAScript code needs to be transpiled to JavaScript to run seamlessly in all environments. (This means replacing ECMAScript syntax with valid JavaScript code)

However, most of today’s production code is developed in ES6 or later (ES7, ES8). ES6 is a short name for ECMAScript that was finalized in 2015. (similarly 2016 -> 7 and 2017 -> 8)

ECMAScript introduces new concepts that you definitely need to learn:

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

This is also great time to focus on functions like:

  • Map
  • Reduce
  • Filter

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

Bonus points if you learn advanced topics like:

  • Iterators
  • Generators

Step 6: Learn the 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 as much as it was previously. 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. 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 referred to as very easy to learn and with the most friendly 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 few companies/agencies to get some feedback.

During this process, you will find out that besides JavaScript, you will be also 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 one 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 JavaScript developer.

Step 8: Prepare for interviews

Get ready for show time. Review your notes and keywords from JavaScript world. To do this, there is one special course 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
  • Prototype

Step 9: Tools and design patterns

If you got a job, great! If not, reiterate, practice and focus on the key points from the feedback.

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. Ctrl+c and ctrl+v are not the only shortcuts you should know. In fact I doubt if you will need them often. There are quite a few others which make your development 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 the 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 many 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 XSolve 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 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 a 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.

>> Check out our article about “How to start a neural network with JavaScript in 5 minutes” and visit our Career website to check your offfer for JavaScript Developer!

Summary

Cool! Congratulations on reading this lengthy post, you are probably really eager to become a JS developer so get started 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 the 10 steps. I’m keeping my fingers crossed for you! Good luck!

Already started? Share your path in the comments below!

white Land Rover
Business Featured Post

How BlaBlaCar beat the competition in the race for market domination in 27 countries.

When BlaBlaCar approached XSolve, they were at a stage of rapid growth with around 24 million users already buzzing about their excellent carpooling platform. But the visionaries at BlaBlaCar...

ebook cover
Business Featured Post

E-book: How to Create an Agile Office

We present to you an e-book which collects all our experiences and thoughts regarding creation of an agile office. Hands on, practical, functional. This resource was created primarily for...

Holacracy why it’s a good idea to share the power
Business Featured Post

Holacracy: why it’s a good idea to share the power

We are on standing on the brink of the AI revolution. Researchers at the University of Oxford predict that in the next two decades up to 66% of American...

This site uses cookies. By continuing to browse the site you are agreeing to our use of cookies.

To find out more click here

Ok, Thanks