Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yaxingson/full-stack-developer-roadmap

Roadmap to becoming a full stack developer in 2024
https://github.com/yaxingson/full-stack-developer-roadmap

full-stack guidelines roadmap

Last synced: 12 days ago
JSON representation

Roadmap to becoming a full stack developer in 2024

Host: GitHub
URL: https://github.com/yaxingson/full-stack-developer-roadmap
Owner: yaxingson
License: other
Created: 2024-07-05T02:34:26.000Z (7 months ago)
Default Branch: main
Last Pushed: 2024-12-29T01:24:09.000Z (21 days ago)
Last Synced: 2024-12-29T02:17:28.780Z (21 days ago)
Topics: full-stack, guidelines, roadmap
Homepage:
Size: 271 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

        # Full Stack Developer Roadmap

English   |   [Chinese](./README.zh-CN.md)

> Roadmap to becoming a web developer in 2024.

Below you can find a chart demonstrating the paths that you can take and the libraries that you would want to learn to become a Web developer. I made this chart as a tip for everyone who asks me, "What should I learn next as a Web developer?"

## Disclaimer

> The purpose of this roadmap is to give you an idea about the landscape. The road map will guide you if you are confused about what to learn next, rather than encouraging you to pick what is hype and trendy. You should grow some understanding of why one tool would be better suited for some cases than the other and remember that hype and trendy do not always mean best suited for the job.

## Roadmap

![](./full-stack-developer-roadmap.png)

## Resources

1. Download Tools

   

   - [sublime text](https://www.sublimetext.com/)

   - [visual studio code](https://code.visualstudio.com/)

   - [webstorm](https://www.jetbrains.com/webstorm/)

   - [git](https://git-scm.com/)

   - [chrome]()

2. Prerequisite knowledge

  

   - [HTTP]()

   - [datastruct & algorithm]()

   - [design pattern]()

   - [linux]()

  

3. Basic

   

   - [html]()

   - [css]()

     

     - preprocessor: [less]()、[sass]()、[stylus]() & [postcss]()

     - frameworks: [bootstrap]()、[materialize]() & [tailwindcss]()

     - architecture: [BEM]()、[CSS Modules]()、[Atomic]() & [OOCSS]()

     - css in js: [styled-components]() & [emotion]()

   - [javascript]()

   - [typescript]()

   - [node]()

  

     - package managers: [npm]()、[yarn]() & [pnpm]()

     - task runners: [npm scripts]() & [gulp]()

     - build tools: [webpack]()、[rollup]() & [vite]()

4. Advanced

   - frontend frameworks

     - [vue]()

       

       - state management: [vuex]() & [pinia]() 

     - [react]()

       

       - state management: [redux]() & [mobx]()

   - backend frameworks

     - [express]()

     - [koa]()

   - database

     - [mysql]()

     - [mongodb]()

     - [redis]()

   - testing

     - unit testing

       

       - [jest]()

       - [mocha]()

       - [vitest]()

     

     - end-to-end testing

       

       - [cypress]()

       - [puppeteer]()

       - [playwright]()

   - cross-terminal

     

     - desktop: [electron]()

     - mobile: [react-native]()

5. Utility Libraries

6. General Development Skills

   - Use google Search.

   - Get familiar with terminal, configure your shell (bash, zsh, fish).

## Contribution

## License

[![License: CC BY-NC-SA 4.0](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by-nc-sa/4.0/)