How to Become a Full Stack Web Developer | Complete Roadmap

"Music" Guys! When I started my web development journey I asked people that how do we learn this web development. And the answers I got that learn Angular, Veu or learn this or learn that. After listening to the names of so many technologies my mind blowed up. And today also many people ask me about where to start from. So this video will guide you that what shall be your strategy I have made a whole list and I'll tell about bucket technique. There is one bucket technique that I used to master web development and you guys can also use. We will talk about all this in a second but first I will talk about the basics of Web development.

So first of all what are the basics of web development? What are the things you need to learn? OK and after telling about this I'll tell you guys a shortcut. And that shortcut is gonna be amazing but at the same time this is also important. So first let's discuss it as it is more important So to make any website you need to use HTML, CSS and JS. and you guys have heard of it before also as this is not a new thing you are hearing for the first time and even if you are hearing it for the first time then no problem. I'll tell you about all this This is the skeleton of any website By skeleton I mean that if you are driving a car then the body of the car without engine, colour, design is the HTML and after that you decorated the car with some colour it's like that you designed the car with CSS You improved the wheels, you coloured it's body You all can do this with CSS.

After that JavaScript What is this JavaScript? That what will happen when we click on a specific button. It's engine and all the programming of the car is the JS It's the same in a website HTML is where the button should be Imagine that this is my website So if there shall be an image here or not Button should be here, all this is managed by HTML. In HTML you need to specify where button or text should be here a paragraph shall start, there is an heading and all this With the help of CSS you will specify where an item will be, how much gap there must be or what shall be the size of this image If I minimize the video then what it should look like.

There is something like Media Query with which we do it. But I won't go in detail of CSS. Here, it is important for you to understand that HTML is the skeleton. What is CSS? CSS is used for designing and JavaScript for logic. We have covered this and this is the very basic. But what if in HTML,CSS and JavaScript Imagine we are reading it in this order So what if we stuck somewhere? Can we master everything 100%? Would it be ideal? NO! This is where we'll use our Bucket Technique which I designed for you guys. What is this Bucket Technique? I'll say you make a bucket out of your Web Development. What will you make? Make a bucket. Out of your web development knowledge.OK Listen it carefully and what you guys do learn HTM 80% and now you'll ask why not learn it 100% as HTML is very easy.

There are some things in HTML which are very complicated like Canvas.OK So I'll say learn HTML 80% and what should we cover in this 80%? How to find that? I'll tell you about that also. But for now just understand that we need to learn 80% HTML What we'll learn in this 80%? I'll tell you later. Now we'll just focus on 80% HTML. We won't master complete HTML. We'll just learn 80% I think no one would tell you like that? I am telling you based on my experience. If you guys want to make websites asap and optimize your web development career. Then you have to do it. If you do something else maybe you'll reach your destination but this is the first way Remember this thing. I'll talk about CSS. For CSS I have written this 60. Now you'll ask why should I learn only 60%? Why not 100%? I'll come to that also.60% I'll write JavaScript also. BTW JavaScript is a programming language.

So if you haven't studied any programming language in computer science then you will start your programming journey from here. Now why is this 80,60,50? Why not 100,100,100? It looks good to hear 100,100,100 but if you go for 100,100,100 then it will blow your mind. If you got stuck in CSS. Even if you think that you have completely mastered HTML which maybe you haven't. All those people who say I know HTML completely may also don't know some of the concept of HTML like Canvas and there are many more which they don't know.

I'll say just learn HTML that much that you can make the layout of the webpage. We are not talking about Canvas. You need to learn only that much that you can see like a button in a website You can see a heading in a website. You can also see a paragraph and there are many more things. OK. These are the things you need to learn and, focus that you can learn most of it as it is very easy.

