Untitled

HTML:

What is HTML?
HTML stands for HyperText Markup Language. It is the standard markup language for creating web pages and web applications.

What is the structure of an HTML document?
An HTML document consists of elements, which are enclosed by tags. The basic structure includes <html>, <head>, and <body> tags.

What are HTML tags?
HTML tags are used to define the structure and content of web documents. They are enclosed in angle brackets (< >) and come in pairs, with an opening tag and a closing tag.

What is the difference between block-level and inline elements?
Block-level elements start on a new line and take up the full width available, while inline elements do not start on a new line and only take up as much width as necessary.

What is the purpose of the <meta> tag in HTML?
The <meta> tag is used to provide metadata about the HTML document, such as character encoding, viewport settings, and keywords for search engines.

What is the purpose of the <div> and <span> tags?
The <div> tag is a block-level element used to group and style content, while the <span> tag is an inline element used for styling individual elements or small groups of text within a line.

What is semantic HTML?
Semantic HTML refers to using HTML elements that convey meaning about the content they contain. Examples include <header>, <nav>, <article>, <section>, and <footer>.

What is the difference between <div> and <section> tags?
<div> is a generic container for grouping and styling content, while <section> is a semantic element used to define sections of a document or application.

What is the purpose of the <a> tag?
The <a> tag is used to create hyperlinks, allowing users to navigate between web pages or to specific sections within a page.

What are HTML forms?
HTML forms are used to collect user input, such as text fields, checkboxes, radio buttons, and submit buttons. They are created using the <form> tag.

CSS :

What is CSS?
CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the presentation of a document written in HTML.

What are the different ways to include CSS in a web page?
CSS can be included in a web page using three methods: inline styles, internal styles, and external stylesheets.

What is the box model in CSS?
The box model is a fundamental concept in CSS that describes how elements are rendered on a web page. It consists of content, padding, border, and margin.

What is the difference between margin and padding in CSS ?
Padding is the space between the content of an element and its border, while margin is the space outside the border of an element.

What is the difference between inline and block elements in CSS?
Inline elements do not start on a new line and only take up as much width as necessary, while block elements start on a new line and take up the full width available.

What is the purpose of the float property in CSS?
The float property is used to align elements horizontally within their container. It can be used to create layouts where elements float next to each other.

What are CSS selectors?
CSS selectors are patterns used to select and style elements in an HTML document. They can target elements based on their tag name, class, ID, attributes, and more.

What is the difference between class and id selectors in CSS?
Class selectors can be used to apply styles to multiple elements, while id selectors should be unique and can be used to style a specific element.

What are pseudo-classes and pseudo-elements in CSS?
Pseudo-classes and pseudo-elements are special keywords used to define a specific state of an element or a specific part of an element, respectively. Examples include :hover, :active, ::before, and ::after.

What is responsive web design in CSS?
Responsive web design is an approach to designing web pages that ensures optimal viewing and interaction across a wide range of devices and screen sizes. It typically involves using media queries and flexible layouts to adapt the page layout and styling based on the device's characteristics.
Javascript :

Object-Oriented Programming (OOP)

Object-Oriented Programming (OOP) is a programming paradigm that revolves around the concept of "objects," which can encapsulate data and behavior. Here are some important concepts of OOP:

 Class
   - A class is a blueprint or template for creating objects.
   - It defines the attributes (data members) and methods (functions) that the objects will have.


Object
   - An object is an instance of a class. It is a tangible entity that represents a real-world entity.
   - Objects have attributes (characteristics or properties) and behaviors (actions or methods).


Constructor
   - A constructor is a special method that is invoked when an object is created.
   - It initializes the object's state and is often used to set initial values for the object's attributes.


Encapsulation
   - Encapsulation is the bundling of data (attributes) and the methods that operate on the data into a single unit (class).
   - It helps in controlling access to the internal details of an object and promotes data hiding.

Two main importance of encapsulation:
Data Protection
Information Hiding


Inheritance
   - Inheritance allows a new class (subclass/derived class) to inherit attributes and methods from an existing class (base class/parent class).
   - It promotes code reuse and establishes a relationship between classes.


Polymorphism
Polymorphism means the same function with different signatures is called many times. In real life, for example, a boy at the same time may be a student, a class monitor, etc. So a boy can perform different operations at the same time.
   - Polymorphism means "many forms." It allows objects of different classes to be treated as objects of a common base class.
   - It enables a single interface to represent different types or forms.

