The Ultimate 2021 Backend Developer Roadmap
Tags: javascript, node, graphql, nextjs
Published: 2021-10-25 15:25:11

You don’t need to spend $10k on a Bootcamp to become a backend developer.

Whether you need to learn: Node, Express, SQL, NoSQL, REST, JSON, APIs, or the latest fancy technologies, you can do it for free, leveraging the power of the internet.

 
After the success of [The Complete 2021 Front-end development roadmap](https://vitto.cc/the-complete-front-end-developer-roadmap-2021/), I’ve personally gathered, watched, tested, and reviewed thousands of resources, to come up with this:

**JavaScript-based 2021 backend developer roadmap.**

---

##1. The Start of Your Backend Journey: Learn how the web works
![Room with servers where backends of applications are usually stored](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oarbvt3zy08ogmx8hxa9.jpeg)
Before starting your journey to become a **backend developer**, is strongly suggest to understand the **main mechanics of the web, and how data exchange works**:

* **HTTP/HTTPS.**
* **Server/Clients.**
* **DNS.**
* **Browsers.**
* **COOKIES.**

Those are only some of the concepts you’ll need to master, to kickstart your career and start building production-ready APIs.

[Learn how the web works — A primer for newcomers to web development.](https://www.freecodecamp.org/news/how-the-web-works-a-primer-for-newcomers-to-web-development-or-anyone-really-b4584e63585c/)

---

##2. Backend Development: Fundamentals of Computer Science
![Dog learning backend development ](https://vitto.cc/wp-content/uploads/2021/10/1_wuEUDAkSJw0qIIAOK4qoiw.jpeg)

*Let me say one thing: fundamentals, are fundamentals.*


You can learn a **JavaScript Backend framework** without knowing the fundamentals of Computer Science but is probably the worst thing you can do.

Learning and understanding:

* **How a computer works.**
* **How variables are stored.**
* **The differences between compiled code and scripts.**
* **What compile and runtime errors are.**
* **The principles of programming.**

Is the key to properly understanding the underlying mechanics of complex Backend Frameworks, and how to optimize your code towards the desired outcome.

Published by **Harvard** itself, this [Free Computer Science Fundamentals](https://learning.edx.org/course/course-v1:HarvardX+CS50+X/home) Course is the best way to set the foundations of your development career starting from the basics.


---

##3. 2021 Backend developer roadmap: Learn HTML and CSS
![Image of a screen with css code to style front-end pages](https://vitto.cc/wp-content/uploads/2021/10/1_pRj95hfmkIDo0AtgHtWIFg.jpeg)
Even if you just want to develop fancy APIs and backend systems:

It’s key to learn how front-end development works and how to better serve its needs. To do so, you can start by learning some **CSS and HTML.**

There are an awful lot of amazing free resources about HTML and CSS out there, I’ve personally reviewed some:

1. **[Intro to HTML and CSS — Khanacademy](https://www.khanacademy.org/computing/computer-programming/html-css)**
2. **[Responsive web design + free certificate on FreeCode(300hrs)](https://www.freecodecamp.org/learn/responsive-web-design/)**


### 3.1 Create a Portfolio: Develop Your First Project
*Learning by doing is key.*
![A table with a MacBook and a website displayed](https://vitto.cc/wp-content/uploads/2021/10/1_0Ra64YXCu5CVWlufq59SOg.jpeg)

We mainly learn by solving problems, to solve problems we need to practice, to **practice we need to create projects.**

Creating a Portfolio while walking your journey to becoming a backend developer, is a great way to both: **practice and exercise what you learn.**

Start by watching this tutorial on [how to build your personal portfolio using just HTML and CSS.](https://www.youtube.com/watch?v=OY5ISdymgiY)

You will have time to come back and add some proper backend, with its interactions, a database, and probably some data handling and exchange through APIs endpoints.

At this point though, you should be skilled enough to start [making money contributing to Open Source projects](https://vitto.cc/how-to-make-money-with-open-source-as-a-developer/). This not only will be a great training field, but also a way to make some good side income.

---

## 4. Store Your Backend Code in a Repo — Learn Git/Version Control
![Github octocat, the mascotte of GitHub a popular version control SaaS](https://vitto.cc/wp-content/uploads/2021/10/1_DbJrZ73enNNmnB_UxBDcmQ.jpeg)

Git is an opensource version control system, that allows you to:

* **Keep track of your changes.**
* **Back up your code.**
* **Avoid disastrous consequences.**
* **Collaborate seamlessly.**

If hosted on a web service such as GitHub, it allows you to synchronize your code with collaborators, keeping your codebase(repositories) on the web, free to be moved between devices.

[Learn the fundamentals of Git with Mosh.](https://youtu.be/8JJ101D3knE)

---

## 5. Learn the Fundamentals of Web Security
![An hacker sit on a desk, in a dark room with some blue lights and 3 monitors in front of him.](https://vitto.cc/wp-content/uploads/2021/10/1_wM7qHRz14k95BGZk769zIw.jpeg)
Unfortunately, the world is full of bad people ready to steal and use your data, and that of your customers. **Knowing how to properly store and secure data and communications, is key for a backend developer.**

Understand the fundamentals of **web security** and how to handle private information the right way:

* **CORS.**
* **HTTP/HTTPS.**
* **Basic Hashing.**
* **Authentication.**

Those are only some of the concepts you’ll work with while developing your **backends and securing your API endpoints.**

[Learn the fundamentals of Cyber Security for free, in this amazing course by futurelearn.com.](https://www.futurelearn.com/courses/introduction-to-cyber-security)

---

## 6. Add a Pinch of Interactivity— JavaScript
![Books about JavaScript, HTML and CSS, hold vertically by a small rounded cactus in a red and orange vase.](https://vitto.cc/wp-content/uploads/2021/10/1_haMEQHfMceoIpoEs30wzuA.jpeg)

**Learning JavaScript is one of the best investments you can make as a developer.** Adding interactivity to your websites, as well as data manipulation will completely change your projects.

In this **2021 Backend roadmap**, we’re learning how to create our APIs using JavaScript, hence is pretty fundamental to learn it before digging deeper into backend frameworks and libraries.

You can take the free course: [Introduction to JavaScript made by edX and W3C (World wide web consortium).](https://www.edx.org/course/javascript-introduction)

---

## 7. The Start of Your Backend Journey — Node.js and NPM
![Screen with some Backend Javascript, Node and SQL code.](https://vitto.cc/wp-content/uploads/2021/10/1_bWy_a-AK77wbOkKJqrWx0g.jpeg)

There’s no JavaScript backend developer without Node.js and NPM.

The Node.js runtime is the software stack responsible for **installing your web service’s code, its dependencies, and running your service.** Is an asynchronous event-driven JavaScript runtime, designed to build scalable network applications.

Used by companies such as Netflix, Uber, and NASA, it’s something a JavaScript backend developer should know in 2021.

**NPM**, is the **Node Package Manager**, responsible for handling, installing, and importing your Node.js based libraries.

Resources to learn Node.js:

* [The Node.js documentation is a great place to start](https://nodejs.dev/learn)
* [Learn Node.js with The Net Ninja on YouTube](https://www.youtube.com/watch?v=zb3Qk8SG5Ms&list=PL4cUxeGkcC9jsz4LDYc6kv3ymONOKxwBU)

---

## 8. Create Powerful APIs: learn Express.js
![Table with a MacBook testing an API backend code.](https://vitto.cc/wp-content/uploads/2021/10/1_u7A0F0uSK_7dXz-cBbw7Wg.jpeg)

Even if you could potentially create full APIs just by using Node.js, this isn’t convenient.

Express comes to our help:

A minimal and flexible **Node.js framework** that will help you creating APIs effortlessly thanks to a myriad of **HTTP methods and middleware.** Express.js powers thousands of backends around the world, suitable for the most diverse REST APIs.

[Learn Express.js with this free crash course by Traversy Media](https://www.youtube.com/watch?v=L72fhGm1tfE)

---

## 9. Connect Your Backend to a Database
![Closeup of an Hard Drive, usually used to store data.](https://vitto.cc/wp-content/uploads/2021/10/1_VGI5ArSBlPdKdQ_Mv0RB1g.jpeg)

What’s the difference between SQL and NoSQL databases?
Should I use Postgres or MongoDB?

Databases are a huge part of backend development, as those are the **places where your data will be usually stored.**

Learning how to create, manage, edit and connect SQL and NoSQL databases, is key for a backend developer.

[Learn the differences between SQL and NoSQL in this short YouTube video.](https://www.youtube.com/watch?v=ruz-vK8IesE)
 

### 9.1 Should I learn NoSQL or SQL database?
As always: it depends.

Both systems have their pros and cons, which make them great in different scenarios. 
My suggestion? **Pick both a NoSQL and a SQL database to learn.**

I’ve personally tried an awful lot of DB systems, ending up using:

* Postgre as a SQL DB.
* MongoDB as a NoSQL DB.


### 9.2 SQL Database: learn PostgreSQL
![PostgreSQL logo with an elephant](https://vitto.cc/wp-content/uploads/2021/10/1_XIMVb4ZQRfSS4ZnI6WfH0Q.jpeg)
One of the most popular SQL databases of 2021: Postgre is an open-source DB system, with over 30 years of active development.

**PostgreSQL has a strong reputation for reliability, feature robustness, and performance.**

[Start learning PostgreSQL for Free.](https://www.postgresqltutorial.com/)


### 9.3 NoSQL Database: learn MongoDB
![MongoDB logo with a leaf](https://vitto.cc/wp-content/uploads/2021/10/1_qQwwv7aYYcjY1q42pOzPFw.jpeg)

With over 12 years of active development, MongoDB is one of the most popular NoSQL Databases to date.

Hosted by AWS, Google Cloud, and Azure, MongoDB stores the data of thousands of tools and platforms out there.

[Learn MongoDB here](https://university.mongodb.com/)

---

## 10. Ship You Backend Faster: Continuous Delivery & Dev Ops.
Amazon famously delivers new code every 11.6 seconds. Just a few years ago, this was unthinkable.

This is thanks to **Continuous delivery and Integration technologies**: ways to ensure fast execution times, maximizing data gathering, and data-driven decisions.

DevOps stands for development and operations, and it’s a key skill to learn as a backend developer in 2021.

[Learn DevOps from the University of Virginia, on Coursera for Free.](https://www.coursera.org/learn/uva-darden-continous-delivery-devops)

---

## 11. Learn by Doing: Create Projects

There’s no better way to retain notions than doing and solving problems.
Sometimes, finding backend projects to practice sounds hard though.

[Here’s a list of 20+ backend projects ideas to give you some inspiration, on GitHub.](https://gist.github.com/MWins/41c6fec2122dd47fdfaca31924647499)

Just remember: backends are mainly comprised of APIs and Data Exchange, any project including those two domains, will do the job.

You might also want to start writing articles to share your knowledge, build an online presence, and earn from your tech writing skills. [Here’s a list of the best blogging platforms for developers.](https://vitto.cc/4-best-blogging-platforms-for-developers/)


---

## 12. Start Monetizing as a Backend Developer
![Glass with money and leaves ](https://vitto.cc/wp-content/uploads/2021/10/1_skINHS-mNCH55sOiu8KBPA.jpeg)

At this point, you should be able to **set up a proper REST API and get paid for it.**

The best thing about programming is that: is free to get started and pays a lot.

There are **hundreds of ways to monetize your backend development skills**. From open source to APIs monetization, from tech writing to YouTube channels.

[Learn 9 simple ways to start monetizing Open Source as a developer](https://vitto.cc/how-to-make-money-with-open-source-as-a-developer/)

If you want to go deeper into monetization for developers, this is not a free resource but definitely worth the price:

[Ten Ways to Make Money as a Developer, written by Florin Pop, is the best start to monetize your projects.](https://gumroad.com/a/669160563/SkkZt)


---

## 13. Add Types to Your JavaScript Backend: TypeScript
![Graphic with a laptop, the client, a server and a database, used to demonstrate how backend and fronted communication work](https://vitto.cc/wp-content/uploads/2021/10/1_oAd68HgDdoIYKMm3Yl8eWQ.png)

Take JavaScript, add types and compile-time errors, and a much smarter IntelliSense: you’ll have TypeScript.

JavaScript is known to be a type-less language, Typescript “solves” this issue by bringing types (strings, numbers, etc), and a number of other features, to your code.

Great error handling, bug sorting, and code assistance, something a backend developer should know to create better APIs in 2021

Learn TypeScript in this free Udemy Course.

---

## 14. Pick a JavaScript Backend Framework

Choosing a **JavaScript framework** will introduce lots of commodities in your workflows.

Backend frameworks introduce things such as **SSG, SSR, or utilities to speed up your development.**

Before digging into a JavaScript backend framework is key to understand what those terms mean:

* SSG -> Static Site Generation.
* SSR -> Server-Side Rendering.
* CSR -> Client-Side Rendering.
Learn more about [backend rendering methods on YouTube.](https://www.youtube.com/watch?v=2tJedF8I-8Q)

**Backend frameworks are usually based on front-end counterparts**, such as React and Vue, strictly connecting your backend to your front-end.

There are many popular JS backend frameworks, such as:

* **React/NextJS.**
* **Vue/NuxtJS.**
* **Gatsby.**


## 15. React-Based Backend Frameworks: Next.js and Gatsby


### 15.1 Next.js
![Next js logo](https://vitto.cc/wp-content/uploads/2021/10/1_evWiCwVffl0RCeaqayMFxw.png)

React-based and Open-source, Next.js brings hybrid Static and Server-Side rendering to your backend development toolbox.

* [Learn React on YouTube](https://youtu.be/j942wKiXFu8)
* [Learn Next on the official docs](https://nextjs.org/learn/basics/create-nextjs-app)

Originally developed by Vercel.com, you might want to explore their free hosting services as well.

### 15.2 Gatsby
![Gatsby JavaScript Library Logo](https://vitto.cc/wp-content/uploads/2021/10/1_14Qt4_D9lY0ZTGjl3ee4Kw.png)
Gatsby is also a React-based open-source framework for creating websites.

Specialize in Static Websites such as Blogs and homepages.
Amazingly fast, gives you 2500+ plugins to kickstart your backend.

[Learn Gatsby on YouTube](https://youtu.be/Qms4k6y7OgI)

### 15.3. Vue.js Based Backend Framework: Nuxt.js
![Vue.js logo](https://vitto.cc/wp-content/uploads/2021/10/1_9cYxrvAFcM_Hua15uSDGNQ.jpeg)
Based on Vue.js, Nuxt.js is the Next.js counterpart (you don’t say?).

Modular, performant, and easy-to-use Nuxt.js implements Server Side and static rendering to your workflow.

* [Learn Vue.js on YouTube.](https://www.youtube.com/watch?v=qZXt1Aom3Cs&feature=youtu.be)
* [Learn Nuxt.js on YouTube.](https://www.youtube.com/watch?v=Wdmi4k7sFzU)

---

## 16. Shift the Heavy Lifting To the Backend: Learn GraphQL
![GraphQL Logo](https://vitto.cc/wp-content/uploads/2021/10/1_T4x-7hDVPZs2wG59gB7yVg.png)
My grandpa used to say: “REST is Great, but GraphQL is lightweight”

Of course, I’m kidding but, simply put: **GraphQL shifts the data handling coming from APIs, from the client -> to the server.**

This means not more REST, but active data processing and filtering, directly in the backend.

Used by Nasa, Facebook, Airbnb, and GitHub, GraphQL is getting more and more traction in 2021.

[Learn GraphQL with Ben Awad on YouTube.](https://youtu.be/I6ypD7qv3Z8)

---

## 17. Create Lighting fast APIs With Web Assembly.
![Webassebly logo. Useful to create better and faster APIs](https://vitto.cc/wp-content/uploads/2021/10/1_BuBx0wQHKMaRRfXWcIVMbQ.png)
**WebAssembly** is a new type of code that can be run in modern web browsers and provides new features and major gains in performance, to power backends.

It is not primarily intended to be written by hand, rather it is designed to be an effective compilation target for source languages like C, C++, Rust, etc.

[Learn more about WebAssembly on MDN.](https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts)

## 18. Decentralize Your Backend With Web3.0
**Learn Web 3.0 and get paid.**
![The word blockchain. Distributed systems are the new backend systems.](https://vitto.cc/wp-content/uploads/2021/10/1_mFmo4BiW-DGQcZ88J74L1A-1.jpeg)

If you want to take a step further, I suggest you exploring the potentialities of Blockchain and Web3.0 development.

**Blockchain Devs are paid: $140k/year on average.**

[Start learning web3.0 with Oliver Jumpertz.](https://blog.oliverjumpertz.dev/your-roadmap-to-becoming-a-web-30-developer?x-host=blog.oliverjumpertz.dev)

---

## Conclusion: Continue building projects

**Learning backend development in 2021 can be completely free.** In this roadmap, I’ve listed the best resources I’ve used to start my backend journey using JavaScript and landing my first freelancing jobs.

To learn how to code, though, a roadmap is not enough: you need to practice, and you can practice by building projects.

*“The best way to learn is by solving problems”* - Elon Musk
Solve problems, and you’ll get paid for it!