OK. CSS is the point where people get stuck and if you have started web development and stopped then you know what I am talking about. You need to learn that much CSS that you can colour an image that you can work on background,borders and you can give padding and margin. Learn ID, class ID, then Class, then Margin, Padding and I just want to say that don't hesitate to skip the complicated part of CSS. But I am not saying that skip it for your whole life. You'll come to it also. For now you just need to learn 60% of CSS and with 60% CSS you'll be able to design a webpage. OK. You'll be able to. You'll be able to design a webpage. After this you need to learn 50% JavaScript.

Now you'll say ONLY 50% NO! 50% JavaScript is also very hard. JavaScript has very complicated concepts. JavaScript has Promises concept. JavaScript has Object Oriented Programming. There are Promises, Callbacks in JS. After that, there are many concepts which are complicated for beginners. By saying complicated I don't mean to say that you won't be able to do it. They will be complicated for a beginner. So I'll say by learning Variables, Constants, Functions, While Loop, If Else and all this you'll complete 50% JavaScript. That I know JavaScript At this point you know HTML, CSS and JS Now what do you need to add in your bucket? Projects OK. You need to add projects. And whenever you think you are not able to do something then you have to come back.

Are you getting what I am telling. You have to come back. And revise your concepts but before coming back you need to make at least 2 or 4 projects. And maybe you might learn something while making the projects. So you need to learn HTML, CSS and JS like this. It should not be like that you picked up this thick book of HTML, this thick book of CSS and this thick book of JS. And you are found after two days saying "I won't be able to do it." If you do it like that you won't be able to do it because it will take a lot of time and no one has that much patience.

And I am assuming that if you want to become a web developer than you must have some other full time work either you're a student or are in a job. So obviously you won't be able to give it your 100% time. We are talking about most of the people there might be some exceptions. So here you have learned front-end like this Now I'll tell you one more thing that we have some shortcuts. What are these shortcuts? These shortcuts are BootStraps, TailWind CSS What are these things? They are the frameworks of CSS These frameworks of CSS are some ID's and classes written by someone else for your use to make awesome websites.

This might sound good that someone else has already made it. I'll use his button, his border and his designs component-wise in my website. But what if a designer ask you to make a button like this. Then you won't be able to make it directly using this. You should know CSS. Like if you want to create a circular or elliptical button, then you won't be able to do it in Bootstrap as of now. So if you want a very wide elliptical button and you want to specify how much wide it should be then you won't be able to do it and it will be very hard for you to customize it. And if someone asks you to add black border inside, and green border inside that Then you will be able to make it with CSS but not with Bootstrap, Tailwind. These shortcuts are for those who don't want to become a successful web developer but want to be a part time developer.

Like my Primary job is something else and I'll be able to do web development with the help of these. And I don't call them web developer. And they are not even called web developers. A web developer must know these three basic skills . So what are these frameworks? These VueJs, React, Angular. I'll talk about all these But before that I'll tell you one more thing. That if you want to become a successful web developer then don't take this path. Let me erase it that you don't need to take this path. It is not something you need to go after. You don't need to take this path. You need to become a successful web developer. Now I'll tell you how a website works? This is your web server and here is the client.

And there can be any no. of clients. That means these are a lot of people requesting this website. Imagine this is and the server of this site will give them response index.html Now this Index.html would have all HTML, CSS, JS code compiled. And the server will send it and the browser will parse it. That means when you say give me When you say this to the server then the server gives you some response in return. That means you get a response in return.

When you get a response then your browser will parse it. How did this generated? This is generated by your backend. Maybe it would bring a post from the database of HTML. For example, if you are viewing a HTML page which has blog posts or comments. So your backend has to read from the database or any file then it need to generate this. Combination of HTML, CSS and JS which would be sent to the client. This is the client who is using this computer. This person is the client. Now this client wants to use this website. So whatever request he sends, the server will send him the response. And how the server will generate the response is the work of the backend. So what is the backend? That what response to send to which request is decided by the backend. And how will it do it? It will query something from the database .