class firstClass {
    add() {
        console.log("First Method")
    }
}
class secondClass extends firstClass {
    add() {
        console.log(30 + 40);
    }
}
class thirdClass extends secondClass {
    add() {
        console.log("Last Method")
    }
}
let ob = new firstClass();
let ob2 = new secondClass();
let ob3 = new thirdClass();
ob.add();
ob2.add();
ob3.add();


Output:

First Method
70
Last Method


Abstraction
   - Abstraction is the process of simplifying complex systems by modeling classes based on the essential properties.
   - It involves hiding the unnecessary details and exposing only the relevant features of an object.


Method Overloading
   - Method overloading occurs when a class has multiple methods with the same name but different parameters (number or types).
   - It allows a class to perform similar operations with different inputs.
Unlike other programming languages, JavaScript Does not support Function Overloading.


Method Overriding
   - Method overriding happens when a subclass provides a specific implementation for a method that is already defined in its superclass.
   - It allows a subclass to provide a specialized version of a method.


Prototypes in Javascript

A prototype is an object that is used as a template for creating new objects. Every object in JavaScript has a prototype, which it inherits properties and methods from. This is known as prototype-based inheritance.

Prototypes in JavaScript solve the problem of code reuse and inheritance by providing a way to share properties and methods between objects.


Example:

// Constructor function
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// Adding a method to the prototype
Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name);
};

// Creating objects using the constructor
const person1 = new Person("John", 30);
const person2 = new Person("Alice", 25);

// Calling the method
person1.sayHello(); // Output: Hello, my name is John

For more information


Functions

//Function declaration

function greet(name) {
    console.log("Hello, " + name + "!");
}


//Function expression assigned to a variable

const sayHello = function() {
    console.log("Hello!");
};


//Passing functions as arguments

function executeFunction(func) {
    func();
}
executeFunction(sayHello); // Output: Hello!


Arrow Function

let sum = (a,b) => a+b;

//executing arrow function
sum(5,5);


IIFE(Immediate Invoked Function Expression)

    (function calNamel(){
    console.log("Hello John");
}());


Closures

Closures are an important concept in JavaScript that allows functions to maintain access to variables from their containing scope even after the containing function has finished executing. This is often used to create private variables and data encapsulation.
Function along with their lexical scope


    function outerFunction() {
    const outerVariable = "I am from outer function";

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}
const innerFunc = outerFunction();
innerFunc(); // Output: I am from outer function


    => for more information


Asynchronous Programming:

JavaScript is single-threaded and asynchronous, meaning it can execute only one operation at a time but can perform non-blocking operations such as fetching data from a server, reading files, or waiting for user input without freezing the entire program. This is typically achieved through callbacks, promises, or async/await syntax.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched successfully");
        }, 2000);
    });
}

console.log("Fetching data...");
fetchData().then(data => {
    console.log(data); // Output after 2 seconds: Data fetched successfully
});
console.log("Data fetch initiated.");


Event Loop in javascript:


Let’s look at the below example:

We have 3 consoles here, guess which console executes first.


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

const promise = new Promise((res, rej) => {
    let age = 18;
    if(age > 15){
        res("Age is greater");
    }else{
        rej("Age is lesser")
    }
})
promise.then(res => {
    console.log(res);
    })


for(let i=0; i< 10000000; i++){
    // blocks for 3 seconds
}

console.log("Second");


// output - Second
    Age is greater
    First


Let’s understand how the event loop works:

Call Stack: JavaScript maintains a call stack, which keeps track of the currently executing function or context. When you execute synchronous code, function calls are added to the stack and executed in a first-in-last-out manner.

Asynchronous Operations: When JavaScript encounters an asynchronous operation (such as fetching data from a server, reading a file, or waiting for a timer), it doesn't block the execution of other code. Instead, it delegates the operation to the browser APIs (in the case of web browsers) or the runtime environment (in the case of Node.js), and moves on to execute the next line of code.

Event Queue: Asynchronous operations, when completed, are placed in the event queue along with their callback functions. The event queue follows a first-in-first-out (FIFO) order.

Event Loop: The event loop continuously monitors the call stack and the event queue. If the call stack is empty (meaning all synchronous code has been executed), the event loop checks if there are any tasks in the event queue. If there are, it moves them from the event queue to the call stack for execution.


React :

What is React?
React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and manage the state of the application efficiently.

What is JSX?
JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to write HTML-like code within JavaScript. It simplifies the creation of React elements and improves readability.

What are components in React?
Components are the building blocks of React applications. They are reusable UI elements that encapsulate the presentation and behavior of a part of the user interface.

What is the difference between functional and class components in React?
Functional components are JavaScript functions that accept props as input and return JSX elements. Class components are JavaScript classes that extend the React.Component class and have state and lifecycle methods.

