Fullstack web developer roadmap for 2021

Web Development
, ,
#1

Many students want to know which concepts should be covered to become a full-stack web developer and in what sequence. So I am sharing this full-stack web development roadmap with you all for reference:-
First cover the basics:-

  • HTML5 tags
  • CSS
  • Responsive Web design using media queries
  • Introduction to bootstrap/tailwindcss
  • Basic of Javascript like variables, loop, array, objects
  • Git and Github basics
  • Set up VSCode for frontend projects

Then move over to advanced topics in frontend:-

  • Functional programming and classes in JS
  • Async JS with async-await keywords
  • ES6 features like spread operator and destructuring
  • Introduction to Reactjs
  • Hooks in Reactjs
    • useState
    • useEffect
    • useReducer
    • useContext
  • How to create custom hooks
  • Redux toolkit
  • Error Boundaries
  • Basics of react-router
  • How webpack, babel works
  • ESLint and prettier setup

The last topic to learn in frontend would be deploying frontend applications to Netlify, Vercel or Firebase

Next, we move to the backend part:

  • What is a REST API?
  • HTTP methods for REST services
  • Organising API endpoints using Postman
  • HTTP Status codes
  • Basics of Node.js
  • File handling and setting up a basic server using Node.js
  • Introduction to Node.js frameworks(Express, Hapi, Fastify) and alternatives(Deno)
  • Introduction to express.js and setting up a basic server
  • Express generator introduction
  • File structure to follow for backend projects
  • Routing setup
  • Middleware
  • Deploying an app to production using Heroku or Firebase
  • Right way to setup CORs plugin for restricting API access
  • Environment variables set up to protect critical keys

Next, we can move towards the database part:-

  • SQL and NoSQL databases
  • When to go for NoSQL databases
  • Introduction to MongoDB and MongoDB atlas
  • Mongoose
    • basics
    • schema
    • how to use a schema in routes
  • CRUD APIs using mongo and express.js

Once all these topics are done one should make 2-3 full-stack applications using the MERN stack.
Then we move towards handling user authentication:-

  • Introduction to session management and cookies
  • How authentication works
  • Authentication using Firebase auth in react
  • Setting up Private routes in react.js

Once basic authentication fundamentals in the frontend are clear we can then move ahead with building custom authentication using JWT in the express.js framework

Optional topics:-

  • Setting up tests in react using jest
  • Writing test cases in node.js

Next, we move ahead with interview preparation part:-

  • Common HTML, CSS interview questions
  • JS interview questions
    • context
    • closures
    • scope
    • function currying
    • Difference between call, apply, bind
    • Difference between map, reduce and filter
    • Event bubbling
  • Common react.js interview questions
    • Virtual DOM in react.js
  • Common Node.js interview questions
    • Libuv in Node.js
    • Event loop and call stack in javascript

You can also learn data structures side by side while preparing Interviews

  • Time and space complexity
  • Introduction to DSA (Data Structures and Algorithms)
    • Stack
    • Queue
    • LinkedList
    • Tree
    • Hashmap
  • Data structures implementation using JavaScript
  • Common sorting and searching algorithms

This finishes the overall full stack developer roadmap for students.