Web Development - HTML, CSS & JavaScript

• Callbacks

• Callback problems

• Promises

• Promise states

• .then()

• .catch()

• .finally()

• Promise chaining

• Promise.all()

• Promise.allSettled()

• Promise.race()

• Promise.any()

• async

• await

• Error handling

⭐ Event Loop

Understand:

• Call stack

• Web APIs

• Task queue

• Microtask queue

• Event loop

• Macrotasks vs microtasks

You should be able to explain why asynchronous JavaScript behaves the way it does, not simply use async/await.

🟡 PHASE 8 — APIs & Network Requests

Learn how JavaScript communicates with servers.

• HTTP basics

• Request/response

• HTTP methods

• Status codes

• Headers

• JSON

• REST APIs

• fetch()

• GET

• POST

• PUT

• PATCH

• DELETE

• Request bodies

• Error handling

• Authentication basics

Build projects using public APIs.

🟠 PHASE 9 — Advanced JavaScript

Now go deeper into the language.

Execution & Scope

• Execution contexts

• Lexical environment

• Scope chain

• Hoisting

• Temporal Dead Zone

• Closures

this

Understand:

• Global context

• Object methods

• Regular functions

• Arrow functions

• Constructor functions

• call()

• apply()

• bind()

Prototypes

Learn:

• Prototype chain

• prototype

• proto

• Constructor functions

• Prototype inheritance

• Classes vs prototypes

Advanced Objects

• Property descriptors

• Getters/setters

• Object.freeze()

• Object.seal()

• Proxies

• Reflect

🔴 PHASE 10 — Object-Oriented JavaScript

Learn:

• Objects

• Constructor functions

• Classes

• Constructors

• Instance methods

• Static methods

• Inheritance

• Encapsulation

• Polymorphism

• Private class fields

• Getters/setters

Also understand composition vs inheritance.

🔴 PHASE 11 — Functional JavaScript

Learn:

• First-class functions

• Higher-order functions

• Pure functions

• Immutability

• Function composition

• Currying

• Closures

• Recursion

• Declarative programming

• Side effects

You don't need to become a functional-programming specialist, but these concepts make modern JavaScript much easier to understand.

🔴 PHASE 12 — Modules & JavaScript Runtime

Master:

• ES modules

• import

• export

• Default exports

• Named exports

• Dynamic imports

• Module organization

Then understand:

• Browser runtime vs server runtime

Learn the fundamentals of:

• Browser JavaScript

• Node.js

• npm

• Package management

• Environment variables

• Runtime APIs

🔴 PHASE 13 — Node.js

Once core JavaScript is strong, learn backend JavaScript.

Node fundamentals

• Node runtime

• npm

• package.json

• Modules

• File system

• Paths

• Environment variables

• Events

• Streams

• Buffers

• HTTP server

• Error handling

Backend development

Learn a modern Node.js framework such as:

• Express

• Fastify

• NestJS

You don't need all three initially.

🔴 PHASE 14 — Databases

For full-stack JavaScript, learn:

SQL

• Tables

• Relationships

• CRUD

• Joins

• Indexes

• Transactions

• Constraints

NoSQL

Understand concepts such as:

• Documents

• Collections

• Queries

• Indexes

You don't need to master every database.

A practical combination is:

JavaScript + Node.js + PostgreSQL

🔴 PHASE 15 — Frontend Framework

Only after becoming comfortable with JavaScript should you move into a framework.

React

Learn:

🚀 Complete JavaScript Roadmap — 2026

🟢 PHASE 1 — Programming Foundations

Before going deep into JavaScript, understand:

1. What programming is

2. How JavaScript works

3. Variables and values

4. Data types

5. Operators

6. Expressions and statements

7. Comments

8. Input/output basics

9. Errors and debugging

10. How code executes

🟢 PHASE 2 — JavaScript Fundamentals

1. Variables

• let

• const

• var

• Declaration vs initialization

• Scope

• Naming conventions

1. Data Types

• String

• Number

• BigInt

• Boolean

• Undefined

• Null

• Symbol

• Object

Understand:

• Primitive vs reference values

• typeof

• Type coercion

• Truthy and falsy values

1. Operators

• Arithmetic

• Assignment

• Comparison

• Logical

• Unary

• Ternary

• Nullish coalescing

• Optional chaining

1. Control Flow

• if

• else

• else if

• switch

• for

• while

• do...while

• break

• continue

