In this video you will learn what skills needed for web development in 2020. I created for you a complete web development roadmap starting from beginners technologies and to advanced professional things. All technologies here are up to date and for sure demanded on market. If you learn exactly what is in this list then you can for sure find a good job for you.
Tools
- Operating System
- Text editor (Vs Code, Web Storm)
- Browser (Chrome)
- Terminal (Git Bash/ Iterm)
- Git
Let's start with the tools that you need to programming. Web development is one of the easiest places to start because the technology stack works in any operating system and you don't need lots of things to install. So for operation system there are no restrictions here. If you are using Windows for example you can just continue to do that and everything will work. But it's worth to mention that at some point you might get some problems with running some tools on Windows because normally people are supporting linux/macos packages and tools first and then Windows. So it might be a good idea to switch to macos at some point but for sure not at the beginning.
So you need an editor to write your code in. And you want to get standard things like syntax highlighting, file tree, autocomplete and lots of other features. For free solutions VsCode is really nice. It works on any operational system and is the most popular editor nowadays. If you want to try more heavy editor with lot's of other tools that are intergated inside I recommend Web Storm but it's a paid solution and I don't think that you need it. At least not from start.
For browser I can recommend Chrome because it has the best development tools to debug frontend inside it. At some point, maybe not in the very beginning you will need a terminal. So yes to write commands in console. It's more native to linux, macos but there are some solutions why work on Windows. I think the most popular is Cmder and Git Bash.
And the last tool is Git. It's a version control system which mean you have a history of all changes in your project. It is must have tool to know for any developer and even for junior position I recommend to learn at least the basics of it.
Markup
- html
- css basics
- css flexbox & grid
- css preprocessors (scss/less)
Now let's talk about markup. If you plan to do web development you need to know html and css. Even if you are full backend I recommnd knowing at least how to create simple markup. For the frontend developer it's completely necessary and it's an easy start because it's not a programming language. So html and css basics are must have. I recommend create full markup for at least one site, first to be able to how something on interview and second to get some experience of how it is working. Additionally I would recommend to look at least on one css preprocessor like scss or less which help you to write your css more effeciently. And also flexbox and grids. As lots of elements on the page are positioned in a grid way, where you have 60% content 40% sidebar it's two easiest and modern solutions to build the whole page like a house from small blocks which you position as you need.
Responsive design
- Viewport
- Media Queries
- Mobile first
There is something that you need additionally but I think at the beginning you can learn without this knowledge. It's how to make responsive design. So you need to read about making markup mobile first, what is viewport and how media queries are working. Also making a mobile first markup would be a nice addition to your projects to show on interview.
CSS Frameworks
- Bootstrap
- Materialize
- Tailwind
And the last part to close html css section is css framework. There are lots of them nowadays are they help you to build your markup for the website faster. I recommend learning only one and it's Bootstrap because it's a standard and most popular css framework and not to bother with others at the beginning. And of course 1 website which you build with css framework is a nice addition to your CV.
Javascript
- js basics
- DOM
- XML Http Requests / Fetch
- ES6
Now we are jumping to javascript. And as we are talking with web development with focus on frontend like the most popular thing nowadays javascript is our bread and butter. It's a lot to learn there and you just need to do it. First goes javascript basics like variables, loops, data types, functions and so on. Then you need to understand how javascript is working with DOM elements in browser - how to change elements, attach events, render content and much more. Of course your every project needs to get data from somewhere. Normally it's from backend through some API so you need to learn how to communicate with API. It's XHR and Fetch. And as javascript is evolving contantly you need to learn ecma script 6 which is the new standard of javascript. Actually there are already versions until 9 already but es6 brings us the most of new features like constants, classes, arrow functions, spread, modules and async await.
JS framework
- React
- Angular
- Vue
And here is the last thing that I recommend you to learn at least on some level for beginning your web development carrier. To build application fast nowadays we are using javascript frameworks. Here are 3 which are the most popular. Angular has higher level of entrance and react and vue are easier. Also the most popular from this 3 is React. So at least you need to learn main features of one of them and build an application with it. Then it's much easier to get a job because you can show people that you know something, of course not on the high level but at least you are going in correct direction.
At this point I want to say stop. Because this is all knowledge that you need to learn in order to find a good junior position where you need to learn more. Of course you will so vacancies when they want you to know 3 times more than what I wrote but it doesn't mean that you have to. All things that we will discuss next are doing in middle developer direction.
State Management
- Redux
- React hooks
- Mobx
- Apollo + Graphql
The thirst think here is state management. If you picked React as a framework probably you already heard about Redux or React hooks. Redux is just a state management not related to the specific framework and actually every framework of 3 that I talked about before have some Redux implementation inside. Hook is a new how thing in React to manage state. Actually I have a course on how to building real application from start to the end using react hooks so if you are interested I will post a link in the description box below.
Mobx and apollo are 2 other different state management systems each with own pros and cons. But my recommendation is to learn only Redux first and touch others only later when you need them.
Backend language
- Node
- Ruby
- PHP
- Python
And at this point you should learn a backend language. Why? First of all you will get the idea of how it all works on the backend side and be able to implement project from start to the end. Secondly it's a nice experience to try a new language to get knew knowledge and see how things are workings there. Normally people who are learning javascript on frontend choose node on backend because it's also javascript and it's easier for them to jump. My recommendation will be completely opposite. Try something that is not javascript because it's not the best example of good language with simple and high quality things inside. I like to recommend Ruby with Ruby on Rails. It's a OOP language where you are writing elegant and simple code and Ruby on Rails is the best framework to see how fast you can implement applications when you get all features that you need out of the box.
Backend frameworks
- Node - expess, nest
- Ruby - Ruby on Rails
- Php - Symfony
- Python - Django
- Creating APIs
I already said regarding ruby and ruby on rails. For Php I would pick Symfony, for Node expess as super small framework where you need to install lots of stuff additionally and nestjs for more real framework solution, for Python Django is the most popular solution. The most important thing for you as a frontend developer is to understand how to create APIs that you are normally using from frontend side.
Databases
- Mongodb
- Postgres
As a backend developer you also need a database to save somewhere. The are 2 most popular types of databases document oriented and relational. This is why here are 2 most popular databases for you. Mongodb is document oriented and super popular in node development and postgres is relational and is nice for understanding standard and correct ways of building relations in database
Deployment
And last but not least is deployment. You may also omit this knowledge until some point where you want to bring your project in production. There are lots of services which helps you to deploy your projects to production but they all costs money and doesn't bring too much benefit for own usage. This is why here is heroku. It's an old service where they have free tier so you can deploy for free your project with git quite easy in production. Other than for free I won't use it.
The normal solution is to rent and setup your own server. It can be as cheap as 3$ per month and is fine for small projects. You need some unix skills there for sure but then it won't cost you a lot. Other then that here is Docker which is a nice solution where your application is completely isolated and runs inside a container. It simplifies local development and deployment significantly. By the way I also have a Docker course where we setup it from empty folder to project running in production. I will link it down in the description box below.
So here are the main things are you must learn in order to become a good web developer. Sure it's a long journey but it pays a lot. If you have other ideas what you must learn to become a developer please write down in comments below.
Also don't forget to check my full courses regarding different web technologies.