Best Web Development : roadmap and resources by ARD.

What is web development ?

Alright, imagine you have a magic book 📖 where whatever you write in, it appears on a giant screen for the whole world to see and use. That's basically web development!

Basic components for web development, so lets break it down.

1. Frontend:

   The frontend consists of the UI and logical part.

   The UI is the beautiful fonts, images designs, colours and animations that users love to see on the screen. The UI needs to be simple and understandable and easy to use for everyone. Examples of good UI: Inspira UI, Q-filer

   And the logical part can be described as the client side logic, to give an example - when a button pressed something happens like maybe camera opens, some datas are fetched and properly shown on the screen. Examples of good logical part: NovelNest

2. Backend:

   The backend part consists of several parts like:

   Creating a server: First one has to create a server with which the frontend will interact, with help of which it will fetch datas of check user authentication and several logics like this that can’t be directly handled from frontend.

   Server consists of several parts like -

   Routes - the endpoints where you hit to get something done like check if user exists or user is an admin or not.

   Controllers - Where the logic is written of how to handle the frontend queries.

   Database - Where the required datas like user profile, if user is admin or not, product details are stored.

   Middlewares - These are for some additional verifications like if only user is admin then only he/ she can create a post else nobody, so these kinds of logics are handled by functions called middlewares. Like before giving data from database to frontend or before creating a data in database it checks whether user is allowed to do that or not.

   Backend example structure: (Resouces)

3. Roadmap:

   I am a Smart India Hackathon Winner and finalist of several hackathons like Smart India Hackathon, Hack4Bengal, Inter college hackathons etc, so the roadmap that helped me a lot and made me fall in love with web development are as follows:

   Firstly in my first year of college itself I started learning HTML (Hyper Text Markup Language), CSS (Cascade Style Sheet), now HTML and CSS are something that comes from muscle memory like there is no logic to be implemented so don’t try to spend more than 1 to 1.5 months on these and if you get stuck on some HTML tag or CSS property there are lots of online docs to help you out. And HTML, CSS serves to build a good UI in the website.

   Then comes the most important part of web development that is Javascript, this handles all the logics that are implemented on the client side. So try to spend as much time as you can on Javascript. It is said that for only javascript both the interviewer and interviewee are confused because there are so many things. So spend atleast of 2 to 2.5 months on these and practice Javascript properly.

   HTML (HTML resources)

   CSS (CSS resources)

   Javascript (Javascript Resources)

Now these are enough for a first year student to have the grasp of web development basics but as I said HTML and CSS you might find things in online docs but for logical part there are no docs available (if I don’t consider syntaxes) so Javascript you have to spend good amount of time.

Now it’s time to step up your game with frontend, once you have the grasp of Javascript now you can start learning React.

What is ReactJS?

ReactJS is a JavaScript library used to build fast, interactive, and dynamic user interfaces for web applications. It is developed and maintained by Meta (Facebook).

It consists of reusable components so that you don’t have to write same code twice rather you pass properties and use that same component in different way.

Why is React Important?

• Component-Based: Breaks UI into reusable pieces.

• Virtual DOM: Faster updates and better performance.

• One-Way Data Flow: Ensures better code stability.

• Large Community & Ecosystem: Plenty of support and ready-to-use tools.

Advantages of React

✔ Fast Rendering: Uses Virtual DOM for efficient updates.
✔ Reusable Components: Write once, use multiple times.
✔ Easy to Learn & Use: Simple syntax compared to other frameworks.
✔ SEO-Friendly: Helps with search engine rankings.
✔ Strong Community Support: Widely used in industry and open-source projects.

React is widely used by companies like Facebook, Instagram, Netflix, Airbnb, and Uber to create scalable web applications.

React JS resources:

1. If you love project based learning - (Resource-1, Resource-2)

2. If you want to explore - (Reource-1, Resource-2)

3. Raect Hooks - (Resource)

Now after you have done this level of frontend you must lean into backend now !!

Now the key concept of backend is to build a logical server with which the frontend can interact -

So the best practice is to learn Node and Express that will help you to build servers very easily.

What is Node.js?

Node.js is a runtime environment that allows you to run JavaScript outside the browser, typically on a server. It is built on Chrome’s V8 JavaScript engine and enables backend development using JavaScript.

What is Express.js?

Express.js is a lightweight and flexible framework built on top of Node.js that simplifies the process of building web applications and APIs. It provides features such as routing, middleware support, and HTTP request handling.

What is a Port and How is it Used?

A port is a numerical identifier assigned to a process running on a computer that helps in managing network communication. Web servers use ports to listen for incoming requests.

For example, in a Node.js application using Express, you typically specify a port number for the server to listen on:

Example in Express:

const express = require('express'); const app = express(); const PORT = 3000;

app.get('/', (req, res) => { res.send('Hello, World!'); });

app.listen(PORT, () => { console.log(Server is running on port ${PORT}); });

Now there are several types of Requests (with which Frontend interacts with Backend) and Responses (What backend sends to Frontend with respect to a request)

Types of HTTP Requests and Their Uses

HTTP requests allow communication between clients (such as a web browser or mobile app) and servers. The most commonly used request methods in Node.js with Express are:

1. GET (Retrieve Data)

• Used to request data from a server.

• Typically used for fetching pages, resources, or API data.

• Does not modify any data on the server.

• Example: Fetching a list of users.

Example in Express:

app.get('/users', (req, res) => {
    res.send('List of users');
});

2. POST (Send Data)

• Used to send data to the server (e.g., form submission, creating new records).