🟢 PHASE 3 — Functions

Master functions thoroughly.

• Function declarations

• Function expressions

• Arrow functions

• Parameters

• Arguments

• Default parameters

• Rest parameters

• Return values

• Higher-order functions

• Callback functions

• Pure functions

• Function scope

• Nested functions

• Immediately Invoked Function Expressions

Then learn:

• ⭐ Closures

Understand:

• Lexical scope

• Closure creation

• Practical uses

• Private state

• Closures in callbacks

🟢 PHASE 4 — Arrays & Objects

Arrays

Learn:

• Creating arrays

• Accessing elements

• Updating elements

• Array length

• Adding/removing elements

• Iteration

• Destructuring

Essential methods:

• map()

• filter()

• reduce()

• forEach()

• find()

• findIndex()

• some()

• every()

• includes()

• sort()

• slice()

• splice()

• concat()

• flat()

• flatMap()

Objects

Learn:

• Object creation

• Properties

• Methods

• Nested objects

• Computed properties

• Property shorthand

• Object destructuring

• Spread syntax

• Rest syntax

Important methods:

• Object.keys()

• Object.values()

• Object.entries()

• Object.assign()

• Object.hasOwn()

🟡 PHASE 5 — Modern JavaScript / ES6+

Become comfortable with modern syntax.

• let / const

• Arrow functions

• Template literals

• Destructuring

• Spread/rest

• Default parameters

• Enhanced object literals

• Classes

• Modules

• Promises

• async/await

• Optional chaining

• Nullish coalescing

• Iterators

• Generators

• Symbols

Also understand what changed from older JavaScript and why modern patterns are preferred.

🟡 PHASE 6 — DOM & Browser JavaScript

Now move from language fundamentals to web development.

DOM

Learn:

• DOM structure

• Selecting elements

• Creating elements

• Modifying elements

• Removing elements

• Attributes

• Classes

• Styles

• Text/content

• Forms

Events

Master:

• Event listeners

• Event objects

• Event propagation

• Bubbling

• Capturing

• Event delegation

• Preventing default behavior

Browser APIs

Learn:

• localStorage

• sessionStorage

• Cookies

• URL API

• History API

• Clipboard API

• Timers

• Web Storage

• Geolocation basics

🟡 PHASE 7 — Asynchronous JavaScript

This is one of the most important JavaScript topics.

Understand:

• Synchronous vs asynchronous execution

Then learn:

If you want to Excel at Web Development and build stunning websites, master these essential skills:

Frontend:
• HTML, CSS, JavaScript – Core web technologies
• Flexbox & Grid – Master modern CSS layouts
• Responsive Design – Make websites mobile-friendly
• JavaScript ES6+ – Arrow functions, Promises, Async/Await
• React, Vue, or Angular – Modern frontend frameworks
• APIs & Fetch/Axios – Connect frontend with backend
• State Management – Redux, Vuex, or Context API

Backend:
• Node.js & Express.js – Build powerful server-side applications
• Databases – MySQL, PostgreSQL, MongoDB (NoSQL)
• RESTful APIs & GraphQL – Handle data efficiently
• Authentication – JWT, OAuth, and session management
• WebSockets – Real-time applications

DevOps & Deployment:
• Version Control – Git & GitHub
• CI/CD Pipelines – Automate deployments
• Cloud Hosting – AWS, Firebase, Vercel, Netlify
• Docker & Kubernetes – Scalable applications

Like it if you need a complete tutorial on all these topics! 👍❤️

🚀 20 Backend Project Ideas 🔥👨🏻‍💻

🔹REST API for a Blog
🔹User Authentication System
🔹URL Shortener
🔹E-commerce Backend
🔹Online Banking API
🔹Task Management API
🔹Real-time Chat Backend
🔹File Upload & Storage API
🔹Expense Tracker API
🔹Movie Database API
🔹Food Delivery Backend
🔹Job Portal Backend
🔹Online Bookstore API
🔹Inventory Management System
🔹Payment Gateway Integration
🔹Notification Service
🔹Social Media Backend
🔹Hospital Management System
🔹Event Booking API
🔹Learning Management System

❤️ React to this message for more coding & project ideas!

1️⃣4️⃣ Learn the event loop

Understanding the event loop helps you predict the execution order of: Synchronous code, Promise callbacks, Timers, Events

This is especially important for JavaScript interviews.

1️⃣5️⃣ Practice reading error messages

