The Essential Steps to Becoming a Web Developer in 2022

Nowadays there are tons of tutorials out there on the internet on learning web development - and this can be rather confusing.

Here are the steps that I would recommend you to follow. I tried reducing the number of choices you will need to make, since having to make a decision can be a bit overwhelming when are only a beginner.

Step 1: Learn the Basics of JavaScript

JavaScript is the lingua franca of web development as of 2022 - and I reckon it will stay so for the years ahead.

I found this YouTube video to be a good way to start: JavaScript Basics in 15 Minutes

After watching that video, if you need to learn in more depth, you can check out this one-hour JavaScript tutorial by Mosh Hamedani.

Don't worry if it all sounds confusing and foreign to you. The goal of this step is to merely get familiar with how JavaScript code looks like.

Step 2: Practice, Practice, and Practice!

Yes, we are not going to enter the realm of web development yet, because there is a very important step to becoming a good software developer that no one should skip. I repeat, no one!

This step is about getting a good amount of practice in becoming a programmer in general. It means learning how to translate what you want to build into computer language. I would recommend spending at least one month on this step.

For this step, I would recommend Project Euler (projecteuler.net). It is one of the oldest and greatest websites to learn programming in its purest way.

What you want to do is to take the exercises there one by one, try to solve them with JavaScript, and validate your results on their website (you will need an account for that).

To write JavaScript code, you can use the online free editor Playcode (playcode.io).

Step 3: Learn a Framework

Once you gain a solid foundation of programming, it is time to learn a real framework - you should be very excited at this point! ;)

Most modern websites today are built with one or more JavaScript frameworks. A framework is a set of tools, libraries, and best practices that allows you to build a website without having to build everything from scratch. In other words, frameworks take care of building and maintaining the low-level, often repetitive stuff that you need in a website.

As of 2022, the three most popular frontend development frameworks are React, Vue, and Angular. (Technically, React is a library, not a framework, but that does not matter for now.)

I would recommend learning React. It has a relatively simple and straight-forward approach, and yet it is the one that has the highest number of jobs available among the three.

I found this React Crash Course to be a good way to start.

Step 3.5: Learn HTML and CSS

Along the way of learning React, you will come across HTML and CSS, which are also the primary building blocks of modern and non-modern websites.

I recommend watching this HTML Crash Course video to get familiar with them. You do not need to learn HTML and CSS in depth at this stage. You will develop your knowledge of them as you develop more and more websites and web applications.

Step 4: Practice Building Web Applications

Now you are ready start building something real!

Once again, it is important to get a good amount of practice, to make sure you will have a solid understanding of React.

I found this blog post to have a good set of small web applications that you can try to build with React: 8 Best React.js Projects for Beginners to learn in 2022

And once again, do not skip this step. Try to spend 1–3 months building beginner and intermediate level web applications.

Step 5: Start Building a Portfolio

As you start developing more advanced applications, I would recommend creating an online portfolio for yourself on GitHub (github.com), where you showcase your projects. Having an online portfolio can get you ahead a lot when searching for jobs or freelancing projects later.

Try to focus on the following when building these projects:

  • Good UI design  -  it is important for any web developer to have an understanding of a good UI
  • Clean code structure  -  Understanding clean code and good code structure is a must for any software developer in general

Remember to include screenshots of each project in the project's README file. You can learn more about README files in this video.

Step 6: Get Your First Job

Now you have the essentials skills for entering the job market as a web developer. The best way to start will be taking an internship at a company or a startup. Make sure this will be a company where you can gain experience with React.

Where to find jobs highly depends on your region and country. In general, many jobs are usually posted on Linked-in.

You can also choose to work as a freelancer. A good place to start will be creating a freelancer portfolio on websites such as Upwork (upwork.com) and Toptal (toptal.com). Make sure to include a link to your GitHub portfolio.

That was it  -  hope it was helpful.

If you have any questions, leave a comment below.

Take care ;)