What is the state in React?
State is a JavaScript object that represents the data managed by a component. It determines the behavior and rendering of the component and can be updated over time in response to user actions or other events.

What are props in React?
Props (short for properties) are a mechanism for passing data from parent to child components in React. They are immutable and are used to customize the behavior and appearance of child components.

What is the virtual DOM in React?
The virtual DOM is a lightweight representation of the actual DOM (Document Object Model) in memory. React uses the virtual DOM to optimize updates and minimize the number of DOM manipulations, resulting in better performance.

What are React hooks?
React hooks are functions that allow developers to use state and other React features in functional components. They provide a way to add stateful logic to functional components without using class components.


What is the useEffect hook used for?
The useEffect hook is used to perform side effects in functional components, such as fetching data from an API, subscribing to events, or updating the document title. It replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in class components.


Example:


import React, { useState, useEffect } from 'react';

const ExampleComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const newData = await response.json();
      setData(newData);
    };

    fetchData();

    return () => {
      // Clean up the effect (optional)
      // E.g., unsubscribe from event listeners
    };
  }, []);

  return (
    <div>
      {data ? <p>Data: {data}</p> : <p>Loading...</p>}
    </div>
  );
};


export default ExampleComponent;


What is the difference between controlled and uncontrolled components in React?

Controlled components:
In controlled components, the component's state is managed by React. The component receives its current value and any changes to that value via props, and it notifies its parent component about changes through callbacks.
This means that the component's value is always controlled by React, and any updates to the component's state must go through React's state management system.
Controlled components are typically used when you need to synchronize the component's state with other parts of the application, such as other components or the application's state.

Example:

import React, { useState } from 'react';

function ControlledComponent() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
    />
  );
}


Uncontrolled components:
In uncontrolled components, the component's state is managed by the DOM itself. The component initializes its state independently, and the value of the component is directly read from the DOM using a ref.
Uncontrolled components are useful when you need to integrate with non-React code, such as third-party libraries, or when you want to manage the component's state at a lower level of abstraction.
Since the component's state is not managed by React, it can lead to a simpler implementation, especially for input components where you don't need to handle every change event explicitly.

    Example:

        import React, { useRef } from 'react';

function UncontrolledComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    console.log('Input value:', inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Submit</button>
    </div>
  );
}


Redux:

Redux is a popular state management library used primarily with React, but it can be used with other JavaScript frameworks or libraries as well. It provides a centralized store for all the states in your application, making it easier to manage and track state changes across different components or parts of your application.


Key Concepts of Redux:

Store: A single, centralized place where your application's state is stored.
Actions: Objects that represent an intention to change the state. They are the only way to send data to the store.
Reducers: Pure functions that take the current state and an action as arguments and return a new state. They specify how the state changes in response to actions.


Implementing Redux:

Install Redux:

For a React application, you would typically install Redux-toolkit and React-Redux (bindings for React).

Use npm or yarn:  npm install @reduxjs/toolkit react-redux


Create Actions:
Define what can happen in your application.
Actions are simple JavaScript objects with a type property.

Create Reducers:
Reducers are functions that take the current state and an action, and return a new state.
They decide how the state changes in response to actions.

Create Store:
Use Redux's createStore() method to create the store.
Pass your reducers to this method.

Provide the Store:
In a React application, use the Provider component from React-Redux to provide the store to your app.
Wrap your app's root component with Provider and pass the store as a prop.

Connect Components to Redux:
Use connect() from React-Redux to connect your React components to the Redux store.
This allows your components to dispatch actions and subscribe to store updates.

Dispatch Actions:
Use the dispatch function provided by Redux to send actions to the store.

React to State Changes:
Use Redux's useSelector hook (or mapStateToProps with connect) to access the state in your components.
Your components will re-render when the state they subscribe to changes.


Node Js:


What is Node.js?
Node.js is a runtime environment that allows you to run JavaScript code outside of a web browser. It uses the V8 JavaScript engine from Google Chrome and provides libraries for building server-side applications.

What is npm?
npm (Node Package Manager) is the default package manager for Node.js. It allows developers to install, manage, and share reusable JavaScript code packages and libraries.

What is the difference between Node.js and JavaScript?
JavaScript is a programming language, while Node.js is a runtime environment that allows you to run JavaScript code on the server-side. Node.js extends JavaScript by providing access to the file system, networking, and other operating system APIs.


What is an event loop in Node.js?
The event loop is a mechanism in Node.js that allows asynchronous, non-blocking I/O operations to be performed efficiently. It continuously checks the event queue for new events and processes them in a loop.

