NEW!! Web Developer Roadmap 2022 | Ultimate Guide To Starting A Career In Web Development

do you want to become a full stack web developer in 2022 the demand for programmers is crazy right now if you're wondering if it's too late for you to get started no it's not too late let me show you what you need to do [Music] in last year's roadmap i had a crazy spaghetti diagram of hundreds of technologies and explained how they are all related but i think that this just overwhelmed and confused people so this year i'm going to stick to a roadmap of the core essentials that you need to learn in order to become a full stack web developer in 2022 and then after that i'll talk about a few technologies that are optional extracurricular that you might want to look into after you've learned the basics not only am i going to give you this roadmap but i've also created a list of resources for each technology that will get you started learning each one and i'm going to provide that to you for free so i'm going to be referring to a ton of resources throughout this video and i have all of them consolidated into a list for you linked in the description below i want to be clear though that you don't need to learn every technology out there the best way to pick a technology is to look at the market the companies that you want to work for and see what technologies they use and then learn those languages the great thing is that once you've learned one programming language it's pretty easy to pick up another one quick disclaimer i'm not going to cover every technology out there if there is anything that i leave out it's not because that it's not good there is a great use case for every tech but i'm going to focus on the ones that i think will be great to know in 2022 so let's get into it before you even get started learning web development you need to know that the best skill for any developer to master is googling google is a developer's best friend when you don't know how to fix an issue or you need to learn how to accomplish a specific task the first thing that you should do is google it try to find the answer to your question on your own do some research especially when learning a new technology the documentation for that tech will most likely answer all of your questions if you do need to reach out to the community for help be very detailed in what your issue is and what you've already tried and searched for now get really good at googling even the most experienced developer can't remember everything the first thing that you should understand if you're just getting started is how the internet works you need a basic understanding of how browsers domain names hosting services http https and dns works and i have a couple of great resources that will help you understand these concepts next you'll need to set up your basic tools in web development the main tools are your browser code editor and terminal so for the browser these are very important for web developers they are how your end user will view your applications i prefer to use a chromium based browser as my main browser i use microsoft edge specifically but chrome and brave are other chromium based browsers that are great but when it comes to testing your websites and web apps you need to test with all of the major browsers to ensure that your application will work properly in all of them now currently i test every project in chrome edge safari and firefox to make sure that it looks good and works in all of them the text editor is a web developer's best friend the better you understand what it's capable of the more efficiently accurately and quickly you're going to be able to write code now my favorite code editor is vs code it's the most popular for the vast majority of developers and i have tons of resources on my youtube channel that can help you install configure and become familiar with vs code if you really want to become a pro in vs code i even have an entire course that will help you become a vs code superhero now next you'll need to get used to using the terminal or command line now some are scared of it but i promise it's not that bad now there are many options for a terminal every operating system comes with one windows actually comes with two the command prompt and powershell and you can also use the windows subsystem for linux or wsl which gives you a linux shell on windows another option and this is the one that i use is git bash now if you're on mac os or linux i'd recommend zsh and i'll provide links to all of those after you get your local environment set up it's time to start coding the first things that you should learn are html css and javascript html provides structure to a website css makes it look good and javascript makes things happen so the first thing to learn is html every web page uses html it's the main building blocks for the web html provides the structure of a website but it's actually not a programming language it's a markup language you'll need to learn the basic syntax symantec html forms and validation accessibility seo and best practices i have a bunch of resources for you to learn all of that css is another important part of every website it makes them look good by styling the html elements and it adds flair with transitions and animations now there is a lot to css and if you're going to focus on front-end development it's very important that you understand css fully after learning the basics you'll want to learn the layout features flexbox and css grid after that be sure to get comfortable with responsive design including rim units viewport settings fluid widths and media queries and then there's css frameworks and some people just skip over the css basics and go straight to a framework and that's not really good you need to have a solid understanding of css before learning a css framework so i wouldn't suggest looking into any css frameworks at this time but they are included later in the roadmap now javascript is the first programming language that you're going to learn as a developer html is a markup language css is a styling language and javascript is actually a programming language it makes the website do things so you'll need to learn the basic syntax dom manipulation the fetch api json and es6 plus features you should spend most of your time on this part it's extremely important that you fully understand javascript before moving on and for those who want to learn a javascript framework like react or vue do not start learning a framework before you understand vanilla plain javascript these frameworks are based on javascript so you need this knowledge first i have a ton of resources listed for you to fully learn javascript next i would recommend that you learn a bit more about the terminal as you start getting into version control frameworks deployments and other tech you're going to need to use the terminal more and more and so this is a good time to get more comfortable with the terminal a bunch of resources are listed again in the description below version control is very important to learn version control allows you to keep track of changes to your code base this becomes very important as you start working with other developers on a team each person is making changes to the code base and these need to be tracked so you'll need to learn git and github these allow you to keep track of changes collaborate on projects and are an integral part of ci cd or continuous integration continuous deployment pipelines next would be a good time for you to learn and understand how to set up a hosting service and deploy a basic website the easiest way to do this is with a static host like netlify purcell cloudflare or github pages and these allow for easy deployment that can be integrated with github this way every time you update your github repo your site will automatically rebuild and deploy if your application requires a true backend environment then you might want to look into a more traditional hosting service like roku lenode and there are many others and i have lots of resources on all of this as well linked below so at this point of the road map you should know enough to call yourself a front-end developer you should be able to build a static website and deploy it and manage it so let's start looking at some back-end technologies since you've already learned javascript you should now look into node.js node.js allows us to use javascript on the backend server and with node.js combined with express.js we can define routes build out apis connect to databases and so much more you'll also learn about package management node.js comes with npm which stands for node package manager package managers allow us to easily add pre-built packages into our applications that can help you accomplish various tasks without recreating the will every time next learn about apis application programming interfaces these allow you to perform some sort of query or computation on the backend and then send the results to the front end a simple example is requesting data from a database the api on the server will perform the action and then send the data to the front end this allows us to add a layer of security to our application we don't want the front end to perform these actions since that would expose our database login credentials the api allows us to do all of this behind the scenes and just send the resulting data to the user you'll hear the term rest or restful api and there are other types as well like graphql and i have resources on all of these linked below as well just about every website has some data that it needs to keep track of examples are products or blog posts and there are many different types of databases there are relational document graph y column and many others a quick disclaimer here just to be completely transparent i am a developer advocate for mongodb that being said i don't think that there is one technology to rule them all there are different types of databases for a reason some are better than others depending on the use cases so i'm not going to tell you that one database is the best and that you should always use this one type of technology do your own research to understand technologies so that you can pick the best ones for your use case now relational databases are a lot like spreadsheets with tables these tables link to each other using unique identifiers relational databases are more strict and require you to define each table's column and type ahead of time so you have to have a predefined schema now because of the way these databases are structured you're going to most likely need an orm or object relational mapping to make mapping the connected data easier this way when queried it will return all of the connected data that you need so for each query it has to reach out to each individual table and join the data back together before returning the results the most popular databases of this type use sql or structured query language examples are mysql postgresql and microsoft sql relational databases based on sql have been around for decades and not much has changed document databases are a relatively newer technology that bring many benefits over sql databases document databases are not as strict as relational databases by default but can be as strict as you need so there's more flexibility document databases use documents containing json since json is based on javascript it's much easier to understand and implement into your application there's no need for orms or object relational mapping the best example of a document database in my opinion is mongodb now this is the part of the roadmap where i would suggest learning a front-end javascript framework but i can't emphasize enough be sure that you know javascript before moving on to this step the front-end frameworks have many advantages you can build powerful single page applications keep your components organized and easily build interactive uis when you're working with a team it becomes apparent how easy it is to break up an application into components for each team member to work on individually there are many frameworks available in my opinion you should learn one of these three these are in the order of my preference so react is first react is by far my personal favorite it's fairly easy to learn and has great community support it's used in many companies and there are a lot of job openings for react developers next is vue vue is probably the easiest framework to learn it's awesome to work with also has great community support but it isn't as popular in the job market but every year it's adopted more and more now angular is the third option angular is a very popular framework but i personally don't enjoy working with it i think that it's more suited for very large applications and corporations but there are a lot of job openings for angular developers too if you learn react or view there are other frameworks that build upon these other frameworks though examples of these are next js and gatsby which are built on top of react and next js which is built on top of vue you can look into one of these after learning react review if you want to add more built-in functionality out of the box like static site generation and server side rendering next is a great time to learn a css framework and just like with javascript frameworks it's going to benefit you to know css before learning a css framework css frameworks just make it easier to use css to style your applications but you're still using css the two css frameworks that i like to use are tailwind css and bootstrap if your site needs to keep track of user interactions like a shopping cart or it has user accounts then you'll need to implement authentication you could go old school by using oauth or javascript web tokens manually but to make things easier you should use an authentication provider which do all of the work for you a great one is auth0 and i have resources for you on authentication as well content management systems allow you to easily manage the content of your site if you're a freelancer you'll want to pick a good cms for your customers to use so that they can easily update the content on their website themselves and not bother you every single time so wordpress is probably the most popular cms but wordpress traditionally requires you to use their service for the back-end cms and the front-end and so you're basically locked in now in the past couple of years headless cmss have become very popular and wordpress now has a headless option this allows you to use a headless cms with any front-end technology and you're not locked into a specific technology now some other great examples of headless cmss are sanity i o and strappy and there are tons of others as well and i have resources for all of these listed below in the description at this point in the roadmap you've learned enough front-end and back-end technologies to call yourself a full stack developer but the learning never stops you have to keep up with the updates and upgrades to the technologies that you've learned so far and keep your eye out for new emerging technologies that could add value to current or future projects so don't stop learning now something that often gets overlooked is soft skills or a better name for it is people skills along with personal development these are the top skills that you should invest effort in developing communication teamwork attention to detail problem solving work ethic time management adaptability interpersonal skills creativity leadership another huge issue that you will run into is losing motivation and impostor syndrome you need to surround yourself with people who are supportive to you and understand that you're not alone an amazing resource for motivation and dealing with imposter syndrome is danny thompson go check him out on youtube and twitter from this point on in this video everything that i talk about is completely optional learning so there are a couple of other front-end frameworks that you might want to keep your eye on svelte has gained a lot in popularity this past year and it's very easy to learn there's even a full-featured framework built on top of smelt called svelt kit it's like next js is to react another really interesting framework is astro with astro you can build static websites using existing frameworks altogether you can incorporate react components and view components and spell components all together with astro it can combine and build these all out into a static html site it's a very interesting approach now to build upon your javascript toolkit you could learn typescript which is a superset of javascript it allows for static typing i don't mean typing on a keyboard typing of elements in your code this can help you to catch errors and fix them before running your code when you use typescript it gets compiled into regular javascript on build so this is a tool that you can add onto javascript to help you to write better code and it can be used with most frameworks if you want to expand your css skills you should look into css animations preprocessors and different ways to incorporate css into your project like css modules and css njs if you prefer working with back-end technologies you might want to look into learning another back-end language the best way to get a level understanding of what these languages are capable of is by checking out the 100 seconds videos from fireship he gives great short explanations of each of these languages go rust python dart php java kotlin c and c-sharp now something else to look into is blockchain and crypto blockchain is a type of database but it's not like a typical database it stores data in blocks and then chains them together hence blockchain so you can store any type of data in a block but it's typically used as a ledger for transactions now bitcoin among many others use blockchain in a decentralized way so that no single person has control decentralized blockchains are immutable that means that the data cannot be changed once a transaction is recorded it's permanent and everyone can see it that makes blockchain very secure the blockchains have exploded in 2021 and will continue to become more popular in 2022 i've recently started to learn more about blockchains cryptocurrencies and nfts and let me tell you i have had a lot of fun learning it i have a bunch of resources for you on this topic too maybe you want to get into mobile development the traditional way to build a mobile application is by using languages such as swift for ios development and java or kotlin for android development but if you've learned html css and javascript you can use these to build native mobile applications as well there are several technologies that are popular in mobile app development the most popular ones are react native and flutter you can even use your web development skills to build cross-platform desktop apps with electron electron uses javascript html and css and is powered by chromium and node.js with it you can build desktop applications compatible with mac windows and linux some popular apps that are built with electron are visual studio code twitch slack figma and discord ai and machine learning is widely used to imitate human intelligence and perform simple as well as complex functions like the ability to learn and analyze information collect data understand emotions of humans or solve complex business challenges and problems now we saw over the past year the rapid growth of machine learning platforms and applications such as github co-pilot ai is everywhere so get used to it it's not going to go away and i wouldn't worry about it taking your jobs in fact there is a lot of demand for new developers who can develop and improve these ai technologies now remember you don't need to learn everything that we just covered start back at the beginning of the video and work your way through use the link in the description to view all of the resources that will help you learn these technologies at each step of the way after you've learned the basics focus on the technologies used in your current job or aspiring job so if your current employer uses angular focus on angular if the companies that you are interviewing with use react focus on react before the interview then you can learn other languages and technologies in your spare time if you have any if you've gotten comfortable with javascript and you want to learn some python in your spare time then do that and don't be worried if you can't keep up with current trends and technologies most companies are not using the most up-to-date technologies remember learning something new takes time it takes time patience and practice to get good at something so be patient take your time never stop learning and never give up [Music] you

Channel: codeSTACKr

Views: 13,634

Keywords: web dev roadmap 2022, web development roadmap 2022, web dev roadmap, web development 2022, 2022 web development, web dev 2022, web development roadmap, web developer roadmap, web dev guide, web dev complete guide, web development guide, web developer guide, visual studio code, vs code, backend web development, web developer career, become a web developer, how to become a front end web developer, web development, web dev, how to become a web developer, learn to code

Id: 7uJGjbkp0-U

Length: 22min 27sec (1347 seconds)

Published: Sat Dec 18 2021