Complete Full Stack Web Developer Roadmap (2022 Edition)

How to be a profitable Web developer? Which technology to learn and which to avoid? In today's video, I will tell you everything related to learning web development. What to learn? What to avoid? How can you get the highest package in web development? And along with that average salary Average market salary in India. What you will learn then what will you get? I will tell you all A to Z. From start to end. Get ready to watch this video. There are many mistakes that I have done on a personal level. I want you to avoid that. So firstly, comes Point No.0 Point No.0 is our requirement. What will be the requirements If you want to be a web developer? Then you will need a laptop. Now many people say that, That we will do coding on the phone. Coding is possible on the phone also. It is good on the phone. Many people argue. But I want to tell you Web development is not possible on phone.

Because you can't properly edit your code on your phone. You won't be able to see the scenario properly. You will need a laptop. Minimum of 1GB RAM. Ok. So I will write 1 GB over here. You will need a laptop of a minimum of 1GB. After this let's talk about types of web developers. We have 3 types of web developers. One is Front-end developers. One is Backend developers. And one is Full stack developers. Ok, so these full stack developers We will talk about them also.

And I will tell you about Frontend and Backend too. So until now, we learned Frontend, backend & full stack developer 3 types of web developers are there. Front-end developer focuses on what client will see? Backend one, How to program server To see websites Works on this. Full stack developer handles both. Now I will tell you which technologies you should learn. And after then, I will tell you that, Which route you should take from these three? And which route will be highly profitable for you? Average salaries. I will tell with per technology. Now in requirement No.1, we will talk about, What will be our first requirement? HTML is a building block. I took HTML's name first over here because HTML is a building block. Go on any website you will definitely find HTML over there. Is HTML a dangerous technology? NO. HTML is very easy. And you can simply learn it by accessing my notes.

I have made some HTML notes. I have made a video also on HTML. If you just read the notes of it, And access my basic cheat sheet of HTML, You will learn it. Now many people will say, What is the difference between HTML, CSS, and javascript? How are HTML, CSS, and javascript related to each other? Firstly I will write CSS over here. Which will be our second technology. And by leaving some space I will write javascript over here. Ok To understand HTML, CSS, and Javascript, We will take an analogy.

Suppose you have a car. The car's frame which is not even colored Just iron frame. Consider it as HTML. CSS is the paint and the decoration that you have added to it. We have added mirrors and colored the car. Consider this as CSS. And javascript is the car's engine. That is the logic that tells what will happen when you what? If I give an example of a human, HTML is our skeleton. CSS will be our skin, eyes, hair Whatever things that show human beauty are those. And javascript is our brain. How we work. Our nervous system. How do we function and react? Get angry, all this is javascript. Ok HTML is a frame, CSS is beauty and javascript is logic. Ok You must have understood this thing until now. And all these 3 are on the front end. Javascript can also be on the backend. But essentially HTML, CSS, and javascript Are necessary and definitely present on the front end. HTML, How your page will look? CSS Beauty and javascript logic.

We learned about this. So if you are a person who is watching this video Who is zero in web development, Then start from here. Ok. This is absolutely easy. Easy to learn You won't have any problem while learning this. You can access my notes. I will provide a link in the description. Of my HTML course and notes. So this thing is sorted ok. HTML course and notes. Ok, you will get both things in the description. Ok, so this thing is sorted of HTML. Now let's talk about CSS. In CSS, there are many properties. Understand that From Key value pairs You will add properties per element and style them. Do you need to learn full CSS? Absolutely no dear. Learn CSS that much, That your page looks beautiful at a basic level.

Just learn that much CSS, and your work will be done. So never try to master CSS as a beginner, ok. In the future, we will definitely do it. But as beginner don't master it. Learn it one step at a time. In CSS, you need a lot of practice. With practice, I would like to mention You will get a lot of frustration. If you are learning CSS. You will have frustration because, You will say a lot of things. Why is this div not in the center? Why image is not like this? I want it like this and why is it like that? So these types of things will trouble you alot. If you will try to master CSS. So I will say learn CSS up to a level or limit as a beginner. After that, you can come on javascript. You can somewhat make your identity in web development.

