DEV Community

loading...

The 2021 Web Development (Frontend + Backend) RoadMap

javinpaul profile image javinpaul Updated on ・16 min read

Disclosure: This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.

The Complete Web Developer (Frontend + Backend) RoadMap

Hello Guys, I hope you are doing great in 2021. I am sure you all have already made your goals by now and thinking about how to achieve those goals. If one of your goals is to learn to code or to become a Web Developer in 2021 then I have something great to share with you today, the 2021 Web Developer RoadMap.

This is an excellent illustration of how to become a web developer in 2021 and guide you on how you can learn and master Web Development in 2021.

It's a collection of different paths to learning front-end, back-end, and all other things a Web developer should know. You will not just know about web development but about essential programming stuff which is important for all kind of programmers and software developers.

The RoadMap is also divided into 3 sections, the first section is about common skills which every web developer should know, while the second and third section is about front-end and back-end development, two main areas of web development.

You can either learn Front-end or Back-end or both, depending upon your choice. If you want to become a FullStack Web developer then you have to learn both front-end and back-end, there is no escaping there.

In Frontend also you can choose to learn the framework you want like React, Angular or Vue.js, you don't need to learn them all but learn the one you like. If you ask for my recommendation, Vue.js is a better choice in 2021 than the other two but again those are more used than Vue.js yet.

Btw, you might have seen this RoadMap before. This awesome visual guide to becoming a web developer was created by Kamranahmedse and posted on his GitHub repository here. It's one of my favorite places and I have bookmarked it for a repeated visit.

Last year, while doing some internet surfing I stumble upon this excellent page. I first found the DevOps RoadMap there and become an instant fan of Kamran Ahmed. In fact, I have these RoadMap printed and stick to my Desk for regular reference.

Btw, the Roadmap tells you what to learn but doesn't tell you how to learn and where you can learn those skills. I have tried to supplement that part by providing links of some useful courses and books you can take to learn the technologies, programming languages, frameworks, and libraries required to become a web developer and mentioned in this RoadMap.

An Illustrated Guide of becoming a Web Developer in 2021

Anyway, Here's where you'll start. As I have said before, You can choose either the Front-end or Back-end path below, depending upon your interest. Regardless, there are eight recommendations in yellow that you must learn for either path, these are the common things every programmer should know.

https://github.com/kamranahmedse/developer-roadmap

Recommended learning for either path

1. Git
One of the most popular version control system. It's just not possible to live without Git anymore. You can check out The Git Complete Guide on Udemy to start with.

2. SSH
It allows you to remove login to another host, another popular networking concepts which every web developer should know.

3. HTTP / HTTPS
The HTTP protocol is the backbone of web and a good knowledge of both HTTP and HTTPS is mandatory for a web developer

4. Basic Terminal Usage Linux Command line Basics
Not just a web developer but for any programmer, the Linux command line is very very important and I strongly recommend you to spend some time to learn them. The Linux command line basics course on Udemy is a good place to start with and if you like free courses, you can use these free Linux courses to start learning Linux.

5. Data Structures and Algorithms
These are the building blocks of any program and better knowledge of Algorithms and Data Structure is key for your next job or doing well on your current job.

If you are interested in learning algorithms and data structure, I suggest you choose the course which is in the programming language you understand.

For example for Java developers Data Structures and Algorithms: Deep Dive Using Java is a good one to start with.

Similarly for JavaScript Developers Colt Steele's JavaScript Algorithms and Data Structures Masterclass is a good one.

And, if you use Python then Algorithms and Data Structures in Python is a nice one.

And, if you don't mind learning from resources then you can also use this list of free algorithms courses to start with.

7. Character Encodings
If you are creating global applications which shows information in many different languages across the world then you should have a good knowledge of character encodings. It basically tells your browser how to show your data.

8. GitHub
There is no doubt that every programmer should know Git and Github as they are the standard in terms of version control and code repository. If you want to learn and master Git and Github, you can check these free Git course.

The 2021 Frontend Developer RoadMap

If you want to become a front-end developer in 2021 then you should follow the below Front-end Developer RoadMap. You should focus on yellow boxes which highlight important things to learn and follow from there. Below the RoadMap, you will find additional resources like books and courses to aid your learning.

