Web Development RoadMap

Step 1: Basic building blocks.

1. HTML
2. CSS
3. JavaScript

Step 2: Learn CSS Frameworks.

1. Bootstrap
2. Tailwind

Step 3: Learn different system commands.

1. Git
2. Github

Step 4: Backend Development.

1. JavaScript
• Express.js
• Node.js
• MERN (MongoDB, Express, React, and Node.js. ) or MARN (MongoDB, Express, Angular, and Node.js.)
• Next.js
2. Python
• django
• Flask
3. PHP
• LAMP (Linux, Apache, MySQL, and PHP)
4. Databases
• SQL (Structured Query Language)
• MySQL
• phpMyAdmin
• NoSQL
• MongoDB (Same syntax as JavaScript at both Client side and Server side as well)
• Two libraries to integrate with Express
• mongoose
• Prisma

Step 5: Project Deployment.

FREE

1. Vercel
2. Netlify

PAID

1. aws
2. Azure
3. Digital Ocean

Frontend Frameworks:

1. React.js
2. Angular
3. vue.js

HTML Template Engines:

1. Pug
2. Handlebars
3. EJS (Embedded JavaScript)

JavaScript important sub topics:

1. Asynchronous Programming
2. JavaScript Promises
3. Async Await
4. Call Stack

React important sub topics:

1. States
2. Hooks
3. Redux

• React.js -> Next.js

Backend important sub topics:

1. API
2. Request & Response Cycle
3. MVC Architecture
4. Templating
5. Connect Backend with Database
6. Error Handling

Advanced Backend:

1. docker
2. Kubernetes
3. Containerization
4. redis
5. DevOps
1. aws
2. Azure
3. CICD
4. Containerization
5. redis

Alternative of JavaScript:

• TypeScript

Advanced:

1. System Design

Create Projects:

1. Clone Projects
2. Games
3. Portfolio

Learn Github Copilot (PAID):

• Alternative Code Llama

Learn Linux based VPS Deployment.

SQL

• Type: Language (Structured Query Language).

• Function: Used for managing and querying relational databases.

• Usage: Commonly used with RDBMS like MySQL, PostgreSQL, SQL Server, etc.

• Data Model: Relational, structured in tables.

• Schema: Enforced; requires predefined tables and data types.

MySQL

• Type: Relational Database Management System (RDBMS)

• Data Model: Relational; uses SQL for querying.

• Schema: Enforced schema with predefined tables, columns, and data types.

• Use Cases: Suitable for applications that require ACID transactions, like financial applications and e-commerce platforms.

NoSQL

• Type: Non-relational Database Systems

• Data Model: Flexible; supports various data models like key-value, document, column-family, and graph databases.

• Schema: Dynamic; allows for flexible data structures.

• Query Language: Varies by database; can include query languages like JSON query or SQL-like languages adapted for specific data models.

• Use Cases: Ideal for scalable, high-performance data storage like social networks, real-time analytics, and big data applications.

To summarize:

• SQL is a language used for managing relational databases.

• MySQL is a specific relational database system that uses SQL.

• NoSQL encompasses a variety of non-relational database systems with different data models.

Search: Middleware

Reference: mdn

HTML [1 week]

CSS [2 weeks]:

• Be very Careful don’t spend too much time.

• Learn parallelly with HTML and JavaScript.

• Once you have learnt enough you can try: Sass, SCSS, Less; but I don’t recommend it. Stick to the path of learning CSS and then TailwindCSS (later)

JavaScript (Spend Good Amount of time) [1 - 1.5 Months]:

• Learn basics.

• Learn Async nature of JS.

• Functions o Promises & Callbacks

• APIs o You can Refer to this course.

• At this point polish your skills using projects like Weather app, Myntra Clone, Netflix clone, Spotify Clone [Build 5 projects like this].

Learn a CSS Framework o Bootstrap:

• Bootstrap
• TailwindCSS [Recommended]
  

React:

• States
• Hooks
• Props
• Events
• React-Router-Dom
• Redux

BACKEND:

• A lot of choices are there like: Django, Flask, FastAPI, PHP, Nest.js o ExpressJS.

• Request
• Response
• Middleware
• APIs
• ejs/pug [Optional]

Database:

• Go for MongoDB as its syntax is JavaScript based (Recommended)

• Recommended with MongoDB is ORM like Mongoose/ Prisma

• Look into MongoDB Atlas & MongoDB Compass

If you are working with SQL, look into MySQL + PHPMyAdmin.

Frameworks:

NextJS is my recommendation. Learn following topics thoroughly

• Routing
• Server Actions
• Middlewares
• Auth.js
• Dynamic Routing
• APIs

Angular:

Additional Tools

• Git and Github
• Llama
• GitHub CoPilot