Full Stack Developer Roadmap 2021
Tags: fullstack, devops, javascript, mongodb
Published: 2021-06-25 17:12:12

Most of the newcomers are planning to go for full-stack development.


## What is a full-stack developer?

A person who can develop the entire application (both client and server).

**Advantages:**
- Master all the techniques involved in a development project.
- Can provide help to all the team members
- Can reduce the cost of the project
- Can reduce the time used for team communication

**Disadvantages:**
- The solution chosen can be dependent on developer skills
- The solution chosen can be wrong for the project
- Being a full-stack developer is increasingly complex

---

## HTML
Is designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript and mandatory for all web developers

Must read:
- Basic HTML and DOM
- Form
- HTML5 APIs (Storage)

A beginner can start from w3schools

___

## CSS
CSS — Styling for web pages (Makeup HTML)

Must read:
- Selectors (class, ID, element, attribute, pseudo)
- Box Model
- Position (absolute, fixed, relative)
- Flex, Grid
- Media Query (screen, print)

___

## JavaScript

Javascript is the programming language of the Web.

Must read:
- Basics (var, loop, statements)
- Scope
- Closure
- Functions
- Hoisting
- DOM manipulation
- Event handling

{% link https://dev.to/hidaytrahman/roadmap-zero-to-hero-in-javascript-8lo %}

{% link https://dev.to/hidaytrahman/popular-javascript-interview-questions-5ac1 %}

{% link https://dev.to/hidaytrahman/15-javascript-browser-apis-3d17 %}

Useful articles

- [7 JavaScript Concepts That Every Web Developer Should Know](https://dev.to/hidaytrahman/7-javascript-concepts-that-every-web-developer-should-know-1pol)
- [Object destructuring in JavaScript](https://dev.to/hidaytrahman/object-destructuring-in-javascript-21h8)
- [9 Array Methods Every JavaScript Developer Should Know](https://dev.to/hidaytrahman/9-array-methods-every-javascript-developer-should-know-5bfg)
- [CRUD Operation with Array in JavaScript](https://dev.to/hidaytrahman/crud-operation-with-array-in-javascript-5865)
[JavaScript Array Methods Cheat Sheet](https://dev.to/hidaytrahman/javascript-array-methods-cheat-sheet-1phb)

___


## React
React is an open-source front-end JavaScript library for building user interfaces or UI components. React can be used as a base in the development of single-page or mobile applications.

Must read:
- Components
- Hooks
- Router
- Data binding
- State Management

{% link https://dev.to/hidaytrahman/react-must-have-basic-setup-4a5h %}

___


## NodeJS
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.

Must read:
- HTTP
- File Storage (CRUD)
- OS
- Events
- Sync and Async
- Event Loop


___



## ExpressJS
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Must read:
- Middleware's
- Routing
- Error Handling
- Debugging

Additionally
- Authentication
- Authorization
- Crypto

___


## MySQL
MySQL is an open-source relational database management system. Its name is a combination of “My”, the name of co-founder Michael Widenius’s daughter, and “SQL”, the abbreviation for Structured Query Language


**This is not necessary but basic knowledge will definitely help you with the relational database management system.**
___


## MongoDB
MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas

Must read:
- Databases
- collections
- Schema
- Aggregation

___

## Live Projects and Deployments

Woohoo!!!!!!! 🥳 🥳

You did it….. now it's time to develop something with a real-world solution.

### Project Ideas
- Blog (CRUD)
- Todo App [example](https://github.com/hidaytrahman/penless-todo)
- Chat Bot
- Quiz App

{% link https://dev.to/hidaytrahman/small-project-ideas-6ge %}


**Congratulations!!! You’re now a full-stack developer. 😎**

You can now consider yourself as a one-man army. 🤝

```All the best <Happy Code />```