Single-Threaded Nature: Node.js operates on a single-threaded, event-driven model. This means that all I/O operations, such as reading from files, making network requests, or interacting with databases, are performed asynchronously to avoid blocking the main thread.


Event Queue: The event loop continuously checks for new events and callbacks in the event queue. These events can be triggered by various sources, such as I/O operations completing, timers expiring, or user actions.


Non-Blocking I/O: When an asynchronous operation is initiated, Node.js delegates the actual work to the underlying operating system or runtime environment. It registers a callback function to be executed once the operation completes and continues processing other events in the meantime.

Example :

const fs = require('fs');

// Asynchronously read data from a file
fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) {
    console.error('Error reading file:', err);
    return;
  }
  console.log('File contents:', data);
});

console.log('File reading operation initiated...');


What are callbacks in Node.js?
Callbacks are functions that are passed as arguments to other functions and are invoked when an asynchronous operation is completed. They are commonly used in Node.js for handling asynchronous tasks such as reading files or making network requests.

What is Express.js?
Express.js is a web application framework for Node.js. It provides a set of features for building web servers and APIs, including routing, middleware, and template engines.

What is middleware in Express.js?
Middleware functions in Express.js are functions that have access to the request and response objects in the application's request-response cycle. They can perform tasks such as logging, authentication, and error handling.

What is package.json in Node.js projects?
package.json is a file used to define metadata and dependencies for a Node.js project. It contains information such as the project's name, version, dependencies, scripts, and other configuration settings.


What is asynchronous programming in Node.js?
Asynchronous programming in Node.js allows multiple operations to be performed concurrently without blocking the execution of the main thread. It is achieved using callbacks, promises, or async/await syntax.

What are streams in Node.js?
Streams in Node.js are objects that allow you to read or write data sequentially, piece by piece. They are used for handling large amounts of data efficiently and are commonly used for reading from files, handling HTTP requests, and processing data in real-time.


MongoDB :

MongoDB is a popular NoSQL database. It is used to store and manage data in a flexible, document-oriented format.

It is known for its flexibility, scalability, and ease of use.
MongoDB uses collections to store documents, where each document is a JSON-like object with key-value pairs. Collections are similar to tables in relational databases, and documents are similar to rows.


Some basic MongoDB queries:

1. Insert Documents:
   - To insert one document into a collection:
        db.collection.insertOne({ key: 'value' });

   - To insert multiple documents into a collection:

 db.collection.insertMany([
       { key1: 'value1' },
       { key2: 'value2' },
       { key3: 'value3' }
     ]);


2. Find Documents:
   - To find documents that match a specific condition:
      db.collection.find({ key: 'value' });

   - To find documents and specify which fields to return:
         db.collection.find({ key: 'value' }, { field1: 1, field2: 1 });


3. Update Documents:
   - To update one document that matches a specific condition:
     db.collection.updateOne({ key: 'value' }, { $set: { newKey: 'newValue' } });

   - To update multiple documents that match a specific condition:
     db.collection.updateMany({ key: 'value' }, { $set: { newKey: 'newValue' } });


4. Delete Documents:
   - To delete one document that matches a specific condition:
     db.collection.deleteOne({ key: 'value' });

   - To delete multiple documents that match a specific condition:
     db.collection.deleteMany({ key: 'value' });


5. Aggregate Documents:
   - To perform aggregation operations on documents in a collection:
     db.collection.aggregate([{ $match: { key: 'value' } }, { $group: { _id: '$key', count: { $sum: 1 } } }]);


6. Sorting Documents:
   - To sort documents in ascending order based on a field:
     db.collection.find().sort({ field: 1 });

   - To sort documents in descending order based on a field:
     db.collection.find().sort({ field: -1 });


7. Limiting Results:
   - To limit the number of documents returned:
     db.collection.find().limit(10);


8. Skipping Results:
   - To skip a certain number of documents and return the rest:
     db.collection.find().skip(10);


Mongoose: (Node.js library)

Mongoose is a popular Node.js library that provides a higher-level abstraction over MongoDB, the NoSQL database. It simplifies the interaction with MongoDB databases by providing a schema-based solution and a set of powerful features for modeling and managing data.


Schema-Based Modeling:
Mongoose allows developers to define schemas for their data models using a simple and expressive syntax. Schemas define the structure of documents in a collection, including the fields, types, default values, validation rules, etc.


Example:

const { Schema, model } = require('mongoose');

// Define a schema for a user
const userSchema = new Schema({
 name: String,
 email: { type: String, required: true, unique: true },
 age: { type: Number, min: 18 },
 createdAt: { type: Date, default: Date.now }
});

// Create a model from the schema
const User = model('User', userSchema);