https://github.com/kamranahmedse/developer-roadmap/blob/master/images/frontend.png

1. Web Development Basics

It's pretty obvious that if you want to become a Web Developer then you should know the basics of internet, web applications, protocols like HTTP and web development in general. Thankfully there are a lot of courses where you can not only learn these but much more than that.

I recommend the following resources for all programmers who want to learn Web Development:

  1. The Web Developer BootCamp by Colt Steel
  2. The 2021 Complete Web Developer Bootcamp by Angela Yu
  3. The Advanced Web Developer Bootcamp

2. HTML and CSS

HTML and CSS are the backbones of any website. HTML provides the structure while CSS provides the style and help them to look better and more visually appealing. If you want to become a serious frontend developer then you must master these two and to start with, you can check these free HTML and CSS courses to learn online.

3. JavaScript

Just like four pillars of object-oriented programming, I mean Abstraction, Encapsulation, Polymorphism, and Inheritance, there are three main pillars of web development, namely --- HTML, CSS, and JavaScript.

The first two provides structure and style but it's the JavaScript which makes them alive by adding interactiveness. It's extremely important for a modern Java developer to learn JavaScript and thankfully there are many courses which you can look to learn both beginner and advanced JavaScript, here are some recommendations:

  1. The Complete JavaScript Course 2021
  2. A Beginner's Guide to Advanced JavaScript and ES6

4. TypeScript

Just like we have C and C++, TypeScript can be considered as JavaScript++ though it's not as popular as C++.

The good part of TypeScript is that it adds type-safety in JavaScript code which means you can catch nasty JavaScript type related errors in the development phase.

It also makes developing object-oriented code easily for JavaScript. If you want to learn TypeScript, Understanding TypeScript is a great course to start with and if you need more choices or free alternatives, here is another list of some free TypeScript courses to start with.

5. Angular

Gone are the days when people build websites using plain HTML, CSS, and JavaScript. Nowadays most of the work is done by a framework like Angular, React JS or Vue.js.

They not only provide a structure for storing your code but also makes it easy to develop a web application in quick time.

Angular is backed by Google, hence learning Angular is a good choice for any modern Web Developer. If you want to learn Angular there is no better course than Max's Angular - The Complete Guide on Udemy.

7. React JS

Similar to Angular, React is also a popular library for developing web applications. It allows you to write reusable components which you can then use to create modern looking interactive web pages.

Like Angular is backed by Google, React is backed by Facebook and hence quite popular. If you want to learn React then you either join Stephen Grider's Modern React with Redux or Max's React --- The Complete Guide on Udemy. Both are excellent courses to learn to React online.

Here are the links:

  1. Modern React with Redux
  2. React --- The Complete Guide

8. Vue.js

The Vue or Vue JS has really picked up speed last year and more and more people are recommending and using Vue.js. I am still a beginner on Vue and probably take some time to learn and migrate into Vue based application. But, if you have already made a decision you can start with Vue.js Essentials course on Udemy.

The 2021 Backend Developer RoadMap

If you want to become a back-end developer in 2021 then you can follow this Back-end Developer RoadMap. Again, you can start with yellow boxes which highlight key technologies you need to learn and then grow from there. Below the RoadMap, you will find some supplementary material and links to courses and books to aid your learning. I will also earn some commission if you end up buying any non-free courses.

https://github.com/kamranahmedse/developer-roadmap/blob/master/images/backend.png

1. Node.js

There are many choices to develop your web application's backend like you can use Java and Spring or maybe Python + Django but in recent year Node.js has come up as the preferred option.

The best thing about NodeJS is that it allows you to develop a complete web application using just one programming language --- JavaScript.

If you want to go Node route, then The Complete Node.js Developer course by Rob Percival and Andrew Mead is best to start with.

2. Java

I am primarily a Java developer who have learned Web Development and other programming languages, hence when it comes to developing backend my preferred choice is Java. You can either use Core Java or Java + Spring Boot to write a cutting edge, high-performance backend. If you want to go Java and Spring route, here are a couple of courses you can join to get up-to-speed.

  1. The Complete Java Masterclass
  2. Spring Framework 5: Beginner to Guru

3. Python

Python is another awesome language, full of powerful framework and libraries. If you want to develop backend using Python then you can use Django, a full-stack web development framework for Python programmers.