For example, it may query a blog post. It may even query an image and send it to you by embedding in HTML. So all this work is done by your backend. Now the biggest question is which backend language do we need to learn? So now I'll quickly write "Which Backend?" OK. So we have a lot of options in Backend and I am not telling that you need to learn only this and avoid other languages. But if you are an absolute beginner I'll recommend this which most people say "It's useless". And I'll justify why I am recommending this. I recommend PHP for a beginner. From my point of view, if you guys learn PHP then you'll understand how this frontend and backend work. And if you guys understand this then you'll understand the complete workflow. And after that switch to a different backend. This complete process becomes simple for you.

What are its pros? These are its pros that it's easy to learn and best for beginners. But its libraries have limited support. For example, doing machine learning in PHP is not a good idea. You'll be able to do it and you can implement all the algorithms. But you should use Python as it already has some amazing projects like TensorFlow ,SciKit Learn for Machine Learning. For that reason you shall avoid PHP for machine learning. The if-else and while syntax of PHP are closely related to JS. So if you guys already know JS then it would be easy for you to learn PHP. The second language which I'll suggest is Node JS.

And I have used this language only in my web development course. I'll suggest this as you guys already know JavaScript. And it has a con that it has some complicated concepts of JavaScript which we have talked about here that learn 50% JS. So you'll need to learn the remaining 50% JavaScript. If you're using JavaScript as a backend. And how to run Node JS in your computer is also complicated for some students who have just started. And they don't know how to operate a computer. They don't know about it deeply. I am talking from software perspective. I'm not talking about computer typing. Then what I'll do is recommend these two languages. And if you ask for the third one than it's Python. But it will take time as first you'll learn Python and then Django or Flask, these are two frameworks.

You can use them in backend. These are backend frameworks. You can use Django or Flask in backend. If you use Node JS then most probably you'll use Express. But if your mind blowed up after listening this than just focus on this PHP. Just focus on learning PHP and make at least 5 websites with content form. And not to mention if you use database then have MySQL with PHP. Use MongoDB with NodeJS. And if you're using Python than use SQLite as Django has it by default. So you don't need to do anything. Now it's not like that you need to use these databases only but for a beginner these are my recommendations. So you can use backend like this. Let me check if I have not missed out any point. And now I am gonna talk about the things I won't recommend. Not recommended. It's important to know what we have to do but knowing what not to do is more important.

Don't look at frameworks. That means don't think of using frameworks of JS as a beginner. I am not saying that never to learn them. When you need to learn them? I'll talk about it also. But for now you don't need to learn frameworks of JS like Angular,Vue,React. OK. After that you don't need to look at website builders. We have Wix, GoDaddy website builder and these all. You don't need to look at these. You guys should not install 3rd party JS libraries as a beginner. I am not saying that never install them or never work on it but as a beginner don't use JQuery or other. Let me write JS libraries. You don't need to use these three things as a beginner. I am not saying they are useless. These are very amazing things but as a beginner avoid it. You guys have a very simple roadmap : HTML, CSS and JS.

You don't need to learn this completely either. Here I have simplified your work. 80%,60% and 50%. Then make some projects. And make static websites. Which doesn't have backend is static while which has backend is dynamic. It's a simple concept. Don't get confused. First make a static website. In which you'll be making websites on your computer with designs. And after that, with the help of PHP and MYSQL. These are awesome API's. I have uploaded a course of PHP. Let's now talk about resources. I also want to talk about resources. That where you have to learn from. But before that I want to talk about one more thing. Many people tell me that the websites we create are not that good. Than I want to tell you that web designing is one thing and developing is another thing.

If you have good graphic designing skills than you can DESIGN beautiful websites. And by design I mean that you can draw good layouts. I recommend that you try to mimic websites which are already there on the net. I am not talking about copying it but taking inspiration and try to make different components like that so that you become a good designer. So this is the designing part. Designing is a different skill and not related to programming, web developing. If you're a good designer then you know what pleases the eyes, which colour combination looks beautiful.

