Web Development in 2020 - A complete roadmap

Key Takeaways

hey everybody this is the video where we cover web development in the year 2020. i'm always excited about this video i do it every one to two years whenever enough has changed in the technology landscape to warrant a new video that's different enough from the last one and we are at that point and i'm very excited to do this video also important to note some people miss this huge important fact is this mind map is available online on koggle i will put the link in the description because lots of these are links to videos that i have covering the topics so you will want to keep that link and follow up if you're learning a different area of this so i've if you've not seen the videos before i break this into several different areas basic front end which is a first skill set uh then advanced front end back end and dev ops those are kind of your main skill sets that you'll learn all the way covering from beginner beginner i'm wanting to learn web development which is this page we're on right now all the way through hey i want to advance and get really really good and continue getting really really good even if i am so this is also made to keep people up to date and current if you're already an awesome software engineer so let's dive into it with basic front end basic front end is what you learn if you're wanting to learn web development right now as a new beginner and the building blocks of basic front end are the same that they have been for a long time they have just changed in what you have to learn those building blocks are you're going to learn basic html and css and then you're going to start learning javascript as your first programming language so html is the content of the web think of it as text pictures links and that's it but they are ugly html has no way of looking making things look good that's where css comes in it stands for cascading style sheets so as soon as you learn just a little bit of html you know how to start putting content into a web page immediately start learning html and css together so you can learn how to inject content into a page that looks really really good so how you learn css has changed a lot in the last couple years you're gonna do this if you're learning css you're gonna learn the basics like hey how do i actually add css to a page how do i actually make this link blue or red right we're super basics and as soon as you learn those you're going to start learning layouts and grids not everyone teaches this as the very first step but this is believe me you want to learn how to do layouts in grids first using css grid and css flexbox so once you learn those the rest of the page is easy easy easy because all you have to do is take your little content areas that you made with your grids and add pieces of content into it if you can learn to think of web design as building grids for your content and then adding content inside your journey just became really really easy so i cover a decent bit of that in this course that i have already that i have some links to and then you'll move on to javascript javascript is the coding language of the web and honestly it's the most popular coding language of all time there's almost nothing you cannot do with javascript so it's definitely the one you want to learn first and there's some links to the different uh kind of steps that you want to go through top to bottom in learning basic javascript so when you've got those you can actually build web pages they're like brochure style web pages where they might not be like twitter where people can post tweets to a database and you can log in and load all your tweets from a database and at all your friends but you can actually build brochure style web websites and actually make money for small businesses from small businesses by doing their websites for them so this is a really all-inclusive website skill set that can start making you money right away even if you don't have a full-time job as a web developer but there are people with this skill set that get decent at it and do have full-time jobs as web developers so really all you need to wrap that up is you need to know how to take that website you've built and put it online so if you're new and you know how to build a website but you don't know things like ssh and github and command line you're going to look for something like hostgator which is the easiest place to dump web websites online it's absolutely the simplest place i have a video where you can in about five or six minutes go from having code on your computer to having a website up and running with your own domain name hostgator is the easiest and fastest for doing that some people give it a hard time because they're more advanced and they like to look down on things they're more advanced than but it is absolutely the best and there's some deals there that some of these are affiliate deals that i have affiliate codes they might get me a buck if you use those codes but feel free to try these different coupon codes because you can save a lot of money with hostgator with these codes um once you've learned more things that are over here that i'll cover in a minute netlify is kind of the next best place to deploy your stuff on if you're confident with github skill set command line skill set committing your code to source control netlify becomes superior to this but you also have to know more about domains and there's there's more manual connection points you have to do to deploy on netlify so that's your step two and then step three we cover that more in the back end and devops stuff so uh digitalocean in aws is pretty much my recommendations there in a nutshell so you can build a website you can deploy a website uh where do you go from there well whether you go front end up here and become a master of front end code or back end down here and become a master of end code you've got to learn a couple things and these actually haven't changed at all over multiple years because they're just kind of fundamentals of how the internet works you need to learn the terminal on your windows or mac computer you need to learn the command line learn the basic commands of how to move into folders uh and you know list the files it's really not that bad people avoid it because everybody's used to clicking a drop down menu file open instead of typing the command open file name it's it really is mentally annoying for people at first when they're used to visual menus to actually have to type commands but it's honestly not that big of a deal learn the terminal you will hold yourself back and no matter what area you go into if you do not just take the little bit of time to learn the terminal you don't want to learn basic ssh this hasn't changed i have an old video on it that still is honestly as current as it gets because ssh never changes and then you're set up to learn github github is really what's going to lock in your next level of your skill set to be able to check your code into a repository that keeps your code safe keeps a list of all the code changes allows you to collaborate with teams to build code bases a whole lot of things so that's kind of your next grouping of three things you want to learn and then learn how the client and server talk to each other learn about uh restful web services and and kind of the types of requests you can make to a server domain name and dns basics are also important how do i set up a domain name how do i set up a subdomain name what's the difference between an a record a cname record an mx record these are really really easy easy easy things to learn but they're helpful to learn and a lot of people will go years without learning kind of these little things because no one gave them a list and said hey you'll learn that learn this it's important to know so you want to learn those things and from there you're basically equipped to either go uh towards learning front end more heavily or start venturing into back end and servers i would recommend front end is the place to go so let's journey on here so i'm going to pause real quick and say what kind of job titles you can actually look for once you're learning or have learned the front end skill set basically learning a front end skill set apply allows you to apply for software developer jobs react developer or view developer job sometimes they're called that sometimes they're just called web developer or front-end developer or front-end engineer or javascript javascript engineer there's really no standardized way that companies will post these job descriptions for people who know the skill set so you want to make sure if you're looking for a first-time job or if you're looking for a new job that you search along all these lines and don't miss out on any opportunities okay i'm about to show you an overwhelming list of things but it's actually really really simple so don't get overwhelmed bear with me as i explained the big pieces that you have to learn and then explain why all the little things are added onto this list okay so to go towards a master of front end you really need to learn i'm going to tell you two things you want to learn react js you want to learn npm and you want to learn webpack you do that you're good okay so that that's it that's your big big uh let's call them complex pieces you want to learn react.js which is a javascript framework you want to learn webpack to bundle up all your code into one file or multiple files and you want to learn how npm works uh which is node.js on your machine so that's your big moving pieces let's go into all these little things and why i added them on here and lots of these will be useful for people who already kind of either know react webpack and npm these will help you keep your skill set current know what you should be learning this year all that stuff so if you haven't heard of jamstack man that's a really cool way of building your applications jekyll gatsby and next js are all really cool jam stack frameworks jekyll is centered a little bit more around html css development gatsby is centered a little bit more around react kind of like jekyll and nextjs is a react framework that also supports jam stack so uh jekyll would be the simplest then gatsby then next my favorite one out of all of them is next but that's if you're doing a lot of react work so jam stack if you haven't learned it super super cool jam stack on netlify is actually really awesome it allows you to totally replace wordpress if you're working for a company that still uses wordpress you probably don't need to be using wordpress these days use jam stack instead i'll leave that be and all the wordpress people can get angry at me over here we're going to talk css so there's a few tools and skill sets you need to for css management these days although it's a lot less than you used to need you used to need uh just to do a lot more css stuff to make css work because css was so bad but css keeps getting better and better and better pretty much uh the only thing i say you need on this list is to know how to use sas use sas which is basically add some extra features to css that you don't get these days honestly that's it used to be i'd say you really need to know a css framework to help you do a lot easily but with css grid and css flexbox getting really great you don't really need a framework anymore honestly you need a framework if you're looking for a lot of ui components already built for you that you can just drag into an admin backend or something to get drop-downs and menus and stuff they can look generic and that's okay it helps you go really fast that's honestly all frameworks are really really good for these days tailwind css is a really cool css utility framework that allows you to work more on design almost like some of the utility classes that bootstrap has without all the component heavier stuff tailwind is actually my favorite of all these it's the one that i would actually end up using the most these days if i went to a css framework because it's the most lightweight and you just don't need all the bulk of these other ones anymore so that's pretty cool css organization you really only need this if you're doing heavy lifting html css they're good to know if you don't know what these are look into them at least but unless you're doing a lot of heavy html css coding you don't really need to know those so front end build tools has gotten a lot simpler there's a whole lot of contenders all fighting for their space and front-end build tools over the last couple years for me it's really simplified down to three things do your basic build jobs using just npm scripts that's it npm scripts can do a whole lot for you webpack is the definitive uh bundler for all of your css and javascript code these days um although you might not need that so much in the future with http 2 really becoming big and imports becoming now supported in every browser except for ie11 you might not even need webpack anymore which is a wild world to think about but that's a really really cool thing that's happened in the last year with web development but i'd say parcel if you're not doing complex build systems parcel is drastically simpler than webpack like saves hours and hours of time you're just up and running with like a react website um instantly i have a video on parcel that is phenomenal i absolutely absolutely love parcel and unless i'm doing complex work would use that instead of webpack so that's kind of how you build your stuff up together so let's move on to javascript frameworks again react being one of those big pieces you should learn react is the definitive framework to learn vue is really the only other contender out there angular still exists but you shouldn't be using it you learn react there's no good reason you shouldn't learn react as the first framework you learn vue is great and competes with react and a lot of things but react has such a bigger ecosystem in following an adoption that there's there's no good reason to go learn vue instead of react these days if you're awesome at react look into view but everyone i've known that's awesome react and looks into view like it's very very rare for people to say vue is so much better for all these huge deal breaker reasons that i couldn't use react anymore so i'm strongly opinionated about that because i would i'd be steering you wrong if i said learn view first no no no learn react first um on that topic since i'm react uh suggesting react so strongly if you're good at react already here's some newer or advanced react topics basically just a list if you don't know what these are google them they're good things to know good things to know to keep you learning more about react the most popular frameworks are tools that you want to learn with your react coding react router oh look at that i put it in there twice sweet react router or react router learn either one that's awesome create react app is a great way to get started with a react project parcel is also a great way to get started with your react project i can i parcel kind of can replace create react app in a lot of ways apollo for graphql it's a great alternative to rest if you're going to do graphql do apollo that's pretty standard these days next js is an awesome framework for doing server-side rendered apps with react or really just for doing full applications with react next.js is pretty awesome it just keeps getting better and better react storybook is really great for documentation testing individual components and for developing individual components as well so storybook is super really cool to look into there's another one called doc z or docs i don't know how you pronounce it that's kind of a competitor to that but i think storybook is kind of the better one to turn to still these days and then for css in react emotion is kind of the number one way to look at putting your css into your react side of things styled components is also a very popular library for that so if you are not familiar or have at least looked into everything on this list you should look into everything on this list if you are a react developer and then as far as state management how do you actually manage state in react this won't make sense if you don't know react but you will want to know this when you're learning it redux is the most popular state management tool right now but really mob x needs to be the most popular one and is growing in popularity for the simple reason of mobx is way way way way simpler there's a lot of ceremony to working with redux that makes it slower for development ultimately makes it more stable when you're working with really complex data and really complex actions and action sequences but modbx is so much simpler and most of the time you don't need all that complexity and intense stability that redux provides my go to is always mob x for any project always mobx all the developers i know their go to is mob x and they bring in redux when they really need something more complex that can do a lot more data heavy lifting mobx state tree is also a great alternative to redux really really cool uh tool and utility as well but mob x first then redux for managing state believe me you'll thank me when you're older if you do redux as a go-to for everything i would really encourage you learn mob x and use that on your next app especially if there's nothing super complex and heavy data lifting man you're just going to enjoy your developer life a whole lot more using mobx over redux next thing you want to learn is you want to learn documentation and testing these are pretty straightforward these are all just things to be familiar with great ways to learn how to test and add add stability tests to your react code keep hitting that making that circle thing pop up forgive me for that popping up on the screen um some important js skills to learn typescript is getting more and more and more popular there used to be a competitor called flow that's pretty much out of the running now learn typescript if you want to add strong static typing to your javascript projects people either love it or don't really find a huge need for it i'm kind of on the fence i can swing either way i'd be happy never using typescript for the rest of my life and i'd be happy using typescript for the rest of my life uh it's just got its pros and cons functional programming with javascript really really something that will make you a much better javascript programmer definitely something good to look into and then some performance and optimization things progressive web apps and google's amp are out there now google's amp actually gets a lot of criticism because it basically makes google own more of the internet which a lot of people don't like but that being said if if you're working on a project that has to rank as high as possible on mobile search engine traffic uh you need to at least be aware of amp and what you might be trading off if you don't make use of amp progressive web apps are also something that are just getting more and more and more popular they're a good thing to look into a lot of people don't need to know them and a lot of people really do need to know about progressive web apps and i won't go into the detail around that so that's your front end skill set learn react learn how to package react up with webpack and npm and then all these little tools will help you get better and better and better at react as you go that's front end and then we will move on to back end okay so the job titles you're looking for as a back-end engineer are listed here again i'm sorry there's no more standardization for back-end engineers than there are for front-end engineers you could you could be called an engineer a developer a back-end developer back-end engineer you might be called a node.js engineer or a ruby engineer depending on what framework you lose lose or use uh and so basically those are the job titles that you're looking for oh my goodness i just keep messing up everything with my mouse today so my recommendations are getting even stronger and stronger there's there's even more stability that's come to back end languages over the last year or two here's essentially what you want to do if you're starting off you want to learn node.js and you want to learn go or go lang just that's the two recommendations that i'm recommending extremely strongly i'm seeing a huge trend around both of these languages they're going to be popular and in demand for a very very very very long time i will say one exception if you want to go data science become a data scientist which is labeled as the sexiest career path of 2020 then python is actually something you'll want to learn because python language is just much better for data managing large pieces of data when you know python you know why there's just a whole lot of baked in things that make python and and it's also just the language of choice for data scientists it's it's the the community is built around python so while you can do all those things in other languages python is the go-to language for data science so if you want to be a data scientist and you love things like auditing and accounting and science and statistics then go with python go a data science background uh data science track uh that that's definitely the recommendation aside from that node.js is the absolute first thing you want to learn for two reasons one you probably already know basic javascript you will learn node.js way faster two it is about the most popular thing out there right now so you're gonna have a lot of job opportunity and three node.js is just outstanding at io which is why it's most popular i o meaning uh input output uh if most back-end applications these days do most of their work fetching information from a database and returning that to the requester and that's pretty much where node.js shines better than anything else it can at the same time just without even batting an eye make thousands and thousands of requests to databases and cache layers all at once and run them together and send them out to the client it's just extraordinary at that so go with node.js um there's two frameworks for node.js the tiny ones uh they're that uptick means they're micro frameworks um and so node.js with express is the thing you'd want to learn first absolutely a great thing to learn golang is the thing you'd want to learn next go is becoming more and more popular it's a great high performance language it's not the most high performance language but it's high performance enough and simple enough to really just get a great adoptability people really like using go rust is an alternative if you need to just squeeze the maximum performance juice out of whatever machine you're running on but go is growing in popularity faster than rust is in my opinion uh so learn node learn go uh learning a functional language is more about stretching yourself as a programmer than hey everybody's looking for people that are awesome at functional languages uh it's really the hipster lang the hipster section of the coder community is the functional languages um the artisans so to speak languages but it'll really stretch and challenge the way you think about code to learn a functional language so those are pick one on there and learn it it's going to be really cool for you to learn it and notable others are java and csharp.net these are huge these were the big boys of yesteryear have not gone away so many businesses and jobs are built on not java or csharp.net so i never say these are terrible technologies don't learn them i don't recommend newbies ever learn them because there's old java and there's new java there's bad java there's good java and it can be really tricky to figure out which java you should learn to be a modern developer you can definitely be a modern java developer it's gotten a lot better in the last few years actually but it's tricky to find out what java to learn so that's that's something important for you to know that's why i say no js go lang that's gonna be awesome and then basically as you know learn one of these languages in one of these frameworks you immediately go through these lists right here how do i work with mysql or postgres or redis or cassandra with those data with those uh frameworks so essentially you'll say hey i'm learning node.js how do i connect node.js to a postgres data database and postgres is basically the relational one you should go to these days my sequel is really really similar but pick postgres if you're going to learn just one database in the whole wide world learn postgres and then learn redis as your next one that's going to be an awesome next one to learn and then learn mongodb if you're going to learn a third one learn elasticsearch if you're going to learn a fourth one learn a rongodb if you're going to learn a fifth one that's kind of your order of databases that you want to go each of these are kind of competition from the first but go top to bottom learn the one on the left hand side when as you're learning kind of what databases to to use but you can do an awful lot just knowing postgres for the rest of your life too so don't feel like you have to know this whole list by any means i don't know all the databases on this whole list well those are just kind of all a sampling of the many many popular databases out there so learn those and then for the languages you'll know you'll basically want to learn these things on the punch this is kind of your learning punch list for each language and framework how do i manage packages in node.js or how do i manage packages in golang how do i do unit function testing in golang or node.js how do i create an api graphql or restful in node.js or golang what are some security best practices these are all basically google searches that you can do node.js security best practices no js authentication authentication authorization blah blah blah so these are basically what you learn to learn the language of your choice up here and that is your backend skill set learn a language or two get good at them and learn a database or two that's pretty much it at that point that's what people know who do this stuff all day every day in the backend landscape it's not really that complex learn a language or two learn some databases and go build great stuff so now we move on to dev ops which is the farthest down the rabbit hole you can really go and still call it engineering or software development devops is basically the art of deploying your applications well it used to be there were opt-ops teams that just did all this but we've really learned in the last decade or so that developers need to be heavily connected to this and so you should always have developer operations guys that kind of bridge that gap or ideally an entire culture that is both development and operations both building and deploying applications so if you're a devops engineer that's a really great engineer to be coming into the devops world you the first thing you want to learn is docker uh docker rules and runs the entire devops world basically it is the de facto way that you deploy an application no matter how or where or when you deploy it you're gonna use docker to containerize that application and deploy it there are exceptions but there aren't many exceptions to it basically you have this node.js application you're going to package it up with docker and then that docker image you just packaged can run anywhere it can run on digital ocean it can run on aws it can run on kubernetes and these are kind of the different places to turn for different scale if if you're deploying on a small scale and just spin up some digital ocean docker servers and run your docker containers it's fast it's simple and you can get a long ways with that digitalocean has actually continued to amaze me they're coming out with better and better and better stuff all the time uh yeah digitalocean is awesome if you're going at more of a medium scale rancher is a really cool solution that basically is a a simplified layer over kubernetes that makes it a lot easier to work with because kubernetes is very hands-on and very low level so it's a lot of work to work with kubernetes aws fargate if you're in aws is basically a way that you can just say hey run my containers i don't even care what the servers are you're running them on just run them fargate's pretty awesome it takes the entire server layer out of your control and out of your worry and care so it's also a really great place to turn so that's docker that's my favorite ways to deploy with docker now you're going to learn operational visibility this is really really huge and really you should know this and care about this if you're a software developer but the devops guys really care about the most how do i watch my application running in the wild and know if there's problems how do i know if the users are getting slow responses or errors these are all very important things new relic is absolutely my favorite tool for this of all time it's expensive but it is super super super super great offers some phenomenal features that it's just gotten really good in the last i'd say five years new relic is is really just the dominator in terms of how much it gives you out of the box to see your applications running in production and see how they're working with databases and if the database connections are slow and all that kind of stuff all out of the box logging also you'll want to make sure that all the containers that are running your logs and your error logs go somewhere where you can search them and find them easily because you should never have to ssh or open a shell into a container or a live server anymore that's like so old to have to do that you should never have to open your shell onto a server or a container you should have a better place to access all that information as far as where you deploy stuff uh digitalocean aws are pretty much my two main ones azure and google cloud are obviously really big if you're in the microsoft world and you're deploying on microsoft servers azure is better for that google cloud is a little bit simpler than aws because aws handles any and every enterprise possibility which is why so many places use aws and digital ocean is just simple simple simple simple but they've added a lot of new features that allow you to use them in a professional capacity that really prevented them from being great business solutions in the past so digitalocean has really come a long ways in the last two years specifically and i strongly recommend them for small and medium-sized businesses actually they're really great you just won't have to worry as much about hiring a whole bunch of ops guys to manage all your infrastructure so uh that's pretty much where i'd recommend deploying stuff uh again i kind of already covered this the way you actually configure stuff docker and terraform terraform form basically allows you to spin up any of this infrastructure as code you absolutely should learn terraform docker and terraform are the two technologies you learn more than anything else to be great at devops these days and then hosted solutions these are some ways that you'll actually create ci pipelines ci pipelines are continuous integration or continuous deployment to where as code gets pushed and merged it automatically builds your docker containers pushes them someplace and deploys those across digitalocean or aws or whatever so circleci is probably my favorite one of all these these days codechip is also really great github actions is a newer one i don't have a lot of production experience with i don't know that really anybody does have a lot of production experience with github actions yet but it seems to be very promising and very cool so these are some really these are probably the top three that i pick on hosted solutions and if you're going to go with something internal git lab or drone ci are my favorite although jenkins has been around a long time and is still very very popular oh my goodness that is quite a big breath i might have even distorted my microphone by yelling but that is what you learned today in 2020 to go all the way down the rabbit hole with web development uh hopefully you found this video helpful oh my goodness if you made it this far you must have found something helpful because you stuck with me for a long time um uh it's been a pleasure to put this together and show this to you guys i hope you enjoyed it have yourselves an awesome 2020 and go learn something new and enjoy learning it alright see ya