To start with here are a couple of courses to learn Python and Django:

  1. The Complete Python Bootcamp
  2. Python and Django Full Stack Web Developer Bootcamp

4. Ruby

Ruby is another powerful language perfect for web development. It has got a great framework called Rails which makes creating Web applications really easy and fast. If you want to start with Ruby you can check out The Complete Ruby on Rails Developer Course on Udemy.

It's one of the best resources and if you need more choices and don't mind learning from free resources, you can also take a look at these free Ruby and Rails courses.

5. PHP and MySQL

Forget about whatever negative things people say about PHP. It is still the easiest way to write the server side code and many, almost 50% of the internet runs on PHP and MySQL stack.

If you are interested in learning PHP, you can check out PHP for Beginners course on Udemy. If you need more choices and free resources, you can also check my list of free PHP and MySQL courses to start with.

That's all about how to become a Web Developer in 2021. This is an excellent resource to start with as it highlights several paths to become the Web developer you always wanted to be.

Though, if you stuck somewhere and if there is any confusion, you can always ask here and we'll try to answer your queries as best as possible.

If you are new into the programming world, don't let this illustration and a lot of technologies scare you. It's just a guideline and you can take a different path to learn Web Development and become a Web Developer, you can choose the path you like and stick to that.

Other Programming Articles you may like
10 Things Java Programmer Should Learn in 2021
10 Programming languages You can Learn in 2021
10 Tools Every Java Developer Should Know
10 Reasons to Learn Java Programming languages
10 Frameworks Java and Web Developer should learn in 2021
10 Tips to become a better Java Developer in 2021
Top 5 Java Frameworks to Learn in 2021
10 Reasons to Learn Python in 2021
10 Testing Libraries Every Java Developer Should Know
6 JavaScript Frameworks You can Learn to become a truly Fullstack Developer

Closing Notes

Thanks for reading this article so far. You might be thinking that there is so much stuff to learn, so many courses to join, but you don't need to worry.

There is a good chance that you may already know most of the stuff, and there are also a lot of useful free resources which you can use, I have also linked them here and there along with best resources, which are certainly not free, but worth of money.

I am a particular fan of Udemy courses, not because I will get paid if you end up buying any course but because they are very affordable and provides a lot of values in a very small amount, but you are free to choose the course you want.

At the end of the day, you should have enough knowledge and experience about the things mentioned here.

Good luck with your Web Development journey! It's certainly not going to be easy, but by following this roadmap and guide, you are one step closer to becoming the Web Developer, you always wanted to be

If you like this article then please consider following me on twitter(javinpaul). if you'd like to be notified for every new post and don't forget to followjavarevisited on Twitter too

All the best for your Web Development Journey and a Big thanks to Kamran Ahmed for producing such awesome content.

P.S. - If you are overwhelmed by the information given here and just want to do one thing and come back later to the RoadMap, just join The Web Developer BootCamp by Colt Steel, it's gist of everything and there is no better resource than this one for learning Web Development in 2021.

Discussion (97)

pic
Editor guide
Collapse
pramanadiputra profile image
Ida Bagus Gede Pramana Adi Putra

Here I am in 2019...

Still using Laravel/PHP, MySQL, and jQuery.

Collapse
prahladyeri profile image
Prahlad Yeri • Edited

That's an excellent stack in my humble opinion. I use a similar stack, except flask and django instead of laravel and the database could by anything by virtue of sqlalchemy (which is an ORM similar to php's doctrine).

You shouldn't change your working stack just for the sake of modernization. Modernist frameworks like angular, vue.js & react are meant for solving a single problem which is that of single page applications. If your app doesn't need that, then I don't think there's any benefit of using or even learning it.

And contrary to populist trend, I think jquery is awesome, there's nothing wrong with it! The javascript world is plagued with zillions of npm packages that do the same thing more or less. When one useful library like jquery tends towards a semblance of standardization, I don't get why many devs start hating it in unison. We should appreciate jquery, not abandon it!

Collapse
timkor profile image
Timkor • Edited

I do not agree with this. Although it is possible to create single applications with frameworks like Vue.js, it is also perfectly able to render serverside. You do not have to generate client side code at all. You could even combine it: render serverside, hydrate client side and from that point on it can behave like a SPA. You can also just generate static websites with Vue.

