Fastest way to become a Web Developer in 2024

for every web developer who has a job there are at least 10 who are stuck in the endless loop of learning HTML CSS and JavaScript again and again that's because people underestimate what it takes to become an employable web developer on this path there are so many different Technologies to learn that many people give up Midway this video will make sure that you are not one of them I'll also cover three mistakes that you need to avoid at any cost let's get started web development contains two parts front-end development and backend development front-end developers program the feel and behavior of a website this is what a user actually experiences when they visit a website backend developers make this Behavior possible they do some things behind the scene that users don't get to see think of it this way when you go to a restaurant you just experience the dining area the tables chairs menu and the overall Ambiance that's your front end now back end would be the kitchen of the restaurant it's where all the behind thes scenes action happens ingredient preparation cooking and Order fulfillment all of that happens in the kitchen in a restaurant we also have a server what would be the equalent of a server in the web development world if you're thinking that the answer is a web server that is not correct I'll answer this when I cover backend development in detail but if you think you know the answer leave a comment anyway let's start with front-end development HTML CSS and JavaScript are the building blocks of front- end development to understand what each one of them exactly does let's imagine that you are building a house HTML would be the blueprint of this house what are the different rooms in the house how many bathrooms will be there all of that is HTML for example on YouTube HTML is what decides that there will be a like And subscribe button here CSS is like an interior designer that decides what your rooms look like for YouTube it decides the shape color and size of the Subscribe and like button when you hit the Subscribe button the color of the button changes that's also CSS doing its magic JavaScript is like an electrician that installs smart home features in your house in the YouTube example when you hit the Subscribe button JavaScript sends a request to YouTube servers to update the subscriptions of my channel YouTube servers will store this information and use it to recommend my next videos to you now that you understand the basics let's see how we can learn HTML CSS and JavaScript and this is where most people make their first big mistake they spend months sometimes even Years Learning HTML CSS in JavaScript don't get me wrong I'm not saying that Basics are not important but the basics are just the starting point there are a whole lot of other technologies that you need to learn in order to become an employable web developer so I would not spend too much time here I'll just learn the top 20% Concepts that cover the 80% of use cases I'll learn the remaining Concepts in the next steps to learn and test my knowledge at the same time I'll go to W3 schools for HTML I'll start from the top and do everything until HTML graphics for CSS I'll do everything until CSS grid for JavaScript I'll cover everything until JS HTML Dom I will add all the links to the resources in the description congratulations you have covered 15% of what needs to be done to become a web developer let's keep going when you start working with CSS you'll see that same things repeat again and again you'll set height add padding and fix alignment of different objects and so on and when you do this for so many objects in your web app your CSS files start becoming very big and hard to manage on top of that debugging becomes a huge pain because there is so much repeated code to solve all these problems you would want to learn a CSS framework now there are so many different Frameworks that you can choose from different people prefer different Frameworks for different reasons my reason is very straight forward I would choose a framework that is easiest to learn once I know the basics of CSS I want to be productive as fast as possible if you're someone like me you would go for Tailwind CSS Tailwind is a utility first framework in other words Tailwind already has all the repeated code pre-written you just need to go to your HTML elements and use it this makes Tailwind very easy to pick for beginners to learn Tailwind quickly you can go to the Tailwind playground and play around with the code you can read their beautifully written documentation and test what you are learning in the playground if you already know HTML and CSS they should be fairly straightforward if you need more help you can also check out the official YouTube channel of Tailwind Labs we have covered another 5% with Tailwind let's move on to the JavaScript framework now just like CSS Frameworks we also have JavaScript Frameworks to make our life easy there are again many popular options here but we will only talk about the most popular option which is react technically react is not a framework it's a library but that's not important for now react makes building user interfac is more manageable by breaking them into small reusable components react has a virtual Dom that allows it to update only part of the web page rather than rendering the entire thing if you don't know what that means don't worry about it you will learn as you go but why did I pick react over all these other options my reason Remains the Same I want you to get to a stage where you are building your own projects really fast and react is among the easiest to learn and most in demand at the same time so how do we learn react effectively the official react documentation has has made it very easy for us they have a quick start guide which according to them covers 80% of the react Concepts this guide also contains a walkthrough of how to build Tic Tac Toe in react and they also teach you how to think in react there's a learn react section that I highly recommend you go through but if you're are short on time you can move on to the next step with react Basics you have covered another 10% so far you have just learned the basics of a few Technologies but learning Technologies and actually applying them to solve new problems are two different things and that's the we are going to bridge now with everything that you have learned so far if I give you a new web app to build most people are going to struggle with it and that's totally fine struggle is where you actually learn so if you're someone who enjoys the struggle more power to you please go ahead and start building because that's how you learn the most but for others who need a little bit of handholding in the beginning I have a recommendation for you you can start following along with someone who's building a real world application on YouTube you'll find many people building clones of popular applications like Amazon or Netflix my personal favorite is his channel by Sony S his videos will introduce you to popular patterns in react he also covers some new technologies like nextjs nextjs is a react framework that enables extra features like server site rendering if you know react nextjs is very easy to pick if you do all this you will cover another 10% of your web development Journey like I mentioned earlier true learning will only happen if you start building new things by yourself building your own projects would be the next 20% of your journey but what should you actually build I recommend that you build a basic version of Instagram app don't worry about videos or reals for now just build a version where people can share their photos and see a news feed containing pictures of their friends you can also add functionality to like photos and add comments showing pictures from friends might not be possible right now because we have not covered backend yet you can use some hardcoded URLs for now after learning the back end we'll come back to this project and build the back end as well congratulations you have successfully completed the front-end part of the web development it's time to move on to the back end this is where people make their second biggest mistake which is that they fall victim to the buzz around full stack development for those who don't Know full stack developers work both on front end as well as the back end now I'm not saying that you should not become a full stack developer full stack is a great end goal the point I'm trying to make is that you don't have to be a full stack developer to find your first job front-end development is enough there are many jobs for front-end developers so I recommend that you don't rush into the backend development test yourself early in the job market to see where you stand and you can continue learning back end on the side for the backend we'll again pick something that is easy to learn we already know JavaScript so the easiest thing to do would be to use JavaScript in the back end as well JavaScript was designed to be a scripting language for web browsers to be able to run JavaScript on the server or backend we need to use nodejs nodejs is a JavaScript runtime for servers if you don't understand what I'm saying that's completely fine you will learn all this when you start working with node now similar to front end we need a JavaScript framework for the the back end as well Express provides you all the tools you need to build apis remember in the beginning of the video we talked about how dining area is the front end and the kitchen is the back end of a restaurant an API would be the equalent of the server of the restaurant basically you place all your orders or requests with the API and the API responds to you with the information you need an API does this with the help of the data stored in a database so in addition to express you need to use a library like to talk to the database is a nodejs library for mongod DB which is a popular database I know all this sounds confusing but it's not that hard when you start using it to get acquainted with Express you can quickly go through their documentation but to actually learn Express and you can follow along with this video by traversy media and create a web app from scratch I recommend directly by building because if you have come so far you already know enough programming to pick Express easily with this project and if you finished this step you would have already covered another 20% of the journey now you are on the last leg you need one final push and that would come by building building the back end of the Instagram project that you started add the capability to upload photos and follow each other by storing all the required information in a database create a news feed that contains actual photos of your friend and not the dummy data once you do that you will finish the last mile of the journey and this brings me to the final big mistake many people make they don't trust the process they start this long journey of learning web development they copy a few projects on the way and add them to their resume eventually they are not able to find the job and they give up every step of the journey is important important so don't skip any step and Trust the process it might take you slightly longer but you'll eventually get there now I did not get a chance to cover how to prepare for coding interviews in this video if you're interested you can watch this video my name is sahil and I'll see you in the next one

Channel: Sahil & Sarra

Views: 185,752

Keywords: html, css, javascript, front end developer, back end, full stack developer, react, tailwind css, express, mongodb react, software engineering, coding, programming, web development, backend web development, front end web development

Id: NWnBxQjssvQ

Length: 9min 47sec (587 seconds)

Published: Sat Jan 20 2024