After that, you can come back and master CSS. Now here I will tell you, Why is it necessary to learn the CSS framework? If you learn bootstrap, Or let us say you learn Tailwindcss. Then without learning CSS, You get the chance to copy and paste components. And because of this, you get more time to learn backend To learn full stack, to learn database. And to learn javascript. And you won't get caught up in CSS. So I will recommend you, Some CSS framework Like Bootstrap, Tailwindcss Along with tailwindcss you can use tailblocks. Now, I will tell you what is tail blocks? Tail blocks are the snippets of tailwindcss. On You can copy and paste and make good UI. There is a framework called materialize. There are many other frameworks. I won't take more framework names and confuse you. I will recommend bootstrap as a beginner you can use it. You can directly copy and paste. You will have fun creating websites. After that SAS and Post CSS functionality are added to CSS.

This means you can take CSS functionality to another level. As a beginner don't touch it. You can definitely learn it later. You can learn this both in a weekend. But initially don't fall into this. Understand somewhat CSS. And learn the framework and move forward. ok. You will learn full HTML. I also sorted CSS. You will get a CSS cheat sheet in the description. And I have made a course too. There is one video. I think it is a 6 hours course. In which we have made a Flipkart clone. So it is an important video. Definitely watch it.

Definitely access the cheat sheet. You watch it or not. In HTML, I would say there is no need to watch the video. Directly take the cheat sheet and try to understand. And if you feel you are not able to move forward, Then you can watch the HTML video. Definitely watch the CSS video. I have a very good perspective on that video. So now our CSS is also sorted.

So now I will come on Javascript. Javascript is very important. And this is miss understood. Now, Javascript is misunderstood because Many people think that, We learned arrays. What are they? We learned variables. What are they? We learned IF else, Loop. Now our work is done. This is not in javascript. In javascript, many things are not there. You people, Async, Awat, promises Fetch API, Array methods You will have to learn with basics. And in this, you will need time. Javascript is going to give you a different feel. So if you think, As you have learned Python, C, and C++, It is not like that. There is somewhat change in javascript. Javascript is such a language that if someone starts it They don't have A sync nature of it. Why is my code not working? Why this thing is printed first? Why is it printed last? I wrote this first. You get to see this type of thing. Javascript is asynchronous and it will trouble you. So I am telling you to give more time to javascript.

And I will tell one more truth over here. That web developer is hired with a good package Whose javascript is good. These two are done by everyone. I am telling you, If you are going on a position as a designer, Then CSS will give you more work. But, If standard frontend developer, backend developer Full stack developer You are going towards it, Then your javascript will be checked. And if you are not good in javascript, Then you will be rejected. Listen to this bitter truth. After this the array methods, Map, Filter, reduce You should know all these. Objected oriented programming in javascript You should it up to a certain level. And after that, your work here in javascript will be finished. Here I will tell you one thing, I am going to bring a Javascript course. If you want me to bring javascript course as soon as possible Then definitely tell me in the comment below A Javascript from starting to end With amazing projects.

Projects will be of another level. If you have seen my React course. If you haven't then watch it from the upside What type of work we have done? Next.js course is also watched. So you can see, at what level we have made websites over there We had made a full E-Commerce website. And E-commerce website means Not that I have shown something simple. No Even the smallest thing integration is done and shown to you. So if that of javascript course if you want, Then comment below and tell me. After this, once you master javascript, After that, you should move towards frameworks. Eventually to be a good web developer, You will have to do frameworks. Any person who tells you that Only this is sufficient.

A framework is a useless thing. They are useless. Here inside the framework, React, Next, Angular and Vue.js Choose one from them. You should choose it Because in today's date the speed provided by these React, Angular, and Vue.js like frameworks See all the work can be done by using these three. But, In React.js you tell that you have to do this. I will give you a good example, Consider you have a box inside it there is a text that says, Harry. Now you want to change it to Virendra.

