How to Become a Web Developer — Oversimplified Roadmap

Guide for the public and aspiring developers

Abdu Tawfik
8 min readJan 30, 2021

The purpose behind this guide is to give some clarity to anyone who wants to start the journey of web development and at the same time does not understand all the tech buzzwords.

Most probably you have a friend or a co-worker who is a web developer or you have wondered how you can one day build this virtual stuff called websites.

So how you can become one of the coolest jobs in the world today. With thousands of vacancies, high paying jobs, and companies fighting over talented developers.

Drinking coffee, in their hoodies and putting on headphones listening to music while creating something new to improve the world.

So let’s start… 🚀

The Basics

Any website on the internet consists of three main parts:

  • User-Interface; or what you are looking at it now on your browser.
  • Data; information both public like this text and private information like your emails and private messages.
  • Business Value; which is the value delivered to the user on the user interface from the data

And from these three parts, we have the Internet… 😮

Then we have the people who program and build this stuff which can be classified into three core professions:

  • Frontend Developer; who build the user interface.
  • DevOps; who maintain data and servers.
  • Backend Developers; who write code to communicate the business value from the data to the user interface

This is oversimplified though 😅

In general, web developers need to know some basics about each profession which explains why you find the job listings for web development is pretty long.

But eventually, you need to only specialize in one of them. For example, I specialize in Frontend Development but I also know some Backend and DevOps.

Now, let’s discuss each one in more details and what you need to learn to become one of them

Frontend Developers

Photo by Richy Great on Unsplash

They develop the user-interface or what you see on your browser plus sending what you want to achieve to the backend code.

For instance, on a website like Medium, they write code to show you text, tables, images, buttons, forms, your account page, and so on.

If you want to change your account details or password, they develop the form that reads these details and sends it to the backend code to process it.

They can go up to 3D online games development on your browser or streaming services like Netflix and Hulu.

So to become one of them, you have to learn three basic things: HTML, CSS, and Javascript

HTML

This is used to build the skeleton of the website as the basic structure. For example; buttons, tables, and text. But without any visual looks.

Good course to learn HTML:

CSS

This is used to add the visual looks to the HTML elements like making a button red or make it have a shadow when you hover on it with your mouse or increase the font size and so on.

It is the web makeup artist

This part can be in some companies a separate profession on its own

I would recommend this course:

Javascript

This is a programming language whose main purpose to add interactive elements to the website. For example, when you click on a button and it opens a popup or you click a “Save” button and it sends your data to the server and saves it.

Additionally, It is used to make very complex stuff like streaming and online games and logic or make you edit stuff like in Google Docs or calculate like Google sheets.

Basically; it is the language used to add brains to your website

Learning Javascript will never end but you can cover the basics with this course:

and to dive deeper, I would recommend jumping to the MDN documentation which will cover most parts of this language.

Bonus: Libraries

After you finish the above course, you can start building user interfaces but some smart people have developed code that you can already use to build them faster. We call this type of code: libraries or packages.

The most famous for frontend is ReactJS and Angular. I will add a link for a course of each one and you can just pick any one of them.

Though I would encourage you to start with ReactJS first 😉

And these are excellent paid courses that I have personally purchased:

Backend Developers

Photo by Markus Spiske on Unsplash

Now we know about how our website user interface will be designed, but where is the data on the website comes from and where it is stored.

Like when you save your password and you close the browser and open it again the website still remembers you or you can still read this article.

That’s where servers come into the mix which are very powerful machines that are connected to the internet 24/7 around the year.

That’s where the websites are on and your browser communicates with them to access the data which can be public or private.

Backend developers write code to allow access to data, store it, change it or delete it

Or what we call CRUD which is short for Create, Read, Update and Delete.

To start your backend journey you can learn any programming language but some of them can be easier to use for web development than others.

The most famous ones are NodeJS, Python, Go, PHP and Java.

You just have to pick one of them, master it, and then you can easily learn to use any of them.

I would recommend learning NodeJS as it is basically Javascript. Here is a good course for it:

And if you want to learn more established languages, I would recommend PHP as it is used by WordPress which runs around 30% of the Internet 😮

This is a good one:

Bonus: Libraries

Same with the frontend, there are libraries that would make your backend development easier.

For the backend, there are hundreds of them and each one has its advantages.

I would recommend you first start with ExpressJS if you choose NodeJS as a backend programming language or Laravel if you choose PHP.

Here are links for each one of them:

DevOps

Photo by Paul Hanaoka on Unsplash

Now comes the last part of our puzzle which is Data.

Storing them and maintaining the reliability of the servers is the job of DevOps which is a very big topic to cover.

But for you as a web developer, you just need to know a few from DevOps to become a good developer.

In general, you need to know the basics of two things: Databases and Cloud servers.

Databases

Simply, That is where data is stored.

There are many types of databases or data storage but the most famous two are MySQL and MongoDB.

You would probably learn them when you take a backend programming language course but here is a link if you want to explore them in more depth:

Cloud Servers

These are where your code and data exist and without them, your code essentially will not be visible to everyone.

As basics, you will need to know how to use the Terminal on your computer and the basics of the most famous cloud service providers: AWS.

Here is a link for both:

Bonus: Code Versioning

You know eventually, you will write code. But you will work in a team not alone to develop huge software.

You want to share the code with each other and also keep a history version of the changes you have done to your code. That’s where Git fits into all of this.

Here is a good one to start with and you should check out the rest of the series after watching it

Final Takeaways

Photo by Kelly Sikkema on Unsplash

This article is oversimplifying what you need to learn. I have been programming professionally since 2014 and I am still learning till today.

This comes to some spoiler alert; you will never stop learning which for some might be a downside but for anyone who wants to program this is what makes it fun.

Never stopping to learn is the reason why you will always stay employable with ever-increasing salaries and endless job opportunities.

Learning, exploring, and practicing is what will make you a better developer and a better problem solver which what all companies are fighting to hire.

Most developers I know had a passion for programming.

For them, it is like an art or a hobby more than being their job

Bonus: If you want a full map of what your learning path will be, you can check out this roadmap but know that you don’t even need to know all of this.

Thanks for reading my article and I hope you enjoyed it!

Social media: Twitter, YouTube, LinkedIn, Instagram, and GitHub

--

--

Abdu Tawfik

Web Application Developer. Knowledge hungry always learning. Aspiring to become a Web Unicorn. Find me @abduvik on social platforms.