There are some great roadmaps for web developers out there. But some make you solve a "puzzle" before even getting started, as there are multiple choices that you have to make.
When I started to learn Web Development, I wished that I could find an experienced developer who would tell me what they had done to become a Web Developer. Unfortunately, I couldn't find anyone.
Now that I've worked in the industry for 4 years, I want to share with you how I would start to learn Web Development in 2021. In this article, I will show you every step that you can take from a beginner to become a developer.
I will start with some Essential Tools that you should know, then cover the Programming Languages and Libraries/Frameworks that you need to learn to become a Front-end or a Full-stack Developer.
I will also be talking about some example projects that you can build to practice your skills.
You can also find an updated roadmap on my website.
Tools You Need to Know to Become a Web Developer
I'll assume that you are a beginner. In that case, there are a few tools that you need to know before getting into programming.
VS Code (or other code editor)
First, you should learn how to use Visual Studio Code, which is a source code editor. It is a free and powerful tool.
In the beginning, I recommend learning some of the basic shortcuts and installing some of the extensions like ESlint, Prettier, or Live Server.
Here's a free, full-length course on the freeCodeCamp YouTube channel to get you started.
The Command Line
Next, you need to know about the Command-Line. You should learn what it is, and some of the basic commands like how to move around directories, how to create a new directory, or how to create a new file.
Version Control - Git and GitHub
No matter what you do, as a developer, you need to know about Git. Git is a Version Control system used for tracking changes. It is usually used with GitHub, which is a code hosting platform.
In the beginning, learning Git might be overwhelming, therefore you just need to know some of the basics like how to create a new Repository, how to clone a project, how to make a new commit, and how to pull and push the new changes.
One of the best ways to practice Git is by working in a team. There, you need to know how to create a new branch, how to make pull requests, and how to resolve conflicts.
Here's a great Git and GitHub crash course on the freeCodeCamp YouTube channel to get you going with version control.
Design tools - Figma
The last tool is Figma. Figma is a design tool and is free to use for individuals. But here I want to talk about how to use Figma as a developer.
As a developer, you might get designs from designers on your team. With Figma you can inspect the code of the elements and measure the layout. Therefore, you need to know how to read Figma design, like how to get the color, typography, or spacing right.
Alright, so these are the tools that you need to know of when getting started. You don't need to know everything, but be sure that you understand the basics so that you can improve while learning to code.
Programming Languages Web Developers Should Learn
HTML and CSS
Next, let's continue with programming languages. And let's start off by talking about Responsive Websites.
Responsive websites are sites that look good and are usable on all devices or screen sizes. You probably know how important it is to build a responsive website, as people use so many different devices these days.
So let's jump to the first two languages that you need to know to build a website: HTML and CSS.
HTML stands for Hypertext Markup Language. It it is used to build the skeleton for your website. HTML is not difficult to learn, but you might want to pay more attention to HTML forms as they will be fundamental in the future.
CSS stands for Cascading Style Sheets. This is a markup language but I also consider it to be a programming language. CSS is not necessarily difficult to learn but it's difficult to master.
There are few topics that you want to pay more attention to like:
- Box model - how margins, padding, and borders work together.
- CSS units - used for expressing lengths (e.g: rem, vh, and vw).
- Position - specifies the type of positioning method. It also confuses many people so make sure you spend some time on it.
- Variables - or Custom properties are entities that can be reused throughout a document. This is my favorite feature in CSS. They make working with CSS so enjoyable and you can create themes with just a few lines of code.
- Media query - decides what to show on different screen sizes. They are a key component of responsive design.
- Animation - lets an element change from one style to another. If you know how to use animation correctly, it makes your site stand out. Otherwise, it will make your website look unprofessional, so be careful.
- Flexbox, CSS Grid - used for building Responsive layouts (I forgot to mention this in the video).
When you know the basics of HTML and CSS, the next step is to build some basic websites. For example, you can try a Homepage, a Form like a login page or a checkout page. You can even build a Portfolio. You can find example projects on DevChallenges.io.
Once you have your website, you need to put it on the internet, so people can see it. Deployment is the process of deploying your code to a hosting platform.
Here's a full YouTube course on how to get your site online that covers the entire process from start to finish.
Then there are topics that you will want to dive deeper into.
First, we have debugging. This is the process of finding and fixing errors. Here's a great in-depth guide to bug squashing to get you started.
Then there are other topics like Objects, Primitives, and Arrays. Especially when working with Arrays, you need to know about Array methods as well.
Functions are the main building blocks in your program. So make sure that you don't overlook them.
And no matter how good you are with programming, you will have errors in your scripts. This means you'll want to know about Error handling as well.
Asynchronous programming is important, especially when you need to communicate with the server. So spend some time learning about Promises and Async/Await.
You also need to learn about different User Interface Events like click, mouse over, mouse down, and so on.
The Fetch API is an important topic. It lets you send network requests to servers. This is useful, for example, when we need to submit a form or get a user's information.
Another important topic is Storing Data in the browser. Here you need to know what the differences are between Cookies, LocalStorage, and sessionStorage.
Other less important topics when you are just getting started are Regular expressions, Web Components, and Websockets.
Regular expressions are used to search and replace text. Web Components, are a new thing but you should totally check them out.
Lastly, we have Websockets. They are useful when you need to have continuous data exchanges like in chat applications.
TypeScript provides static typing, that allows you to catch errors earlier in the debugging process. It also saves your time as it finds bugs before the code runs.
Here's a helpful post on TypeScript types to help you think about them the right way.
Alright, so let's move on.
Libraries and Frameworks to Know
To become a Front-end developer or a full-stack developer, you need to know some of the libraries and frameworks that are out there.
Libraries and Frameworks for Front-end Developers
So let's start with Sass, which is a preprocessor scripting language. I use Sass in almost every one of my projects. It makes the CSS look cleaner and makes it faster to develop.
Here's a full course on Sass that'll teach you how to give your CSS superpowers.
Here's a good beginner's guide to NMP that'll help you get started downloading packages right away.
One of my regrets is that I didn't know about Contentful sooner. Contentful is a Headless Content Management System or CMS. It's different from a traditional CMS, as you can store data in Contentful and use it for your front end.
And to get a frontend job, you need to know at least one frontend Framework. I personally would choose React. We'll talk about other frameworks later.
Besides learning the basics of React, you also want to pay attention to how State is managed in React applications and how Forms work in React.
Once you've learned some basics, you can solidify your skills by building a bunch of projects with React in this YouTube course.
Another regret that I have is that I didn't know about Next.js sooner. Next.js is used for server-side rendering or generating static websites. And yes, Next.js is still quite new, but I do believe that this is the skill we must have as React developers.
You can learn all the Next.js basics in this in-depth handbook.
After learning these tools, you also might want to take a look at Material UI which is a React component library, or Tailwind CSS which is a CSS framework that helps you speed up your work when prototyping or freelancing, for example.
You can start by building some simple reusable components to understand how React works. Then you can build more complex applications like a Quiz App or a Todo App.
After that, you will want to build even more difficult applications like a Job Search tool, a blog, or a Document page. Again you can find example projects on DevChallenges.io.
After that, if you want to learn more, you can look into GraphQL which is a data query and manipulation language for APIs. Personally, I would also spend some time learning PostgreSQL. Compared to MongoDB, it's a bit more difficult to learn as you need to learn about SQL as well.
After learning these tools, you can practice by building applications like an Image Uploader, Authentication, or Chat Room. You can also find these projects on Devchallenges.io.
Now you are ready to apply to a Full-stack position. If your job requires you to know Vue.js, Angular or even Svelte you can spend some time learning those tools, too. It should not be too difficult once you already know React.
That concludes the roadmap. I hope you find it useful. One of my goals for 2021 is to make videos about every topic that we just talked about. Therefore, don't forget to check out my Youtube Channel and DevChallenges Learn.