So if you want to change the name to Virendra Then you will have to write over here You will have to do DOM manipulation, With the help of pure javascript You will have to write, document.getElementById And after that whatever is the id of that box .innerHTML= "This" Ok, If this then do this. If that then do that. You have to do these types of things. In react you directly give a command. You say set state. Change the state of this variable. Wherever that variable is used it will get updated. If you are finding this thing haunting then leave it now. Do my react course later after finishing this. I am just telling you. It is not necessary that you should react only. You can learn angular or vue.js too. But personally, I clicked with react so I worked in react. I am not saying I don't know angular or vue. I have tried both of them. But I found react best.

pexels photo 4792728

I feel that React.js and particularly next.js That makes react's functionality better. So I use that. So learn react, learn next.js You will have fun. I can't tell it in words how fun it is. How fun it is to create a website using react! But just at the start, there will be friction in learning. But before that, you have to do all these. After that you will come over here. If you want javascript course then tell below in comments. I will prioritize that course based on comments only. If there are many comments Then maybe in one week, you will start getting videos. After this, I want to tell you one more thing That design and development are not the same things. Designing is done by a designer. Which colour will look good on which colour? Should we write in yellow on red or not? Where the font size will be how much big? On what site, If images will be added will they look good or not? You should know all this.

Along with this I would like to mention one more point, The responsiveness, If you don't know what is responsiveness? Then let me tell you about the responsiveness It means on your mobile phone And on your laptop same website will work. When you will be on a small device, Then by changing its shape and size will give you some response. And if you are on big screen then it will be something different. Previously this was optional. From now around 2012 or 2011 It was optional to give responsiveness to the client. Then he use to say thank you. In today's date if you don't give responsiveness to the client Then god knows what all things he will say to you. Don't come to me after that. So responsiveness is great. I would like to give a shoutout to one technology that is "Typescript".

Maybe you won't learn this at the start. But you should know what it is. Javacript is not a type save. But if you made a variable, In that, you added string. After that, you made another variable. And in that, you added a number. Now in the one with the number you added string. And number into the one with string. Then there will be no problem with javascript. If you use Typescript Then you can catch bugs at the add of time. Because this feature, Is very useful in debugging. So Typescript is amazing but optional. After this, I would like to come into backend development. And the first option you all have is To use node.js. Along with that use MongoDB. After that use mongoose. What is a mongoose? Mongoose is a wrapper of DB. Which properly in your database Helps to create, read, delete and update. All of these 3 technologies are modern. And if you use Next.js and react.js Then you must know this step. Then you can easily switch from here to there.

If you do PHP, Then you may have a problem switching from here to here. So this was first point to be noted. The second option that I would like to give you all Is to keep everything the same. Take Django or flask. Ok, Django or flask. And keep everything else same. You can do this also, ok. You can absolutely do this. You won't need a mongoose. You will need python based ORM. Ok, So here I will write python based orm. Sometimes, you need to build such applications, Which you may want to write in python. Like machine learning or artificial intelligence Or like open cv You use any library, Then it will be easy in python. So sometimes web developers use it. So that their application becomes easy. You can definitely make APIs. You can use more than one technology. Like your full backend in Node.js But you are talking about 3 other APIs That are working separately. Complex web projects are done like this. After that, there is a Headless CMS name.

Which I am telling as an option three. Strapi and Sanity. Firstly, what is headless CMS. As you know you make APIs in backend, If you are just writing frontend by using react Then the backend's APIs It can be automatically made through a dashboard. It means you don't need to write code. Without writing any code you will get all APIs. And your backend work will get easy. If you are a front end developer And you don't have knowledge of backend, But you want to tell yourself as a full stack Or you want to make the transition towards full stack, The full stack developer is the one That sees both the backend & front end.

