![Web Developer Roadmap - 2021](./.github/images/banner.png)

> Roadmap to becoming a web developer in 2021

[![](https://img.shields.io/badge/-Roadmaps%20-0a0a0a.svg?style=flat&colorA=0a0a0a)](http://roadmap.sh)
[![](https://img.shields.io/badge/-Guides-0a0a0a.svg?style=flat&colorA=0a0a0a)](http://roadmap.sh/guides)
[![](https://img.shields.io/badge/-Translations-0a0a0a.svg?style=flat&colorA=0a0a0a)](./translations)
[![](https://img.shields.io/badge/%E2%9D%A4-YouTube%20Channel-0a0a0a.svg?style=flat&colorA=0a0a0a)](https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1)


[roadmap.sh](https://roadmap.sh) is a community effort to create roadmaps, guides and other educational content to help guide the developers in picking up the path and guide their learnings.

***

<p align="center">
		<sup>Special Announcement:</sup>
		<br>
		<a href="https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1">
			<img width="70px" src="https://roadmap.sh/sponsors/youtube.svg">
		</a>
		<br>
		<sub><b>We now have a YouTube Channel</b></sub>
		<br>
		<sub>I plan on covering the roadmaps and put more content there<br><a href="https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1">Subscribe to the channel</a>.</sub>
</p>

***
<h3 align="center"><strong>Purpose of these Roadmaps</strong></h3>

> The purpose of these roadmaps is to give you an idea about the landscape and to guide you if you are confused about what to learn next and not to encourage you to pick what is hip and trendy. You should grow some understanding of why one tool would be better suited for some cases than the other and remember hip and trendy never means best suited for the job.

<h3 align="center"><strong>Note to Beginners</strong></h3>

> These roadmaps cover everything that is there to learn for the paths listed below. Don't feel overwhelmed, you don't need to learn it all in the beginning if you are just getting started. We are working on the beginner versions of these and will [release it soon](https://roadmap.sh) after we are done with the 2021 release of the Backend and DevOps roadmaps.

***

## Available Roadmaps

Here is the list of available roadmaps with more being actively worked upon.

- [Frontend Roadmap](https://roadmap.sh/frontend)
- [Backend Roadmap](https://roadmap.sh/backend)
- [DevOps Roadmap](https://roadmap.sh/devops)
- [React Roadmap](https://roadmap.sh/react)
- [Angular Roadmap](https://roadmap.sh/angular)
- [Android Roadmap](https://roadmap.sh/android)
- [Python Roadmap](https://roadmap.sh/python)
- [Go Roadmap](https://roadmap.sh/go)
- [Java Roadmap](https://roadmap.sh/java)
- [DBA Roadmap](https://roadmap.sh/dba)

If you think that these can be improved in any way, please do suggest. Also, if you would like to contribute to existing roadmaps or add a new roadmap, please open an issue or reach out to [@kamranahmed](https://twitter.com/kamranahmedse).

## Development

The website is built with Next.js, contains roadmaps which are the step by step guides for developers, guides which are the easier to understand explanations on the complex topics. Anyone can contribute to the website by suggesting changes to existing paths, adding learning resources, becoming an author by adding new guides, updating the existing guides.

Clone the repository, install the dependencies and start the application

```bash
git clone https://github.com/kamranahmedse/roadmap.sh
npm install
npm run dev
```

## Contribution

> Have a look at [contribution docs](./CONTRIBUTING.md) for how to update any of the roadmaps

* Add new Roadmap
* Suggest changes to existing roadmap
* Improve the site's codebase
- Write tests
- Discuss ideas in issues
- Spread the word
- Reach out with any feedback [![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/kamranahmedse.svg?style=social&label=Follow%20%40kamranahmedse)](https://twitter.com/kamranahmedse)

<br>
<hr>
<br>

<div align="center">
	<p>
		<sup>
			<a href="https://github.com/sponsors/kamranahmedse">My open source work is supported by the community</a>
		</sup>
	</p>
	<sup>Special thanks to:</sup>
	<br>
	<p>
	<a href="https://oss.capital">
		<div>
			<img src="./.github/sponsors/oss-logo.svg" width="300" alt="OSS Capital">
		</div>
		<div>
			<sup><b>Founded in 2018, OSS Capital is the first and only venture capital platform focused<br>exclusively on supporting early-stage COSS (commercial open source) startup founders.</b></sup>
		</div>
	</a>
	</p>
</div>

<br>


## License

Have a look at the [license file](./LICENSE) for details