WEBDEV.md

Web Dev Roadmap

Compiled by Mayank Mathur (Web Dev Head 2021)

~ Aryan Bhosale (Web Dev Head)

Note:

1. Never buy any course, everything is available for free on internet.
2. If faceing any problem or bugs, google you can find everything on stackoverflow and documentation of libraries you are using.

Vanilla WebDev (Basics)

HTML5 and CSS3

• HTML5 and CSS3 from scratch

  • Learn HTML5 and CSS3 From Scratch - Full Course

• CSS3 Flexbox and Grid (Timestamp - 3:27:47 to 4:44:38)

  • CSS Tutorial - Zero to Hero (Complete Course)

JavaScript

• JS Crash Course (Basic)

  • JavaScript Crash Course For Beginners

• JS Full Course (Advance)

  • Learn JavaScript - Full Course for Beginners

• JS DOM

  • DOM Crash Course 2020 - How Does JavaScript DOM Work?

• JS Udemy Course ((Optional)) (Expert)

  • The Complete Javascript Course

FrontEnd Frameworks

ReactJs

• React Playlist (will also cover basic Redux) ((JS function Component))

  • React Tutorial For Beginners

  • 10 React Hooks Explained // Plus Build your own from Scratch

Above course teaches React in JS function format that is using React hooks , etc. (recomended)

• React ((Class component)) (optional)

  • ReactJS Tutorial - 6 - Class Components

  • React Component Lifecycle - Hooks / Methods Explained

not recommended but needed if working in team or someone’s existing codebase

• React Hooks v/s Class Components

  • Using React Hooks vs. Class Components

Read documentation for more help :

React - A JavaScript library for building user interfaces

Backend

APIs

• HTTP

  • HTTP Crash Course & Exploration

• RESTful API

  • What Is A RESTful API? Explanation of REST & HTTP

• Download Postman

  • Download Postman | Get Started for Free

• Postman PLaylist (detailed)

  • Postman Beginner Tutorial

Node.js

• Node.js Crash Course

  • Node.js Crash Course

• Building REST API with Node.js Playlist

  • Building a RESTful API with Node.js

• Complete Udemy Course (Optional)

  • NodeJS The Complete Course

• Alternative Videos for reference and easier understanding :

  • Node.js Tutorial For Beginners | Node JS Crash Course

Frameworks

Express JS

• Express JS Crash Course

  • Express JS Crash Course

Database

• SQL vs NoSQL

  • SQL vs NoSQL or MySQL vs MongoDB

• NoSQL

  • MongoDB

    • mongoDB crash course

      • MongoDB Crash Course

    • RESTful API using mongodb,node,express

      • Build A Restful Api With Node.js Express & MongoDB | Rest Api Tutorial

    • Detailed Expert Course (Optional)

      • Mongodb the complete developers guide

  • Mongoose

    basically used to use more mongodb more easily and in a structured way.

    • CRUD using Mongoose , mongoDb

      • MongoDB + Mongoose + Node.js Crash Course | CRUD and fundamentals of MongoDB

• SQL

  • PostgreSQL

    • Postgres Full Course

      • Learn PostgreSQL Tutorial - Full Course for Beginners

    • Detailed Expert Course (Optional)

      • SQL and PostgreSQL

  • Sequelize

    sequelize basically lets you use SQL databse without knowing SQL language.

    • Sequelize PLaylist

      • Sequelize

Deployment

Note: change all important login credentials, etc to environment variables.

How To Deploy a Full-Stack MERN App with Heroku/Netlify

Netlify - mostly for deploying frontend

• How to deploy a React application to Netlify

Heroku - to deploy backend

• How to deploy a Node Application and Database to Heroku

Conclusion

This will get you to Full-Stack Dev Level (MERN , PERN stack) but the learning never stops explore new frameworks, techstacks, new languages and tech