Front end one sees the front end. And the backend one sees the backend. But if you want to be full stack developer Then this will be the easiest route for you. Learn Headless CMS. Learn anything from strapi or sanity. I personally think strapi is good. And sanity is also good. But you should yourself see, what you like the most. I personally found strapi better. Now, what will I do over here? Here I talked about Headless CMS, Strapi & sanity. With MongoDB, you can use Redis.

What I mean is you can use Redis instead of MongoDB. Redis had in memory data store. But in today's time if w etalk about redis then, Then you can use it as a fully fledged, full stack database. So Redis is a very important database There is a Redis full stacker, Redis JSON There is RedisBloom. And you have Redis stack has many products. So you can explore Redis stack. Search on google Redis stack. You will get to see a lot of things. Redis is mainly used in real-time applications. But if you are shocked, And you thinking what all things I have told you? For future just remember the name. That you have to learn this. If you will make real-time applications in the future. Redis is a preferable database. Even MongoDB can be used. But Redis is preferred more. Now there are many options like you can use PHP, Ruby In java, you can use Spring boot. You can use these options too. Now quickly let's talk about salary. If I talk about option number one, then in this Here you get a Higher salary. And you can get a job very easily.

The average salary package is 11 LPA. And here if we talk about option two, Then here the average salary package is 8-11 LPA. From 8-11 LPA. And the data over here, I don't have this because there are not many jobs in India. Here you can get a very good freelancing income. Easily by work and give it. And ease of freelancing is very good over here I can say that. Now let's talk about option number 4 over here. It's average salary package, It is from 7-10 LPA. Ok Again this is India's data.

And in India, you know, Web developers earn more and sometimes even less. Web developers earn 50 LPA. Web developers also earn 5LPA. What thing separates, Developers who earn 5LPA to developers who earn 50 LPA I will tell you this. You will all these things ok. But do you know, who will move forward? The one who comes to the solution will move forward. The one who will solve the problems. If you are such a person, Do this in javascript and give me. You gave it without questioning, Why should I do this? What is the benefit? What problem is solved? If you will become a problem solver, Then you will earn more money.

Before going I want to give you some more tips. So that you can become profitable in web development field. The first tip that I would like to give is Make as many projects as you can. Do project based learning. The less projects you make and more theory you learn The more you will go in tutorial help. I want you to make projects by yourself. And innovative things with your mind. The second tip that I would like to give is Keep growing. Technologies keep on changing from time to time. Maybe this video won't be relevant after 5-6 years. All the things that I told maybe that get replaced.

You must be capable enough Adapt yourself in such a way Even if things change then too you are ready. Then too you are standing strong. You should not be sleeping. It shouldn't be like you learnt this thing, After that, you did not learn anything new. And 6 years you are found sleeping or fallen. I don't know anything. All the technologies are replaced. The third tip that I will give is Javascript. Javascript is Is the highlight of this full web development in today's time.

It is evolving. The more good the javascript is The more good web development will be in today's date. I will tell you this also, After that master a framework. And mastering means does not means making 2-3 simple apps Mastering means, If someone says name of any feature to you This can happen or not? If it can happen then you will know it will happen. And if won't happen then you can tell that, This thing can't happen in this framework confidently. You have to master the framework just this much. Maximum 10-50 project when you will make from a framework, Make some serious.Start with some basics. Go to a medium project and after mastering it, And later make a deadly project By seeing which people say wow.

So I hope you liked this video. If you liked it do tell me in the comments. If you want to add anything, Definitely tell me in the comment section. Many people will ask me about more databases Why did I not take the names of PostgreSQL, MySQL Obviously, these are very good relational databases. But if you are a beginner, I will recommend you MongoDB. I will recommend you Redis. It may get difficult to learn Redis. But if you are using PHP, then definitely use MySQL Because PHP and MySQL are a very good combination. And you can see many resources. For now, Only this much for the video.

Thank you so many guys for watching this video. And I will see you next time..

As found on YouTube

You May Also Like