DEV Community

Saif Ullah Usmani
Saif Ullah Usmani

Posted on • Edited on

Complete Web Development Roadmap.

Hi, my name is Saifullah Usmani. I am a Full Stack Python Web Developer. I have been into programming since 2017.
matt-duncan-IUY_3DvM__w-unsplash (2) (1)

Why do you need a roadmap:

Roadmap is like a known road to your destination. And when you know the route to destination, reaching there gets so much easier.

Type of Web developers:

There are three types of web developers:
->Frontend Developers
->Backend Developers
->Full Stack Web Developers

Frontend Developers:
The work of Frontend Developers is the first thing users see when they visit the website. Frontend Developers code the design of the websites using frontend technologies. An Example of website design:
Alt Text

Backend Developers:
The work of Backend Developers is usually not shown to users directly. Users often overlook or don't realize the work of Backend Developers but every action they perform by clicking a button, the logic of that button is coded by Backend Developers. An example of Backend Developer's work(It is an API):
Alt Text

Full Stack Web Developers:
Full Stack Web Developers are the real masters of web development. They know both Frontend and Backend, Which makes them a One Man Army. They can come up with an idea and fulfil it without any help. That is why they are paid double than a frontend/backend developer. Frontend & backend developer salaries are almost same.

Roadmap for each type of developers:

In the roadmap I will provide you the technologies and option you have in each field(frontend, backend, full-stack).

Roadmap for Frontend Developers:
Every Web Developer must have a basic understanding of HTML, CSS, and JavaScript. And As a Frontend Developer these 3 languages are your weapon. Master these and you are good to go.

But as the technology grow new tool comes out to stay updated. Likewise Frontend Development is also coming up with new tools that are a must for you to learn as a frontend developer.

Libraries/tools/skills For Frontend Developers:
As javascript is growing and evolving rapidly likewise new tools are getting popular. These are most common and popular libraries and tools for Frontend Developers:
-Bootstrap / Material Design / Tailwind CSS
-React.JS / Vue.js / Angular / Next.JS
-Typescript
-React Native (if you are interested in cross-platform development)
-jQuery
-Responsive Design
-Version Control/Git
-Browser Developer Tools
-Web Performance
-SEO-optimized design
-UI, UX
-How to Host your frontend code and attach a domain

Being good in javascript is necessary as a Frontend Developer.
There are other options too which are well explained in this roadmap but those which I mentioned are in-demand in 2021:
Frontend roadmap
Chart created by GitHub user Kamranahmedse:
https://github.com/kamranahmedse

Roadmap for Backend Developers:
As Backend Developers control the logic and flow of the websites they must know some programming languages and query languages to control them.

Programming Languages for Backend Developers:
-PHP
-Python
-NodeJS
-C#(ASP)
-Ruby
-SQL
-MongoDB

There are other options too which are well explained in this roadmap but those which I mentioned are in-demand in 2021:
Backend roadmap
Chart created by GitHub user Kamranahmedse:
https://github.com/kamranahmedse

Roadmap for for Full Stack Developers:
Full Stack Developers are those who manage both frontend and backend. Not only that, they are also good in problem solving and they create scalable, fast and maintainable solutions for big projects.
They maintain everything from creation to deployment.

Programming languages for Full Stack Developers:
Programming languages for Full Stack Developers are categorized in "Tech stacks" for different tasks. That is why one Full Stack Developer must know at least one tech stack(learning more than one tech stack is a plus).

Tech Stack for Full Stack Developers:
As there are so many languages and tools for Full Stack web development i.e:
PHP, ASP, C++, C#, Java, Python, Node.js, Express.js, Ruby, REST, GO, SQL, MongoDB, API, Firebase.com, tailwind CSS, Sass, Less, Parse.com, PaaS (Azure and Heroku), Bootstrap, W3.CSS, JavaScript, ES5, HTML DOM, JSON, XML, jQuery, axios, chart.js, Angular, React, Backbone.js, Ember.js, Redux, Storybook, GraphQL, Meteor.js, Grunt, Gulp and more.....
That is why some standard tech stacks are made for specific tasks.

Most Popular Tech Stacks Are:

Django stack: JavaScript(frontend usually Reactjs) - Python (Backend framework usually Django) - MySQL - Nginx/Apache