For all above, it is easiest done with Nuxt.js.

In my opinion, developing in a component based framework is much more productive and future proof. Especially in Vue.js I think every part of your application/website is more isolated.

I agree though, that it is also possible with other stacks and that it might be a matter of preference and experience.

Though, I highly recommended trying out Vue.js.

Thread Thread
pawail profile image
Pawail A. Qaisar

Calling anything 'futureproof' in this field is the height of hubris.

Thread Thread
timkor profile image
Timkor • Edited

Agree, I meant: more futureproof, but you might have interpreted it already as that.
Javascript is certainly more future proof than PHP, same goes for Vue for jQuery. Regarding the usage and popularity.

Collapse
javinpaul profile image
javinpaul Author

Well.. what I can say... you are not alone :-)

Collapse
pramanadiputra profile image
Ida Bagus Gede Pramana Adi Putra

I know, I was a game developer, wrote C# codes and worked with Unity Engine. Thanks for your post and that roadmap.

Thread Thread
johncrumpton profile image
John Crumpton

Why did you switch? I'm going the other way!

Thread Thread
loiclaudet profile image
Loïc Laudet

I exactly have the same question! Why did you make the move from game development?

Collapse
maraspin profile image
Steve Maraspin

Nice overview. I also think .NET Core should be more prominent in the back-end section.

Furthermore, among NoSQL databases, I would add InfluxDB and/or Timescale (for time series) and especially Redis (swiss army knife).

Good job nevertheless, keep it up!

Collapse
javinpaul profile image
javinpaul Author

Yes, I agree .NET Core is still an important backend technology and there is a good market for them. thanks for your comments and reminder.

Collapse
saqibramzan profile image
Saqibramzan

Thanks for providing such a useful and informative platform. I am on this site for the first time, and find it very helpful. Keep doing the great work. Shout out from our entire Chillitos Team

Collapse
changal123 profile image
Alex Chang

This is my first time here as well! Good luck on your journey!

Collapse
dmahely profile image
Doaa Mahely

Welcome :)

Collapse
ren profile image
ren

Amazing post, thank you very much!
Just would like to say that th background in the backend image is transparent, so it is kind of uncomfortable to read if you download the image as I did :)

Keep up the good work!

Collapse
javinpaul profile image
Collapse
chewieez profile image
Greg Lawrence

Thank you for creating this post! I am looking forward to digging in to it.

I did notice there is a typo in your title image at the very top. It currently says "Moder Web Developer" where I think it should be "Modern Web Developer".

Thanks!

Collapse
javinpaul profile image
javinpaul Author

Yes, you are correct, thanks for pointing out.

Collapse
siko279 profile image
Sijmen Koffeman

I think ASP.NET Core (Linux/OSX/Windows) is missing from this recommendation!

Collapse
javinpaul profile image
javinpaul Author

Yes, but you are right, it's worth including.

Collapse
kpennell profile image
Kyle

Everytime these maps get shared on reddit/hackernews, I've seen dozens of experienced laugh and mock at them, saying they are WAYYYY overkill. I'm not sure who to believe.

Javin, is there some proof you have that these skills are indeed necessary vs. just a subset of them?

Collapse
imperialisms profile image
Achilles Imperial

I think it all depends on the demands of prospective employers and clients. The more/deeper you learn, the more marketable you are. You can certainly find jobs knowing solely html and css, but your options open up if you know a lot more.

Collapse
artnerdnet profile image
ArtNerd

I just got my first job as a junior developer and I use 80% of what is listed here, every day >,<

Collapse
denzybob profile image
denzybob • Edited

. Latest Software 2021 crack free download here. Also, there are phpstorm crack download available for free professional webdeveloping Software Crack Download 2021
Filmora Crack Download for perfect video editing for online uploading as well.

Collapse
cescquintero profile image
Francisco Quintero 🇨🇴

Technology fatigue xD

I like and also dislike developer roadmaps.

I like they show how diverse can be working in software development but don't like how they could feel like there's only one path.

Is there a roadmap described in terms of software domain technology stack? I mean like this is the roadmap if you'd like to build/work doing the next Uber-like app.

Collapse
toddcoulson profile image
Todd Coulson

