Web development is one of the quickest moving fields in software development which means there are tons, and I mean tons, of new topics and technologies to learn every year. It is overwhelming having so many new things to learn, but with this simple step by step guide to learning you can confidently and quickly learn any new topic you want.
If you prefer to learn visually, check out the video version of this article.
Step 1: Research
Once you decide on the topic you want to learn the very first thing you need to do is research the topic. Most likely you already know the very basics of what the topic is about, but in this step your goal is to gain a solid understanding of what this technology is and why it is useful. The easiest way to do this research is by watching videos, reading articles, or listening to podcasts. I generally prefer podcasts/video for this step since I can watch/listen at an increased speed which is quicker than if I was reading an article.
It is also important that this research is purely about learning the pros/cons of a topic and how that topic works in general. This means that the videos/articles you consume should not be tutorials, and instead they should be explanatory videos/articles. The goal of this steps, is that by the end you should be able to explain in detail what this technology is and what it is best used for. You won't know how to implement this technology yet, but that is ok.
Lastly, you should become familiar with popular libraries/frameworks that are used with the technology. For example if you wanted to learn Node.js, knowing that Express is a popular web framework would be something you discover in this step.
If you were researching JWT this video would be an example of a good research video.
Step 2: Learn How To Implement And Get Started
After step one you should have a solid understanding of your topic of choice which means you are finally ready to start learning about how to implement this technology. By far the best place to do this is by reading the documentation for your topic of choice. I know documentation isn't very fun to read, but nearly every technology has a Getting Started section in the documentation. This is the ideal place to start for this step since your goal with this step is to figure out the basics of how to get started. Most likely in this documentation there will be steps on how to install and download all the software/libraries you need so you can get up and running with your first application.
You should not start on your first app yet, though. That is for the next step. This step is purely about learning how to get started and fully reading and understanding the getting started documentation. Making sure to fully understand the documentation before beginning your first app will make the entire process so much easier.
Step 3: Hello World
That's right. Everyone's favorite step, the Hello World application. Now you are probably already thinking this is stupid and that you should skip to step four, but I promise you the Hello World app is a crucial step in learning any new technology. With the Hello World app you are able to debug any potential setup problems and make sure that absolutely everything is working before you start making things complex. I can't tell you how many times I skipped this step and regretted it, because I couldn't tell if the bugs in my code were from a bad setup or some other problem.
Now depending on the topic you are trying to learn this Hello World app can vary a lot, but in general the goal of the Hello World app is to get the smallest possible working version of the technology running. For example, if you were trying to learn Node.js for web development then a good Hello World app would be a simple server that prints out the text Hello World when accessed. If you run into any problems with getting the application working then the Getting Started documentation is going to be the best place to look for solutions since the documentation most likely has detailed steps on how to get past the problems you are encountering.
Step 4: Build A Small Application
Finally we are onto the fun part of learning. In this step you will expand on the simple Hello World application and build out a small application with a few additional features beyond the very basics. This should not be a big or complex application, because you are only trying to learn how all the pieces of the technology work together. In the example of Node.js this would be a simple web server that has a few routes that link to each other and return a simple HTML page. Again, this may seem simple and you will be tempted to jump straight into the big application you want to build, but I highly advice against that. This step is crucial for learning how everything inside the technology links together and will make building your large app so much easier.
One other crucial thing about this step you need to know is that you should not include any additional technologies or topics that you do not know when building this small application. This means if you are learning Node.js you should not use React on the front end, even if you know React, since it will make learning Node.js more difficult with the extra complications of combining two technologies.
Step 5: Implement A Popular Library Or Framework
So please don't hate me, but in this step you are going to be building another small application, but this time you will be using a popular library/framework to do so. It is ideal to actually build the exact same application from step four since it will be easy to compare and contrast the two applications to see what the library/framework helps with. Using the same Node.js example, in this step you would create the exact same web server, but use Express as your server framework. One thing to note, is that not all technologies have a big framework/library that can be used so if that is the case just skip this step. It is important that you don't skip step four and jump straight into step five with the framework since learning a new technology and framework at the same time is much more difficult.
Step 6: Build Your Own Application
The final step is to build whatever application you want. Most likely you decided to learn a particular technology because you have an idea of something you want to implement with it and finally in this step you can start implementing that idea. Of course there will be a ton of complications and bugs as you start your larger application, so when you hit a roadblock the best thing to do is turn to tutorials/articles on the topic to try and get past the roadblock in front of you.
If you do follow a tutorial for places where you are stuck, it is important that you do not just copy paste the code from the article/tutorial. You should only be turning to the tutorial when you are truly stuck and using it as a means to get unstuck. This means that the goal of watching the tutorial is to learn and understand the problem that you are stuck on and not about getting code that works.
If you do not have a grand final project you want to build then in this step you should just build a larger version of the small project which incorporates more difficult and complex parts of the technology you are learning.
And that is all it takes to learn any new technology in the quickest and most efficient way possible. The most important thing to remember is that learning is not about racing to the end and building your large project right away. Taking the time to parse through each of these steps will make learning much more enjoyable and will be much quicker than jumping in the deep end.