Don't immediately search for a solution when your code fails.

First understand: What error occurred → Where did it occur → Why did it occur → How can it be fixed?

🔥 Golden Tip: The faster you become at understanding your own errors, the faster you'll become at solving JavaScript problems.

Double Tap ❤️ For More Useful Tips

🚀 JavaScript Tips — Part 2

1️⃣ Use strict mode when appropriate

Strict mode helps catch certain common mistakes and prevents some unsafe behaviors.

"use strict";

2️⃣ Use optional chaining for uncertain data

When working with API responses or nested objects, optional chaining can prevent errors when a property doesn't exist.

const user = {};
console.log(user.address?.city);

3️⃣ Understand || vs ??

They behave differently when dealing with falsy values.

const count = 0;
console.log(count || 10); // 10

console.log(count ?? 10); // 0

Use ?? when 0, false, or an empty string are valid values.

4️⃣ Don't overuse ternary operators

Ternary operators are great for simple conditions.

const age = 20;
const status = age >= 18 ? "Adult" : "Minor";

For complicated logic, a normal if...else is usually easier to read.

5️⃣ Use destructuring when it improves readability

Destructuring can make working with objects and arrays cleaner.

const user = {
    name: "Alex",
    age: 25
};
const { name, age } = user;

6️⃣ Understand spread vs rest

The same ... syntax has two different purposes.

Spread → expands values

const numbers = [1, 2, 3];
const copy = [...numbers];

Rest → collects values

function sum(...numbers) {
    return numbers.length;
}

7️⃣ Don't rely on implicit type coercion

JavaScript can automatically convert types, sometimes producing surprising results.

console.log("10" + 5); // "105"
console.log("10" - 5); // 5

Be explicit when conversion matters.

8️⃣ Handle asynchronous errors properly

Don't assume every API request or asynchronous operation will succeed.

async function getData() {
    try {
        const response = await fetch("/api/data");
        const data = await response.json();
        return data;
    } catch (error) {
        console.error("Request failed:", error);
    }
}

9️⃣ Don't block the main thread

Heavy calculations or large amounts of synchronous work can make a web application unresponsive.

For expensive tasks, consider:

• Breaking work into smaller tasks

• Web Workers

• Efficient algorithms

• Avoiding unnecessary rendering

🔟 Use debounce and throttle appropriately

These techniques are useful when an event fires repeatedly.

Debounce → Run after activity stops.

Throttle → Limit execution to a controlled frequency.

Common use cases: Search inputs, Scrolling, Resizing, Mouse movement

1️⃣1️⃣ Use const objects carefully

const prevents reassignment of the variable, but it doesn't make the object immutable.

const user = {
    name: "Alex"
};
user.name = "Sam"; // Allowed

Understanding this distinction is important.

1️⃣2️⃣ Don't blindly use JSON.parse() and JSON.stringify()

They are useful for JSON data, but they aren't universal deep-copy solutions. They can lose or alter certain JavaScript values and don't preserve all object types.

For structured cloning, consider structuredClone() when appropriate.

1️⃣3️⃣ Use === consistently

Strict equality makes your comparisons easier to reason about.

if (status === "active") {
    console.log("User is active");
}

Free Resources to Learn Each Tech Stack 🧠✨

No excuses. Everything you need is free!

1. Frontend Development
❯ freeCodeCamp.org – HTML, CSS, JS
❯ MDN Web Docs – Best docs for web tech
❯ Frontend Mentor – Real-world challenges
❯ CSS Tricks – CSS deep dives
❯ YouTube: Kevin Powell, Web Dev Simplified

—

2. Backend Development
❯ Node.js Docs
❯ Django Girls Tutorial
❯ The Odin Project – Full Stack
❯ Spring Boot Guides
❯ YouTube: Amigoscode, CodeWithHarry (Hindi), Tech With Tim

—

3. Full-Stack Development
❯ Full Stack Open – React + Node
❯ The Odin Project
❯ CS50 Web – Harvard’s free course
❯ YouTube: Traversy Media, Clever Programmer, JavaScript Mastery

—

4. Data Analytics
❯ Kaggle Learn – Python, SQL, Viz
❯ Maven Analytics – Free Power BI/Tableau projects
❯ Google Data Analytics Course
❯ W3Schools SQL
❯ YouTube: Luke Barousse, Alex The Analyst

—