A roadmap, does not mean "the one true path". It means it is a common path. I think any single tech in this stack could take someone a lifetime to perfect, and there are niches all over this roadmap. Roadmaps are NEVER, "this is the only way".

Collapse
cubiclebuddha profile image
Cubicle Buddha

Yes, there are careers available in software for people of all interests and disciplines. There is no one way.

Collapse
molecula451 profile image
Paul

Using no-way as the way. YOU are the way.

Collapse
itisdouglas profile image
Douglas Cueva

I'm a big fan of this developer roadmap. I have the backend roadmap printed, and I carry it around with me everywhere I go. I'll be saving this post to go back to it and review the resources you link to. Thanks!

Collapse
starstype25 profile image
starstype25

Amazing knowledge and I like to share this kind of information with my friends and hope they like it they why I do
startscrack.com/wondershare-filmor...
rootactivator.com/sparkbooth-crack...
preactivator.com/audacity-crack-key/

Collapse
jeanmachuca profile image
Jean Machuca

British Herald has featured #qcobjects as "the most advanced framework for modern software development". Thanks for sharing!

britishherald.com/qcobjects-the-fi...

Collapse
rajvashi profile image
Raj vashi

Hii if you want some good websites or app development services then plz do visit best mobile application development comapany in India.
India
Thank you..

Collapse
malkova90 profile image
malkova90

This is my first time visit here. From the tons of comments on your articles
192.168.1.254

Collapse
esrever98 profile image
esrever98 • Edited

I truly impressed about this great article!! Thanks for letting us know about this marvelous roadmap.

One thing just for comment.. i think there are no number 6 title in "Recommended learning for either path" part ^^

Anyway, thanks a lot!!

Collapse
trantien18 profile image
Tran Tien

nytimes spelling bee is a free online words game, try to play and find the words, to win this game, you can using word scramble tool.
play this game now.

Collapse
levivm profile image
Levi Velázquez • Edited

Very good roadmap. I used myself for teaching juniors dev. In order to add information to this. I created a dev.to post about How To Select a Backend Framework

Collapse
bashayr29 profile image
Bashayr Alabdullah

Great article! Here Back-end developer who uses python with django rest. Recently I am thinking to use Golang for most of my code. I have use Java with spring boot also.

Collapse
javinpaul profile image
javinpaul Author

Thanks @Bashayr

Collapse
gregosphatos profile image
Adrien Petitjean

Hey nice post! Also are you considering adding micro (I would say nano) services with serverless and function as a service (aws λ, google functions etc...) for the backend part ?

Collapse
javinpaul profile image
javinpaul Author

Hello @Adrien, that's a great suggestion, yes, we'll consider that when we update this article. thanks for your suggestion.

Collapse
roadmaps profile image
Collapse
katleenbrown440 profile image
Kathleen Brown • Edited

Hey Author,
Amazing article i really liked the way that you have illustrated the things in a descriptive way and also you have explained each and every aspect in detail that's commendable.

Collapse
vladodev profile image
Vladimir Mikulic • Edited

Syntax error on line 1

It allows you to remove login to another host
Maybe remote :)

Collapse
javinpaul profile image
javinpaul Author

yes Vladmir, it's remote, sometime spellcheckers gets too smart :-)

Collapse
inshalayaz profile image
Collapse
hmphu profile image
Hoang Manh Phu

Great article. Thanks a lot

Collapse
javinpaul profile image
javinpaul Author

Thanks @Hoang

Collapse
leonardoscorza profile image
Leonardo Scorza

Great Job, congratulations :)

Collapse
javinpaul profile image
javinpaul Author

Thanks @Leonardo

Collapse
ftilu profile image
Frank

Awesome post indeed

Collapse
javinpaul profile image
Collapse
joalcava profile image
J. Alejandro Cardona

You missed C# (asp.net core) in the backend, much hotter than Java.

Collapse
wiltel492019 profile image
Wiltel492019

It's a start. There's more coming. Pick your Programming.
Wiltel49@gmail.com

Collapse
javinpaul profile image
javinpaul Author

Thanks @Marynaaa

Collapse
olgagalikua profile image
Olga Galik

thank you so much for your great insights. Btw, check out our review about frontend framework

Collapse
hrhelpboard profile image
HRhelpboard

Its hard to find best web dvelopment roadmap.
hrhelpboard.com/hr-process.htm