This post is taken from my blog, so be sure to check it out for more up-to-date content 😉

Programming doesn't always refer to the same thing. Differences between separate fields of this activity can be really huge. AI, IoT, software, drivers, web 🤯 - many programmers have specialization in only one of these fields. But, for self-taught beginners, who decided to just learn how to code, this diversity doesn't play such a significant role. They often choose a language, learn it, and... the rest is history. Naturally, it's only one way of doing this. Someone can have some more understanding about this whole situation and specifically choose a field and programming language to learn. And that's the targeted audience for this article. 👍

Today, we're going to explore a path to becoming a JavaScript-focused web developer in 9 simple steps. From the very beginning with no programming knowledge whatsoever to a professional frontend and backend programmer. JS-based means that this list is centralized around this particular language, so some smaller steps are just briefly mentioned, other, much more detailed. Also, you can do web development with PHP, Ruby and some other languages. But that's not the focal point of this article.

As a side-note, that's the path I actually followed in my process of self-teaching. So I can guarantee that it's well battle-tested. 😄 Without further ado, let's get started! 👏

1. HTML

Before diving full in, let's take a step back and learn some basics. HTML can easily serve as a prologue to journey of any web developer.

HTML is a markup language, mostly used to create websites. It's latest version 5 has become a living standard in 2012. Learning HTML requires nothing more than a bit of knowledge about basic tags, elements, attributes and their correct placement. With autocompletion available in most modern IDEs, that's the only thing you need to get started.

• Introduction to HTML from "developer.mozilla.org";
• HTML tutorial from "tutorialspoint.com";
• Getting to know HTML from "learn.shayhowe.com";

2. CSS

The next stop on the web developer journey should be the CSS. CSS is a cascading style sheetslanguage that allows you to style your HTML elements and add them much finer, customized look. With CSS 3 being currently implemented, the language allows you to create different layouts, stylized elements, create mobile-first websites, animate and more! Many developers argue on CSS vs JS conflict when it comes to some special tasks, that can be done in 2 different ways. Besides that, CSS is a necessary addition to the tool-set of any web developer.

Getting to know basic CSS syntax, ways it integrates with HTML and some general properties should be just enough for your first steps. More advanced topics include CSS animations, media queries, and a flexible layout. Well, that's definitely a bit more to learn about. 😃

• CSS: Cascading Style Sheets from "developer.mozilla.org";
• CSS Tricks from "css-tricks.com";
• CSS Cheat Sheet from "hostinger.com";
• CSS Tutorial from "tutorialspoint.com";

3. Programming basics

Here we're going to slow down a little bit. Learning JavaScript - your from-now-on-ally, first programming language and the most important tool in all of the JS-based web development (obviously 😅) - is probably one of the most important points on this list. One that goes throughout it and also never ends. 😯

Unlike HTML and CSS, JS is a real programming (scripting) language. Here, while learning, you'll be introduced to concepts like variables, functions, classes, APIs and more. But, to comfort you a bit, JS is a really beginner-friendly language... and at least it seems so. More and more cumbersome things reveal as you dig deeper. 🕳 But, as always, basics are simple. It's only later when things start to get a little... complex.

In general, I can guarantee you that learning the syntax of any programming language for that matter, is the easiest task. What's harder is exploring its ecosystem (we'll get to that in a moment) but also learning how to use this given language to solve problems. That's the hardest thing to learn about programming. Something that isn't really taught that much - you have to discover it yourself. How exactly everything works together. How can you possibly create these incredible virtual goods with a simple set of variables, function, and other structures? I can only say that a whole article or even more can be written about it (hit me in the comments if you want one 😂), and it still may not be enough! 🤯 So for now, I recommend you to just code as much as possible and try to solve harder and harder problems yourself, from scratch.

• JavaScript - Learn web development from "developer.mozilla.org";
• JavaScript tutorial from "tutorialspoint.com";
• Introduction to JavaScript from "scrimba.com";
• SoloLearn JavaScript course form "sololearn.com";

4. Choose your tools

Now, that you can code for real and know dominant web languages, it's time to choose your tools! It's here where you should choose your environment, IDE/code editor and development accelerators! 💯

The most important things that form your web developer env are OS, code editor, browser and optional tools. Starting with OS you obviously have 3 choices: Windows, Linux, and MacOS. I know that it's a matter of personal preference, but I would recommend Linux to any web developer. Being a long Windows user in the past, I know that this OS can be a little limiting when it comes to programming. Also, almost all servers and alike use Linux, so you'd have a seamless experience while working with such computers. And, yup, programming in VM isn't the best choice either. I haven't personally used MacOS, but, as it has Unix roots, it seems like a good choice too.

As for the code editor, here's where you have to decide if you want a full-blown IDE, simple text editor, or something in the middle. Naturally, there's a lot of free, as well as paid options. The most popular are the VS Code (very much recommended) and Atom. Both provide a good extensions system, so you can easily use some additional functionalities. As for the paid tools, we have Sublime Text and WebStorm (full IDE). Here, the choice is yours! 😉