MERN stack: MongoDB - Express - ReactJS - Nginx/Apache

LAMP stack: Linux - Apache - MySQL - PHP

.NET/C# stack: JavaScript/Typescript - Linux/Nginx - MySQL/PostgreSQL - ASP.net

LEMP stack: Linux - Nginx - MySQL - PHP

MEAN stack: MongoDB - Express - AngularJS - Node.js

MEVN stack: MongoDB - Express - VueJS - Node.js

Ruby on Rails: Ruby - SQLite - Ruby on Rails

My Advice:

After you have read the whole article, you must be able to select between frontend, backend or full stack web development.
But the choice of learning which programming language or tech stack will be a hurdle for you for a bit. That is why I recommend you to understand the Purpose of each Programming Language First. And then check what kind of project you want to make and then analyze which programming language is suitable for that kind of project.

DigitalOcean Referral Badge
Affiliate Link☝

Follow me:

Hire me: https://www.fiverr.com/saifullah02 (For web development Purposes)
My New Blog: saifullahusmani.com
Follow me here: https://dev.to/saifullahusmani
YouTube: http://bit.ly/saifullahusmani (Programming Tutorials Coming Soon).
Discord: https://discord.gg/AKyvy8Y
Facebook: https://www.facebook.com/SaifullahUsmani693

Top comments (12)

Collapse
 
cjsmocjsmo profile image
Charlie J Smotherman

Sooooo many stacks and not enough time.

Currently use Svelte, go and mongo wrapped up in a docker container.

Exploring flutter, go and mongo. The idea of write once, then build out to any one of the major platforms ( to include the web) I find interesting and possibly very useful.

Collapse
 
saifullahusmani profile image
Saif Ullah Usmani

@cjsmocjsmo
Yeah.
I also find Svelte very usefull I have plan to learn it in august.
Use of svelte, go and mongo wrapped up in a docker container seems good.
It's great that you shared your stack with us. Flutter is great.
The idea of write once, then build out to any one of the major platforms ( to include the web) I also find it very interesting and useful.
Thanks for the feedback Charlie J Smotherman.

Collapse
 
pkwieci1 profile image
pkwieci1

What about the Typescript + ASP.NET Core + Nginx + Linux + PostgreSQL stack? It's what I find myself currently in and I'd highly recommend it, but it'd be nice to hear others' opinions 😀

Collapse
 
saifullahusmani profile image
Saif Ullah Usmani

@pkwieci1 It is really great that you shared your tech stack it will allow people to discover more possibilities. Thanks for sharing your stack too.
C# is definitely growing rapidly and ASP.net is definitely an option. And Typescript is growing and has been picken up by the tech industries so it is a good combination.
I liked your stack. After a bit more research on that I will surely add content about it in this blog post. Thanks pkwieci1.

Collapse
 
pkwieci1 profile image
pkwieci1

You're welcome, glad to hear that it helped you! Have a nice day 😊

Thread Thread
 
saifullahusmani profile image
Saif Ullah Usmani

Thanks😊

Collapse
 
gmarokov profile image
Georgi Marokov • Edited

Nice article, thanks! But I don't think any of these paths have a finish line, because once you stop learning, you start becoming obsolete.

Collapse
 
saifullahusmani profile image
Saif Ullah Usmani

@gmarokov Thanks. Yeah you are right Georgi Marokov. Tech is evolving not yearly not monthly not weekly but daily. The technology we learn today will be obsolete or decrease it's popularity in the coming decade or 5 years. Being programmer means that you commit to learn everyday.
By the way Thanks for the feedback, it really means a lot.

Collapse
 
thecodealchemist profile image
Nyasha Chiroro

I think FastAPI is a good option for async python frameworks

Collapse
 
saifullahusmani profile image
Saif Ullah Usmani

@thecodealchemist You are right Nyasha Chiroro. FastAPI is indeed a good option for asynchronous python.
Thanks for the feedback.

Collapse
 
talha_khan74 profile image
Talha Shinwari

How and where we can use C++ for back-end development?

Collapse
 
saifullahusmani profile image
Saif Ullah Usmani

I will cover that in my post in couple of days after good amount of research.