Web Developer Roadmap 2021 | A Guide To Starting A Career In Web Development

[Music] in this video i'll guide you through my ultimate web development roadmap for 2021 and beyond we're going to cover a ton of technologies but don't worry you don't have to learn everything that we go over in this video this is an entire map of web development most developers specialize in small parts of this such as ui ux design front-end development back-end development ci cd and devops what i hope is that this video will give you a high-level picture of everything that is out there and then you can decide which route you want to take now not only am i going to show you all the technologies but i'll also tell you how and where you can go to learn them there's a link in the description below for a free pdf that you can download it will have links to all of the resources that we talk about in this video so be sure to download the pdf for reference quick disclaimer if i leave anything out of this road map let me know in the comments below i tried to think of everything but i'm sure i missed something so let's get into it well first you need to understand how the internet works you need a basic understanding of how computers communicate using browsers domain names hosting services http and dns here are some great resources to get you started and again all of the links to these resources will be in the pdf in the description below next we'll move on to basic tools we have our text editor browser terminal and design tools let's start actually with the browser browsers are a very important tool for web developers they are the means of which end users will view our applications i prefer to use chrome as my main browser for testing but you will want to install all of the major browsers to ensure that your application will work properly in all of them just a side note anything with a purple heart that you see is my personal favorite so then we have text editors the text editor is a web developer's best friend you need to understand everything that it can do to help you write code as efficiently accurately and fast as possible my favorite code editor is vs code and it's the most popular for the vast majority of developers i have a vs code playlist and even an entire course that will help you become a vs code superhero next we have the terminal and you'll need to get used to using the terminal some are scared of it but i promise it's not that bad there are many options for a terminal every os comes with a terminal windows has the command prompt and powershell you can also use the windows subsystem for linux or wsl which gives you a linux shell but it's not the easiest thing to get set up and there are some limitations so if you're on windows i would recommend using git bash that's what i use if you're on mac os or linux or unix i would recommend zish or zsh and then we have design if you want to be a ui ux designer you'll need to learn a design tool i prefer figma but adobe xd is great as well other options are sketch illustrator and photoshop for anything design related these are the two youtube channels that i go to design course and adrian twarg alright so back over to our roadmap let's look at the next item which is html every webpage uses html it is the main building block of the web html provides the structure of a website it's actually not a programming language but a markup language so you need to learn the basic syntax symantec html forms and validation accessibility seo and best practices i have an html crash course that will teach you the basics all right now moving on next we have css css is another important part of every website it provides its styling makes things look good on all devices and adds flair with transitions and animations now i'm not going to lie there is a lot to css if you're going to be a front-end developer it's very important that you understand css fully after you learn the basics you'll want to learn the layout features like flexbox and css grid custom properties are the equivalent of variables in other languages and of course transitions and animations are just really cool animations can be done with plain css but after you learn javascript you can look into javascript libraries like gsap and animajs these make building complex animations super simple after that be sure to get comfortable with responsive design including the mobile first approach rem units viewport settings fluid widths and media queries you can learn all about this from the king of css kevin powell now the next three items you can come back to at any time these are not necessary to learn but are great to understand once you've mastered all of that you can move on to css preprocessors like sas or post css i really love sas it gives your css super powers it allows you to nest css and you can have functions and mix-ins and it's just amazing to work with now if you start learning react you'll most likely want to either learn styled components or css modules that makes writing css with react much easier and then there are css frameworks some people just skip over css and go straight to frameworks i highly discourage that you need to have a solid understanding of css before learning a framework there are a ton of frameworks out there the two frameworks that i think are worth learning in 2021 are tailwind css and bootstrap bootstrap 5 is looking really good and i'm waiting for it to be released these both have their places in web development here are some great css resources and again all of the links to these resources will be in the pdf in the description below alright back to our roadmap now it's time to choose all right at this point it's time to choose your path do you want to become a front-end back-end mobile or desktop developer or work with machine learning and ai now it's important for me to note that even though i do have this broken up into different sections the lines between front end and back end devops and all of these different areas are getting blurred my advice is to pick out the technologies that most interest you and no matter which path they're on there are companies that look for individuals that specialize in very small portions of each path so pick something and get good at it it's better to be good at one thing than to be meh at everything really quick hit that like button to help me out and subscribe if you haven't already let's get back to the road map all right so let's go to the next section here which is the front end path so front-end development involves building the interface that the user sees in their browser and generally this includes html css and javascript you'll work with designers and back-end developers mostly designers will tell you what it should look like and how it should flow and back in developers will provide access to data such as products that will be shown on the website so let's move down here and first we have javascript so javascript is the first programming language that you'll learn as a frontend developer 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 for those who want to learn a javascript framework like react or view do not start learning a framework before you understand vanilla plain javascript these frameworks are based on javascript you need this knowledge first here are some great resources to help you learn javascript alright moving on down the line here we have typescript and frontend frameworks let's look at typescript first so it is a superset of javascript it allows for static typing and this helps you to catch errors and fix them before running your code when you use typescript it will be compiled into regular javascript on build so this is a tool that you can learn at any point to make your code even better and typescript can also be used with most frameworks so typescript is great to know but it is not necessary at this point you can come back to it and learn it at any time fireship has a video on the basics of typescript alright now let's look at the front-end frameworks a quick side note i'm not going to get into the framework versus library discussion whether something is technically a framework or a library is not really that important so i'm just going to call everything a framework so 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 there are many frameworks available but i'm only going to cover the top four in my opinion so react is by far my personal favorite it's fairly easy to learn and has a great community view is second on my list and is the easiest framework to learn i have angular at the bottom it is very popular but i personally don't enjoy working with it i think it's more suited to very large applications or corporate applications i also have svelte on here because i think that it's underrated i wouldn't use it for every application but it does have its place and i plan on learning more about it in 2021 here are some great resources from myself program with eric faraday academy and traversing media next we have state management when you're working with frameworks you'll soon realize how important it is to keep track of your application's state when you're dealing with many applications and try to pass data and state between them you'll want to look into some sort of state management so for react we have the context api with hooks this is my personal favorite it's built in before this everyone used redux and that's still a great option today i just think that with the context api and hooks it's much easier to just use what's included with react then we have view x for view and the built-in services for angular here are some great resources from deved and program with eric and again all of the links to these resources will be in the pdf in the description below alright next we have static site generators and server side rendering static site generators became very popular in 2020 and will continue in 2021 these make building simple things like landing pages so easy but they're not just limited to that a common use for ssgs are blogging sites so with static generators you get better seo file system routing and great plug-in support from the community some use graphql for data fetching such as gatsby the most popular static site generators in my opinion are gatsby for react and next js for react grid sum and nuxt js for vue and then i threw 11t in here because i've been hearing a lot about it but i haven't had time to really dig into it it looks really cool and then we have server side rendering or ssr this provides many of the same benefits of static sites but moves all the rendering onto the server the current kings in this space are next and next js in my opinion you'll notice that next and next js can do both static site generation and ssr these are great options if you need flexibility and i'm personally going to dive deeper into next js in 2021. here are some great resources from wavenfalk colby fayak winfaraday and traversie media all right let's go back up to the roadmap here and next we're going to look at some more tools there are many more tools that you will need to learn and here are the main ones first we'll look at package managers package managers allow you to easily add pre-built packages into your application these packages help you to complete certain functions within your application i like to use npm others like to use yarn i think npm is a little bit more popular so that's what i go with but either are great and then we have build tools within build tools we have task runners linters formatters and module bundlers so for task runners these are going to help you in development to get your environment up and running they're also going to help during the build phase to perform tasks such as tree shaking minifying code optimizing images etc so for these task runners you can use the built-in npm scripts or you can use something like gulp and here's a great tutorial on gulp from coder coder then we have linters and formatters these are going to help you to identify coding errors and formatting errors in your code and these can easily be added into vs code as extensions next we have module bundlers front-end frameworks use module bundlers to compile the code that you've written down to regular html and css and javascript many of these are built-in and require very little configuration on your part but it's good to understand how these work webpack and parcel are by far the most popular i also included roll up because i've used that in the past as well here's some great resources on those from free code camp and james q quick next we'll look at version control version control is very important you will have to learn git and github especially if you're working with a team these allow you to keep track of changes collaborate on projects and are an integral part of cicd which is continuous integration continuous deployment so for everything open source and github related i look to eddie jiled and i also have some great resources on my channel for this next up we have browser dev tools you're going to use your browser's dev tools frequently so be sure to get familiar with their capabilities there are also specific browser extensions that can help you with troubleshooting front-end frameworks like react then we have vs code extensions there are many extensions that can help you with various technologies and i have a video on my favorite extensions next if you're writing a lot of html and css you have to learn emmet it will speed up your coding time dramatically it's like coding shorthand imit is built into vs code and you can check out my video to get you started and if you're dealing with a lot of data fetches you might want to check out axios it's a really nice javascript library that's easy to use instead of the standard fetch api in javascript and of course traversing media has a crash course on that too next we're going to take a look at some other technologies we'll start with graphql graphql is a query language for apis it makes consuming data from your api on the client side so much nicer it's built into gatsby and with that we have the apollo client next we have progressive web apps and pwas are reliable and fast applications they're most known for their ability to be installed quote unquote on devices like a regular application but they are just web apps and give the user a native app experience without taking up space on their device one of the main features is the ability to work offline by using service workers check out this great tutorial series from the net ninja right next we have web assembly webassembly allows you to use other programming languages in the browser there are other languages that are much faster than javascript but keep in mind that this is not a replacement for javascript so if you're trying to build the next level game or a really complex tool that needs to crunch a lot of data you'll want to look at webassembly and several languages that you can use with webassembly are c c plus plus c sharp and rust buyership has a 100 seconds video on webassembly that will give you a high level overview of what it's capable of alright moving on we'll look at jam stack the jam in jam stack stands for javascript api and markup an example of a jam stack would be the combination of gatsby and i o sites that adhere to jam stack guidelines are highly performant cheap and easy to scale they're also super easy to host using netlify or vercelle for more information on jamstack visit jamstack.org and here are some great resources from james q quick by the way james is the jam stack king i really think that we should change jam stack to james stack all right the last part of the front end path that i have here is speech recognition so speech recognition is only going to get more popular as time goes on so many people are used to talking to alexa or google or siri the fact is that people prefer to spend less time typing things that's why voice searching and navigation will become even more popular in 2021 you can implement speech recognition in your application using several technologies there's html5 web speech api there's google speech to text and there are javascript libraries that you can install in your application that will add all these features for you as well such as allen ai and you can check out this tutorial from web dev simplified on how to integrate allen ai into your application all right let's move on to the next part of our path let's go back down here and we're going to talk about the back end path that's up here working as a back-end developer involves managing servers deployment apis databases devops ci cd the first thing that you're going to want to do is pick a language so there are several to choose from we can use javascript on the back end so if you already know that from the front end that would be an easy transition you can use the node.js or dino libraries for that we also have python rust c sharp java php go and ruby those are the top ones in my opinion picking a language depends on the purpose of the application being built so if you're working with very large data sets you might want to go with python if you just need a simple web server and you already know javascript go for node.js if you already have a company in mind that you want to work for find out what they're using on the back end and learn that in the end once you've learned one programming language it's much easier to learn another so don't sweat it too much here are some great resources for back-end languages from traversing media myself caleb curry and free code camp now the back end has frameworks too the same rules apply when learning a back-end framework learn the base language before jumping into a framework right so for these frameworks we have laravel for php spring for java ruby on rails for ruby express and koa for node.js django and flask for python and blazer for c sharp there are some great resources on these as well from traversing media free code camp dennis ivey and claudio bernesconi right moving on next we have databases just about every site has some data that it needs to keep examples of data would be products for sale or blog post content and there are two main categories that databases fall into relational and non-relational i guess but you can also call them nosql cloud let's look at the relational databases first so relational databases are a lot like spreadsheets with tables these tables can link to each other using unique identifiers and relational databases are more strict and require you to define each table's column and type ahead of time examples of these are postgres sql mysql azure cloud sql and microsoft sql there are some great resources on some of these from free codecamp and traversing media nosql and cloud databases are not as strict as relational databases you can define their data and types on the fly it's important though to understand these differences and pick the correct type of database that fits the needs of your application while no sql and cloud databases may be easier to get up and running at first you may run into issues down the road as your database grows some examples of these are mongodb airtable aws fauna db and firebase there are some great resources on these from traversing media fireship and myself and again all of the links to these resources will be in the pdf in the description below alright moving down the line next up we have apis so now that you have the databases down you need to be able to access the data from the front end through apis api is an application programming interface it's a way for the front end to consume the data from the back end you can check out this fun tutorial on how to build your own api from anyakubo and next up we have authentication if your site needs to keep track of users you're going to need to implement authentication the most common ways to do this is by using oauth or jwt which is javascript web tokens to make things easier though you could use an authentication provider such as auth0 or firebase here are some great resources on that from myself and webdev simplified next up on the list i have blockchain and cryptocurrency blockchain is actually a type of a database but it's not like a typical database it stores data in blocks and then chains them together in chronological order you can store any type of data in a block and it's typically used as a ledger for transactions so bitcoin uses blockchain in a decentralized way so that no single person has control decentralized blockchains are immutable and that means that data cannot be changed once a transaction is recorded it's permanent and everyone can see it this makes blockchain very secure you will see blockchain and cryptocurrencies continue to become more popular in 2021 to learn more about these technologies visit the new boston and caleb curry alright moving on next up we have content management systems cmss allow you to easily manage the content of your site if you're a freelancer you'll most definitely want to get a good cms for your customer so that they can easily update the content on their website themselves examples of traditional cms's are wordpress and drupal and in 2020 headless cmss became very popular and will continue to be in 2021 headless cmss allow you to use whatever you want on the front end you're not tied to using their platform on the front end this gives you much more freedom to build your application some examples of headless cmss are netlify cms wordpress sanity io strappy prismic contentful and storyblock and here are some great resources on this from adrian twarg james q quick jason lanksdorf and traversie media alright moving down the road the next item is deployment and devops this is a big portion of back-end development it involves understanding how to create and manage environments along with deploying applications to the web so you'll need to understand how ssh works for connecting to remote environments you'll also need to learn about load balancing monitoring and security and ensure that your site is secure by installing ssl certificates and then github actions can also help with ci cd which is continuous integration continuous deployment here are some great resources on those items from devops directive eddie jaud and ants in the developer let's move up to the top here to hosting so you'll need to set up some sort of a hosting service depending on your needs you might be able to go with static hosting like netlify or github pages these allow for easy deployment and 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 you're going to want to go with a more traditional route or a traditional hosting service such as heroku lenode aws azure or versailles next we have web servers so you'll want to become familiar with nginx apache or microsoft iis these are the most popular web servers in my opinion and next we have testing testing is necessary before deploying an application the type and amount of testing needed depends on the complexity of your application but you should learn about these different testing types such as unit integration and functional then we have serverless sometimes it's referred to as faas and that stands for function as a service serverless doesn't actually mean that there's no server it just means that you don't have to manage the server you only need a server to perform a minor function this means that there's less infrastructure for you to manage and the top providers for this i think are aws lambda and netlify which actually uses aws lambda on the back end so here's some great resources for that from program with eric and traversie media then we have virtualization this allows you to easily create and deploy containers or images of environments that are set up and ready to go the leader in this is docker and then we have kubernetes which allows you to automate container deployment scaling and management so that's the end of the backend developer path let's move down here and next we're going to look at mobile development so 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 already learned html css and javascript you can use these to build native mobile applications as well and there are several technologies that are popular in mobile app development we have react native using this you can easily build native mobile apps then we have flutter which actually uses a programming language called dart to build native mobile applications but you can even compile your existing flutter code written in dart into a website with flutter for web then we have nativescript javascript typescript angular or vue can be used with this to create native mobile apps and then we have ionic you can build native and hybrid mobile apps with ionic using react vue or angular here are some great resources for those from william kandian flutter explained taras petra and robert brunich next we're going to look at desktop development you can use your web development skills to build cross-platform desktop apps with electron electron uses javascript html and css it uses chromium and node.js on the backend and is compatible with mac windows and linux some popular applications that are built with electron are visual studio code twitch slack figma and discord alright let's move down the line next up we have machine learning and ai 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 ai is everywhere so we should really get used to it it's not going away in my opinion python is the king here but there are also great javascript libraries like tensorflow.js and brain.js you could find some great resources on this from python engineer patrick lober i have a last-minute addition that i had to include because i haven't seen this on any other web development roadmap that's soft skills and personal development these are very important these are subjects that often get overlooked a better name for soft skills would be people skills and 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 and leadership you need to invest in your personal development these are things that will help you in any job role another huge issue that you will run into is lack of motivation and impostor syndrome you need to surround yourself with people who are supportive and understand that you're not alone an amazing resource for motivation and dealing with imposter syndrome is danny thompson check him out on youtube and twitter and again all of the links to these resources will be in the pdf in the description below so there are a few technologies that were not included in the road map but they should still be mentioned so first up is this low code no code thing there are several platforms that provide the ability to create websites and applications with very little to no web development knowledge and these are the platforms that scare a lot of developers and make them believe that their jobs might be taken by these platforms my advice is to not worry about this too much the platforms themselves require web developers to build and maintain them and these platforms are targeting an audience that needs a very basic site or application these can't require any advanced customization or any complex programming requirements also these applications don't scale very well so once the company grows out of this basic app they're going to be looking for an actual web developer to help them another technology is br and ar virtual reality and augmented reality are getting very popular they are still in their infancy but they're going to continue to grow in 2021 so look out for those technologies we covered a bunch of technologies in this video so if you made it to the end your brain must be fried thank you for watching just remember that you don't have to learn everything that we covered focus on the technologies that are used in your current job or your aspiring job so if your current employer uses angular focus on angular if the company that you're interviewing with uses react then focus on react before your interview then you can learn other technologies in your spare time if you have any once you've gotten comfortable with javascript and you want to learn some python in your spare time then do it it is hard to stay up to date with technologies and current trends but just know that most companies don't always use the most up-to-date technologies keep an eye out for new technologies but focus on one at a time learning something new takes time it takes time to get good at something so take your time be patient never stop learning and never give up that's going to be it for this video like this video to help me out and subscribe if you haven't already for more videos like this foreign

Channel: codeSTACKr

Views: 374,545

Keywords: web dev roadmap 2021, web development roadmap 2021, web dev roadmap, web development 2021, 2021 web development, web dev 2021, web development roadmap, web developer roadmap, web dev roadmap 2020, web dev guide, web dev complete guide, web development guide, web development roadmap 2020, 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

Id: 7k7ETzqOxn8

Length: 31min 5sec (1865 seconds)

Published: Sat Dec 05 2020

Reddit Comments

[u/codeSTACKr]

With so many web dev technologies and languages out there it can be overwhelming to get started in web development. And if you are already a web developer you may find it difficult to keep up with new technology and trends. This web development roadmap will help guide you in deciding what technology and languages you should learn about in 2021 and beyond. We will cover all of the most popular languages and technology, focusing on full-stack development. We will also look at the current trends to look out for in 2021. There's no better time to start than now!

If you are just starting out or even thinking about starting a career in web development, look no further. This roadmap and complete guide will help you understand what you should be focusing your time on.