5. Machine Learning
❯ Google’s ML Crash Course
❯ fast.ai – Deep learning made easy
❯ Kaggle Courses – End-to-end ML
❯ Coursera – Andrew Ng
❯ YouTube: StatQuest, Krish Naik, Codebasics

—

6. DevOps
❯ KodeKloud – Docker, K8s, Ansible
❯ Learn Git Branching
❯ Katacoda – Interactive Linux & DevOps
❯ Roadmap.sh – What to learn
❯ YouTube: TechWorld with Nana, Nana Janashia

🔥 Regular Expression Improvements

ES2025 also introduced improvements to regular expressions, including support for enhanced Unicode-related matching capabilities.

🔥 Promise.try()

Promise.try() provides a convenient way to turn a synchronous function call into a Promise-based operation.

Promise.try(() => {
    return someFunction();
});

⚠️ Important Interview Point

JavaScript features are standardized through the ECMAScript specification, and browser/Node.js support can vary by feature and version.

So when discussing "latest JavaScript," distinguish between:

Standardized features

→ Officially included in an ECMAScript release.

Proposed features

→ Still moving through the TC39 proposal process.

Runtime support

→ Whether a particular browser or Node.js version actually supports the feature.

Double Tap ❤️ For More

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, I am ${this.name}`);
    }
}

const person = new Person("Deepak", 25);

person.greet();

Output:

Hello, I am Deepak

Important:

JavaScript classes are built on top of JavaScript's prototype-based inheritance.

Classes Support:

• Constructors

• Methods

• Inheritance

• Getters and setters

• Static methods

• Private fields

97. What is garbage collection?

Garbage collection is the automatic process of identifying and reclaiming memory that is no longer reachable or needed by a JavaScript program.

Developers don't normally manually free JavaScript objects.

Example:

let user = {
    name: "Deepak"
};

user = null;

If the original object is no longer reachable from the program, it can eventually become eligible for garbage collection.

Important:

Garbage collection timing is determined by the JavaScript engine. You cannot normally force it from standard JavaScript code.

98. How does JavaScript manage memory?

JavaScript automatically manages memory using mechanisms such as:

1. Memory allocation

2. Program execution

3. Garbage collection

Simplified Process:

Create value

↓

Memory allocated

↓

Program uses value

↓

Value becomes unreachable

↓

Garbage collector

↓

Memory can be reclaimed

What is a Memory Leak?

A memory leak occurs when a program unintentionally keeps references to objects that it no longer needs.

Common Causes:

• Unremoved event listeners

• Unnecessary global variables

• Timers that aren't cleared

• Large objects retained in closures

• Growing caches without limits

Example:

const cache = [];

function addData(data) {
    cache.push(data);
}

If cache keeps growing indefinitely, it can consume increasing amounts of memory.

99. What are CommonJS and ES Modules?

Both are module systems used in JavaScript applications.

CommonJS

Commonly associated with Node.js and uses require() and module.exports.

// math.js
function add(a, b) {
    return a + b;
}

module.exports = { add };

Import:

const { add } = require("./math");

ES Modules

The standardized JavaScript module system uses import and export.

// math.js
export function add(a, b) {
    return a + b;
}

Import:

import { add } from "./math.js";

Modern JavaScript development commonly uses ES Modules, while CommonJS remains important when working with existing Node.js projects.

100. What are the latest JavaScript features introduced in ES2025 and beyond?

JavaScript continues to evolve through yearly ECMAScript releases.

For ES2025 (ECMAScript 2025), notable standardized additions include:

🔥 Iterator Helpers

Methods such as:

iterator.map(...)

iterator.filter(...)

iterator.take(...)

allow lazy processing of iterator values.

🔥 Iterator.from()

Allows an object to be converted into an iterator.

const iterator = Iterator.from([1, 2, 3]);

🔥 Set Methods

Modern Set operations include methods such as:

• union()

• intersection()

• difference()

• symmetricDifference()

Example:

const a = new Set([1, 2, 3]);
const b = new Set([3, 4, 5]);

const result = a.union(b);

console.log(result);

🚀 JavaScript Interview Questions with Answers — Part 10

91. What is throttling?

Throttling limits how frequently a function can execute within a given time interval.

Even if an event fires many times, the function is allowed to execute at most once during each interval.

Example:

function throttle(callback, delay) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime >= delay) {
            lastTime = now;
            callback.apply(this, args);
        }
    };
}

Common Uses:

• Scroll events

• Mouse movement

• Window resizing

• Continuous user interactions

Debounce vs Throttle:

Debounce → Execute after activity stops

Throttle → Execute at controlled intervals

92. What is memoization?

Memoization is an optimization technique where the result of a function is cached so that the same calculation doesn't have to be performed again.

Example:

function memoize(fn) {
    const cache = new Map();
    return function(n) {
        if (cache.has(n)) {
            return cache.get(n);
        }
        const result = fn(n);
        cache.set(n, result);
        return result;
    };
}

Example Usage:

function square(n) {
    console.log("Calculating...");
    return n * n;
}

const memoizedSquare = memoize(square);

console.log(memoizedSquare(5));
console.log(memoizedSquare(5));

The first call performs the calculation.

The second call can use the cached result.

Benefits:

✅ Faster repeated calculations

✅ Avoids unnecessary work

Drawback:

❌ Uses additional memory for cached results.

93. What is currying?

Currying transforms a function that takes multiple arguments into a sequence of functions that each take one argument.

Normal Function:

function add(a, b, c) {
    return a + b + c;
}

console.log(add(1, 2, 3));

Curried Function:

function add(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
        };
    };
}

Usage:

console.log(add(1)(2)(3));

Output:

6

Arrow Function Version:

const add = a => b => c => a + b + c;

Common Uses:

• Functional programming

• Creating reusable functions

• Partial application

• Configuration-based functions

94. What is prototype inheritance?

JavaScript uses objects as the foundation of its inheritance system.

Objects can access properties and methods through their prototype chain.

Example:

const animal = {
    speak() {
        console.log("Animal speaks");
    }
};

const dog = Object.create(animal);

dog.speak();

Although dog doesn't directly contain speak(), it can access the method through its prototype.

Prototype Chain:

dog

↓

animal

↓

Object.prototype

↓

null

JavaScript searches this chain when a property isn't found directly on the object.

95. What is prototypal inheritance?

Prototypal inheritance is JavaScript's mechanism for allowing one object to inherit behavior from another object through the prototype chain.

Example:

const person = {
    greet() {
        console.log("Hello");
    }
};

const student = Object.create(person);

student.study = function() {
    console.log("Studying");
};

student.greet();
student.study();

Here:

student has its own study() method.

greet() comes from its prototype, person.

96. What are classes in JavaScript?

Classes provide a cleaner syntax for creating objects and implementing object-oriented programming patterns.

Classes were introduced in ES6.

Example:

let count = 0;

const interval = setInterval(() => {
    count++;
    console.log(count);
    if (count === 5) {
        clearInterval(interval);
    }
}, 1000);

Output:

1

2

3

4

5

After 5, the interval is stopped.

78. What is callback hell?

Callback hell occurs when multiple asynchronous operations are nested inside one another, making code difficult to read and maintain.

Example:

getUser(user => {
    getOrders(user, orders => {
        getPayment(orders, payment => {
            processPayment(payment, result => {
                console.log(result);
            });
        });
    });
});

This creates deeply nested code.

Problems:

❌ Difficult to read

❌ Difficult to debug

❌ Difficult to maintain

❌ Error handling becomes complicated

79. How do you avoid callback hell?

Several approaches can make asynchronous code cleaner.

1. Use Promises

getUser()
    .then(getOrders)
    .then(getPayment)
    .then(processPayment)
    .catch(handleError);

2. Use async/await

async function process() {
    try {
        const user = await getUser();
        const orders = await getOrders(user);
        const payment = await getPayment(orders);
        await processPayment(payment);
    } catch (error) {
        console.log(error);
    }
}

3. Break large functions into smaller functions

Instead of putting everything into one deeply nested callback, separate responsibilities into reusable functions.

Interview Tip:

For modern JavaScript, Promises and async/await are the most common solutions.

80. What are microtasks and macrotasks?

This is an important advanced JavaScript interview topic.

The JavaScript runtime has different queues for asynchronous work.

Microtasks

Examples include:

• Promise callbacks

• queueMicrotask()

• MutationObserver callbacks in browsers

Macrotasks / Tasks

Common examples include:

• setTimeout()

• setInterval()

• Some browser events

Example:

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
    console.log("Promise");
});

console.log("End");

Output:

Start

End

Promise

Timeout

Why?

After the synchronous code finishes, the runtime processes available microtasks before moving to the next task.

So:

Synchronous code
       ↓
Microtasks
       ↓
Next task / macrotask

❤️ Double Tap For Part 9