Contact Us

The Front-End Web Developer Roadmap for 2021 | by Mehdi Aoussiad | JavaScript In Plain English | Dec, 2020 | Medium

Ruby on Rails | March 30, 2021

The Front-End Web Developer Roadmap for 2021

Step by step guide to becoming a modern front-end web developer.

Nowadays, front-end web development has become more complex than it was. It’s more than just HTML, CSS, and JavaScript. There are a lot of technologies you need to learn, the tasks are many as well. However, if you have the passion and discipline, you can definitely become a successful front-end web developer.

In this article, we will give a front-end web developer roadmap of how you should learn front-end web development in 2021. Let’s get right into it.

1. How does the web work?

Here is a list of some topics that you need to consider:

2. Learn the basics: HTML and CSS

Once you have a basic understanding of HTML, you can start learning the basics of CSS. Well, CSS stands for Cascading Style Sheets. It is used to define how your HTML elements should look like. It is also used to make responsive layouts and it makes your webpage more beautiful as well.

CSS is easy to learn, but difficult to master. There are a few topics that you want to pay more attention to, like:

I would also recommend that you learn some web and UI design fundamentals. This will give you the potential to make good looking web pages as a front-end web developer.

3. Learn to use Git and Github

So learn the basics of Git and how to use it in your command line. Also, create an account on Github and learn how to create your first repository in order to push your HTML and CSS code to it using Git. This will give you the habit of using Git and Github for your future projects in front-end web development.

4. Website deployment

Back in the day, it was a lot more difficult to do. But now, it’s super easy and you can use tools like GitHub Pages, or Netlify.

5. JavaScript

When it comes to JavaScript, you need to learn the basics first. Things like variables, data types, functions, arrays, objects, and etc. You also need to learn about how to manipulate the DOM and many more.

Here is a list of things that you need to consider:

6. Learn Sass

Sass is a powerful tool if you are working a lot with CSS. It makes your life easier, and it helps you to not repeat yourself in CSS.

7. Package managers and Web bundlers

A package manager is basically a tool that automates the process of installing, updating, configuring, and removing programs or projects.

After that, you need to learn about build tools. Things like task runners(NPM scripts or Gulp) and web bundlers(Webpack, or Parcel).

8. Pick a framework

For React it’s actually a JavaScript library for building user interfaces. It’s is based on components and it has a virtual DOM which makes your web application performant and faster. Vue is also a great framework, they have an amazing community and documentation.

To summarise, choose any framework you want depending on the market in your location. In the end, they are just tools, what matters is that you know the basics(JavaScript).

You also need to learn about state management, there many tools you can use based on what framework you choose(Redux, VueX…). Here is an image below from the popular roadmap.

State management.

9. Server-side rendering and Static generators

After that, you will want to build some applications like a Job Search tool, a blog, or a Document page, and etc.

10. Testing your apps


Thank you for reading this article, I hope you found it useful. If so, get more similar content by !

This content was originally published here.