It's a totally different skill. And most people take a lot of time to understand this but you should clear this point fast. Let's move forward and look at resources. So to learn HTML I have already made a video. "HTML in one video" I don't want it to be unreadable. Let me write the resources here. The first resource I told you is "HTML in one video" In that I have covered that much HTML you need to know.

Now you'll ask is it 100% HTML? NO! It's 80%. That much you need. So you know that from where you need to learn 80% HTML. I will give you a pdf which will have all the links. So don't take tension. I created this pdf for you guys only. After that the second resource is a website: It's an explosive website. When you'll open it, you'll be amazed. OK. I won't talk much about it. You'll just get different components of HTML. And you'll get a lot of amazing components. So it will make your life easy. After that you can check my complete web development course which is available on youtube. In that video I have talked about all this which I told you. I took the Node JS route.

Full end to end with hosting. So if you guys watch that than you'll cover all this automatically, But if you want to use PHP in your backend not Node JS then it will be pretty easy for you. It would be easier than Node JS. People think that Node JS has JavaScript so it would be easy but it's not the case.

That's the reason PHP is popular. If you guys are using PHP then I have made a one video on PHP and a complete course. Let me tell you the difference between them. "One video of PHP" plus full course. If you want to learn PHP quickly and only in one video with important poins only and if you think that google search, stack overflow and a 3 hour video will be enough for you to learn PHP then use this one video.

But if you want a step by step walkthrough as you are a beginner than access the course's playlist. Both the links are in the pdf. Like this video or don't but please download the pdf. As I put in a lot of hard work to make it for you guys. You'll get all the links in description. Before you open the pdf just listen to what I'm saying. Because if you don't listen to me you won't be able to do it very well.

The 5th resource is CodePen. There is a website named CodePen where you can search for projects. There you can search for any project.Like you may search a project for image animation. If you search image animation in CodePen, you'll get alot of results on that. You guys should try CodePen. If you search on CodePen then you will get a lot of projects. So this is one of your project source. Another project source is an HTML, CSS and JS project playlist created by me .

"HTML, CSS, JavaScript Projects" And this is a different playlist. It's not like that this playlist is in this course. This course also has some projects. This complete web development course. But here I have created some amazing projects like moving car animation, a game. And I have shown you how to make an alarm clock. Sorry, its an analog clock not alarm clock that goes tik-tik. So after watching this your work will be finished. After that we have some tools which every web developer must learn. Let me tell you about them quickly. I have already mentioned them in the playlist. I'll read them out one-by-one. So there is a website called UXWing which I use to download icons.

Whenever you need icons you can go there and download it. After that we have a website called Pixabay where you can find amazing HD Images like scenery or a gym photo if you're making a website for a gym, pictures of kitchen or food.You may find them there. Than we have a website named FreeHTML5 where you can find pre-build websites. If you don't want to copy than just take inspiration from them and do development on your own just like I talked about design. After that we have a website named Unsplash. And it provides API's of images to you. With the help of Unsplash and using some certain keywords, you may find some images from the database of Unsplash. And I have used all these resources in my complete web development course. So you'll find them there. After that we have a fake REST API called JSONPlaceholder.

Which is an amazing API. After that I have linked a GitHub repository. In it you'll find some more resources. But there are a lot of resources so take it with a pinch of salt. And I have put the important resources in this PDF. I hope you have received enough material to learn web development. Now you guys have to start.

I have already created the resources. A lot of web development masala is uploaded by me on the channel. And how you guys have to use it? I have already told you that in this video. I hope this video was helpful for you. If it was helpful then smash that like button. And with that access the web development playlist. I think this is the best way. You can learn frontend from this. And if you want to learn PHP than switch here.

I hope the things are clear. Now if I want to talk about the framework. So I'll make a video about it later on. That after doing all this, how to switch to frameworks? How you guys can use all these frameworks like Angular, VueJS, React? But according to me you should know the basic web development even if you want to use these web frameworks. So I hope you guys enjoyed this video. Thank you so much guys for watching this video. And I'll see you next time.