Web development today is completely different from what it was a few years ago; there are lots of different things that can easily baffle anyone entering into the web development. It was one of the reasons that we decided to make these step by step visual guides demonstrating the bigger picture and to give anyone a clear idea about what they have to follow to be in certain roles in web development.

Update for 2020

This roadmap has been updated for 2020. Please have a look at the website

Web Development is an ever-changing field — the way we build websites today is completely different from how we used to do it a couple of years ago. With the plethora of tools available and the new ones popping up every day, most of the time developers find themselves confused about which way to go.

Just a random image because thumbnail needs to be a part of the article 🙉

I am the author and maintainer of “Developer Roadmap” which lists down the roadmap, the tools, and technologies that you would want to learn to get into the frontend, backend or the operations. I initially created these roadmaps in 2017, then updated in 2018 and most recently revised in 2019. At the time of this writing, frontend developer roadmap has been updated for the current year. I am still working upon the Backend and Operations/DevOps roadmaps and will hopefully release it in the next few days.

In this post, I am going to recap a bit and share with you the motivation behind making these roadmaps, a few disclaimers if you decide to follow these roadmaps and finally have a breakdown and tips on how to learn if you were to become a modern frontend developer in 2019.

Motivation

Before we get started with the article, just to give you an idea about me, I have been doing the Fullstack Development for the past 6 years and currently working as a lead engineer at tajawal where I have to wear many different hats as a part of the job. It is not only my hobby but also one of my job responsibilities to keep an eye on the trends, taking up the tech decisions and keeping the developers motivated and trained.

Web Development has evolved a lot and has evolved fast; the number of options available on the frontend is enough to baffle anyone. I am pretty active in the opensource and the community; if I had a penny for every time I was asked or saw this question “what should I learn next” pop up in the forums, I would have retired a couple of years ago. Circa 2017, an old university professor of mine was preparing a set of paths for her students to give them an idea about the market and reached out to me to give her a list of tools and tech recommendations for web development. I jotted down a rough sketch and forwarded to her but later on, I decided to clean it up a little and put it on GitHub so that I could refer anyone to that whenever I am asked this question. And that is how these roadmaps were born.

Disclaimer

Before you get started with the roadmap, bear in mind a few disclaimers

The purpose of this roadmap is to give you an idea about the landscape and to guide you if you are confused about what to learn next and not to encourage you to learn what is hip and trendy. You should grow some understanding of why one tool would be better suited for some cases than the other and remember hip and trendy never means best suited for the job

And secondly, do some research your job market

Do not ignore the fact that languages and tools can be very market dependent so do some research on the market that you are targeting.

Thirdly, you don’t need to know everything listed here

You don’t need to learn all of the things listed here to land your first job. The roadmaps might seem humongous but don’t let them scare you if you are just stepping into the web development. I have just tried to cover everything that you will eventually be learning or using. You can learn the bare minimum and keep learning the rest while you start building things.

Phase 1 — Job Ready

If you are a beginner and just stepping into web development, there is a different roadmap for you. Have a look at the roadmap below and stop reading any further; complete the items listed in this roadmap and come back once you have made a few projects using them