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?
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 the knowledge and skills you need to learn in the first place:
- What is a variable
- Variable types 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 key words like querySelect, querySelectAll and get used to them.
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:
- 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.
Step 3: Take a course to solidify what you have learned
Most likely you should aim for a boot camp course for beginners.
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.
- 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
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:
And better understand the keyword this which is a common troublemaker in the JS world.
Bonus points if you learn advanced topics like:
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:
- 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.
- 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.
- 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.
- 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
- Dataset and classList
Then you should gain at least a basic understanding of the following topics:
- Web sockets
- Storage, cache
As you can see, the list is quite long. The good news is, most of it you can learn within one week.
Step 8: Prepare for interviews
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
- Array functions: map, filter, reduce
- Creating new objects through the constructor function
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 Boldare we also like Clean Code by Robert C. Martin.
The most notable patterns you should explore first are:
- Singleton and Dependency Injection
- MV* patterns
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 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.
Cool! Congratulations on reading this lengthy post, you are probably really eager to become a JS 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 the 10 steps. I’m keeping my fingers crossed for you! Good luck!