• Modifies or adds data to the database.

• Often used in combination with a request body.

Example in Express:

app.post('/users', (req, res) => {
    const newUser = req.body; // Data sent by the client
    res.send(`User ${newUser.name} added`);
});

3. PUT (Update Data)

• Used to update existing data.

• Typically replaces the entire resource.

Example in Express:

app.put('/users/:id', (req, res) => {
    const userId = req.params.id;
    res.send(`User ${userId} updated`);
});

4. PATCH (Modify Data)

• Used to partially update a resource instead of replacing it completely.

Example in Express:

app.patch('/users/:id', (req, res) => {
    const userId = req.params.id;
    res.send(`User ${userId} partially updated`);
});

5. DELETE (Remove Data)

• Used to delete a resource from the server.

Example in Express:

app.delete('/users/:id', (req, res) => {
    const userId = req.params.id;
    res.send(`User ${userId} deleted`);
});

Now these datas are stored in Database :

So for a beginner I will recommend MongoDB and do 3-4 projects with this tech stack.

This tech stack is called M (mongodb) E (express) R (react) N (node)

And yay ! you can call yourself a beginner level full stack web developer.

1. Node and Express & MongoDB (Resource-1, Resource-2) if you love data based learning.

2. But if you love project based learning you can learn Node, Express & MongoDB from here (Resource-1)

3. MongoDB Tutorial seperate (Resouce-1)

Now for frontend you can learn bootstrap or tailwind for CSS framework but I will personally prefer Tailwind, once you know CSS Tailwind will be really easy :

• Learn Tailwind

A Fullstack tutorial with Frontend and Backend -

1. Visit here

2. Visit here

Now it’s time to switch to a real database from MongoDB and I prefer PostgreSQL, it is a table based format of storing data with help of keys.

PostgreSQL and Types of Keys

What is PostgreSQL?

PostgreSQL is an open-source, powerful relational database management system (RDBMS) that supports SQL and advanced features like JSON, indexing, and concurrency control.

There are many but most used Datatypes in PostgreSQL:

---

Types of Keys in PostgreSQL

1. Primary Key

• Uniquely identifies each record in a table.

• Cannot have NULL values.

Example:

CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    name VARCHAR(50)
);

2. Foreign Key

• Creates a relationship between two tables.

• Ensures referential integrity.

Example:

CREATE TABLE orders (
    order_id SERIAL PRIMARY KEY,
    user_id INT REFERENCES users(id)
);

3. Unique Key

• Ensures all values in a column are unique but allows NULL values.

Example:

CREATE TABLE employees (
    emp_id SERIAL PRIMARY KEY,
    email VARCHAR(100) UNIQUE
);

4. Composite Key

• A combination of two or more columns to uniquely identify a record.

Example:

CREATE TABLE enrollments (
    student_id INT,
    course_id INT,
    PRIMARY KEY (student_id, course_id)
);

5. Candidate Key

• Any column or set of columns that could be a primary key.

• A table can have multiple candidate keys, but only one primary key is chosen.

Learn PostgreSQL: Resouce-1, Resource-2

Okay you are a better developer now so you must learn Typescript

What is TypeScript?

TypeScript is a strongly typed, object-oriented, and compiled programming language developed by Microsoft. It is a superset of JavaScript, meaning that all JavaScript code is valid TypeScript, but TypeScript adds extra features like static typing, interfaces, and advanced tooling support.

Key Features of TypeScript:

1. Static Typing – Helps catch errors at compile time instead of runtime.

2. Object-Oriented Features – Supports classes, interfaces, and inheritance.

3. Better Code Maintainability – Type safety improves development efficiency.

4. Compiles to JavaScript – Works in any browser or Node.js environment.

Learn typescript: Resouce-1, Resource-2

Next you can learn NextJS that can serve both as Frontend and Backend with ease.

What is Next.js?

Next.js is a React framework that provides server-side rendering (SSR), static site generation (SSG), and API routes, making it more powerful than React alone. It is built on top of React and allows for better performance, SEO, and developer experience.

Learn NextJS here: (Resource-1, Resource-2)

Getting Started with Socket.IO: Real-Time Communication for Beginners

In today's web applications, real-time communication plays a crucial role. Whether it's live chat, notifications, collaborative tools, or multiplayer games, Socket.IO makes it easy to implement real-time, bidirectional communication between the server and clients.

If you're new to Socket.IO, this guide will walk you through the basics of setting up a real-time server and client, with a simple example.

---

What is Socket.IO?

Socket.IO is a JavaScript library that enables real-time, event-driven communication between web clients (such as browsers) and a server. Unlike traditional HTTP requests, Socket.IO uses WebSockets and long polling to establish a persistent connection, making real-time data exchange seamless.

Key Features of Socket.IO

✔️ Bidirectional Communication – Data flows instantly between client and server.
✔️ Event-Driven Model – Communication happens via custom events.
✔️ Automatic Reconnection – Handles connection loss and reconnects automatically.
✔️ Cross-Browser Support – Works across different browsers and devices.
✔️ Scalability – Can be used with multiple servers using Redis or other solutions.

Learn Socket here: (Resource-1, Resource-2)

There are a lot of things to learn still but before that checkout some great projects built with all the knowledge that you have and create your own product watching them. Some great projects from Harkirat and some of me 🫠:

1. Visit Here

2. Visit Here

3. Visit Here

4. Visit Here

5. Visit Here

Thank you for reading till the end! I hope you found this blog helpful. If you have any thoughts or questions, feel free to share. Happy learning! 😊

Visit Me Here