Lastly, we got a browser and other tools. The browser is obviously a must-have for any web developer. It's worth to try your code on different browsers, to see how it behaves. With that said, browsers like Safari and MS Edge are OS-limited.

The final tools section is actually really broad. Here things like browser extensions, prettifiers, linters, REPLs are included. Remember, it's in your best interest to make your environment feel comfortable, so just do it well! 👏

• JavaScript Linters from "gomakethings.com";

5. Node.js and NPM

After you've learned basics of JS and chosen your tooling, it's time to do some coding... and discover even more! Node.js is a technology that allows you to program in JS for backend/server tasks. With its release back in 2009, it greatly contributed to the evolution of JS programming. Based on V8, the JavaScript engine used in Chromium browsers, it let JS to be used even in a very tough task, remaining performant all the time.

Of course, with learning backend programming comes much more new things that simple runtime environment. Databases, microservices, APIs and SSR just to name a few. Generally, there's a lot to explore in this field. Especially when it comes to new programming frameworks and libraries i.e. reusable code provided for specific tasks. For easier distributions of such code, Node.js has its own package manager called NPM (Node Package Manager).

With the help of NPM, you can easily access millions of libraries and frameworks packages with really simple commands. With the evolution of JS and Node.js, NPM has become the largest package registry there is. And what comes with that, NPM-based web development has become a kind-of standard.

6. JS frameworks

Knowing JS well, with countless NPM packages at your disposal, it's time to dive fully in! 🔥 The first step you'd like to make is trying out and learning one of the JS frameworks/libraries for UI development. The most popular options naturally include React, Vue and Angular. With that said, you should play a little bit with each one of those to have at least basic feelings and understanding about what it's all about. Then, choose the best one for you and learn more about it. if(haveTime) loop() 😂

If you got interested in backend development, there's definitely a whole lot of tools to explore here too! Most notable and worth-recommending ones are Express, Feathers and Koa. By using these you can create different web apps and APIs much faster and easier.

Obviously, there are more libraries to cover. Many times it's almost sure that you'll find a good tool for your particular use-case. Also, you can use different tools together! Combination of frontend UI library like React, with backend framework like Express, allows you to create incredible new things, not possible earlier. These include SSR and alike, which leads us to the next step...

7. Programming principles and concepts

Learning JS frameworks can provide you with a fair introduction to the world of programming principles and concepts. And it's just the right time to explore them even deeper.

Terms like object-oriented programming (OOP), functional programming (FP), immutable data, test-driven development (TDD) are just must-have! You may have stumbled upon them already when studying JS basics. But knowing them just like that is not enough. The best thing you can do is to try out each of these techniques in real code. Of course, there are many more!

Also, something that you should have heard about when learning JS is coding style. If you haven't already, this is the time to learn how to write clean code. This includes the architecture, code splitting, and code formatting. It's always important to keep your code readable to others - whether it's somebody else or you a few years later! 😉

Another nice thing to try might be learning a new programming language - totally different or compiled-to-JS one, like TypeScript or ReasonML! Just giving an idea. The options are endless. 🎉

8. Explore the world

I guess this is actually one of the most general points on this list. 😂 The subtitle just explains this well enough! You should explore the incredible world of programming! Check the earlier points - Node.js, frameworks, concepts & principles - and, to make sure you haven't missed too much, just loop through them several times. Trust me - it's going to be an interesting ride! So, just be sure to study enough before the last step.

9. Open source

With all your knowledge and power that comes with it, it's time to finally unveil it to the world. 🌐 And the best way to do that is by creating your own open source project! That will be a true test of your skills! Start with an idea. Be sure to create something that others would like to use. Then go through the correct steps, one by one - problem-solving, architecture planning, prototyping, coding, testing, and launching. 🚀

Your OSS (open-source software) project can open a world full of new possibilities for your future. And, if it will grow big enough, you can even hope for more! Just remember that the idea and its execution are the most important steps! Also, even if your project won't be a big shot, don't worry. You've made it this far, and you'll go further! Just never give up and loop! 🔁

Never stopping

This is probably the most generic list for the most complex topic I've ever made. There's no recipe, no single way of achieving the same goal for different people. But that's something you most likely have already heard. And, as I don't want to talk about what has already been said, I can just wish you a great time learning how to code and discovering this interesting world of web development and coding in general. 😃 So, never settle and keep digging! There's still countless tools, concepts and other things to learn about!

With this list, I hope I helped you at least a bit at organizing your learning to-do. Remember to check out the brilliant road-maps listed in the resources section. They don't cover each step as we've done in this article but can give you a fair understanding of what can be your next possible target. Now, if you already are a web developer, what do you think about this list? Let me know down in the comments and don't forget to leave your reaction. And, if you think it's worth it, consider sharing this article with any beginning web developers you know! 😉

As always, follow me on Twitter and on my Facebook page for more up-to-date content and check out my personal blog!

Resources

• Web developer roadmap from "github.com";
• React developer roadmap from "github.com";
• Vue developer roadmap from "github.com";