Modelling Data:
Once a schema is defined, developers can create models from the schema using the model() function provided by Mongoose. Models represent collections in the database and provide methods for querying, inserting, updating, and deleting documents.


Example:

// Create a new user document
const newUser = new User({ name: 'John', email: 'john@example.com', age: 30 });

// Save the user document to the database
newUser.save()
 .then((user) => console.log('User created:', user))
 .catch((err) => console.error('Error creating user:', err));


Express:

Express JS is a small framework that works on top of Node web server functionality to simplify its APIs and add helpful new features. It makes it easier to organize your application’s functionality with middleware and routing. It adds helpful utilities to Node HTTP objects and facilitates the rendering of dynamic HTTP objects.

Here are some key features and concepts of Express:

Routing: Express provides a powerful routing system that allows developers to define routes for handling different HTTP requests (GET, POST, PUT, DELETE, etc.) and URLs. Routes can be defined using HTTP methods and URL patterns, making it easy to create RESTful APIs.

Middleware: Middleware functions are functions that have access to the request and response objects, as well as the next middleware function in the stack. They can be used to perform tasks such as logging, authentication, error handling, and data parsing. Middleware functions can be applied globally to all routes or to specific routes as needed.

Template Engines: Express supports various template engines, such as Pug (formerly known as Jade), EJS, and Handlebars, allowing developers to generate dynamic HTML content on the server side and render it to the client.

Static File Serving: Express can serve static files, such as HTML, CSS, JavaScript, images, and other assets, from a specified directory on the server. This is useful for serving client-side files and resources in web applications.

Error Handling: Express provides built-in error handling middleware that can be used to handle errors that occur during the request-response cycle. Developers can define custom error handling middleware to handle specific types of errors and return appropriate responses to clients.

HTTP Helpers: Express provides various HTTP helper methods, such as `res.send`, `res.json`, `res.redirect`, and `res.status`, for sending responses to clients and managing HTTP headers and status codes.


HTTP: (Hypertext Transfer Protocol)

What is HTTP and what does it stand for?

HTTP stands for Hypertext Transfer Protocol. It is an application layer protocol used for transmitting hypermedia documents, such as HTML files, over the Internet. HTTP follows a client-server model where a client sends requests to the server and the server responds with the requested resources.

What are the main methods used in HTTP? Explain each of them.

The main methods used in HTTP are:
GET: Used to request data from a specified resource.
POST: Used to submit data to be processed to a specified resource.
PUT: Used to update a resource.
DELETE: Used to delete a specified resource.
PATCH: Used to apply partial modifications to a resource.
HEAD: Similar to GET, but only returns the response headers without the actual data.
OPTIONS: Used to describe the communication options for the target resource.
TRACE: Used to perform a message loop-back test along the path to the target resource.


What is the difference between HTTP and HTTPS?

HTTPS (Hypertext Transfer Protocol Secure) is the secure version of HTTP. The main difference is that HTTPS uses encryption to secure the data transmitted between the client and the server, whereas HTTP does not.


List of HTTP status codes:

Hypertext Transfer Protocol (HTTP) response status codes
Status codes are issued by a server in response to a client's request made to the server


All HTTP response status codes are separated into five classes or categories. The first digit of the status code defines the class of response, while the last two digits do not have any classifying or categorization role. There are five classes defined by the standard:
1xx (informational response) – the request was received, continuing process
2xx (successful) – the request was successfully received, understood, and accepted
3xx (redirection) – further action needs to be taken in order to complete the request
4xx (client error) – the request contains bad syntax or cannot be fulfilled
5xx (server error) – the server failed to fulfill an apparently valid request

Some important status codes:

200 OK
Standard response for successful HTTP requests. The actual response will depend on the request method used. Example GET , POST request etc.

201 Created
The request has been fulfilled, resulting in the creation of a new resource.

202 Accepted
The request has been accepted for processing, but the processing has not been completed. The request might or might not be eventually acted upon, and may be disallowed when processing occurs.

400 Bad Request
The server cannot or will not process the request due to an apparent client error (e.g., malformed request syntax, size too large, invalid request message framing, or deceptive request routing).

401 Unauthorized
Similar to 403 Forbidden, but specifically for use when authentication is required and has failed or has not yet been provided.


403 Forbidden
The request contained valid data and was understood by the server, but the server is refusing action. This may be due to the user not having the necessary permissions for a resource or needing an account of some sort, or attempting a prohibited action (e.g. creating a duplicate record where only one is allowed).

404 Not Found
The requested resource could not be found but may be available in the future. Subsequent requests by the client are permissible.

Click here for more information