1. What is HTML explain markup in HTML?

 HTML (HyperText Markup Language) is the standard language for creating web
pages. It describes the structure of web pages using markup. Markup in HTML is the
process of adding tags to text to define its structure and appearance. Tags like <p>,
<a>, and <div> are used to define paragraphs, links, and divisions respectively.

2. Give examples of markup languages?

 Examples of markup languages include HTML, XML (eXtensible Markup

Language), and Markdown.

3. Explain DOM? Why is it important to know about DOM for developing web
applications?

 The DOM (Document Object Model) is a programming interface for web documents.
It represents the page so that programs can change the document structure, style, and
content. Knowing about the DOM is crucial for web development as it allows
developers to interact with and manipulate HTML and XML documents dynamically,
enabling the creation of interactive and dynamic web applications.

4. Differentiate between web 1.0, 2.0, and 3.0?

 Web 1.0: Static web, read-only content, minimal user interaction.

 Web 2.0: Dynamic web, read-write content, high user interaction, social media
platforms, user-generated content.
 Web 3.0: Semantic web, intelligent and personalized content, AI integration,
decentralized technologies like blockchain.

5. What do you mean by full stack? Explain the technologies involved in building a
general full stack app.

 Full stack development refers to the development of both the front-end (client-side)
and back-end (server-side) parts of a web application. Technologies involved include:
o Front-end: HTML, CSS, JavaScript, frameworks like React, Angular, or
Vue.js.
o Back-end: Server, database, and application, typically using technologies like
Node.js, Express.js, Python (Django, Flask), Ruby on Rails, databases like
MongoDB, MySQL, or PostgreSQL.

6. Explain the different versions of HTML, CSS, and JS on the basis of advantages and
disadvantages.

 HTML:
o HTML4: Introduction of forms, tables, and improved support for scripting.
o HTML5: New elements like <header>, <footer>, <article>, multimedia
support, and improved accessibility.
 CSS:
o CSS2: Added support for media types and improved positioning.
 o CSS3: Modularized CSS, added support for animations, transitions, and
responsive design.
 JS:
o ES5 (ECMAScript 5): Standardized JSON, added new array methods.
o ES6 (ECMAScript 2015): Introduced let, const, arrow functions, classes, and
modules.

7. Is ECMAScript and JS same?

 ECMAScript (ES) is a standard for scripting languages, of which JavaScript (JS) is

the most well-known implementation. They are often used interchangeably when
referring to the language features defined in the ES standard.

8. What are the different frameworks for JS available for developing backend?

 Node.js with frameworks like Express.js, Koa.js, Meteor.js, and Nest.js.

9. What are the different JS frameworks available for developing front end?

 React.js, Angular, Vue.js, Svelte, and Ember.js.

10. What are the different CSS frameworks available for designing the front end?

 Bootstrap, Foundation, Bulma, Tailwind CSS, and Materialize.

11. Explain Async and Await of JS with example.

 async and await are used to handle asynchronous operations in JavaScript. They
allow writing asynchronous code in a synchronous manner.

async function fetchData() {

try {

let response = await fetch('https://api.example.com/data');

let data = await response.json();

console.log(data);

} catch (error) {

console.error('Error:', error);

fetchData();

12. Why JS is called asynchronous programming language?

  JavaScript is called an asynchronous programming language because it can perform
non-blocking operations, allowing other code to execute while waiting for
asynchronous operations like network requests or file I/O to complete.

13. What is a callback function? Explain with examples.

 A callback function is a function passed into another function as an argument, which

is then invoked inside the outer function to complete some kind of routine or action.

function greet(name, callback) {

console.log('Hello ' + name);

callback();

function sayGoodbye() {

console.log('Goodbye!');

greet('Alice', sayGoodbye);

14. What are media queries in CSS? Explain with examples to implement media queries
in smartphone, laptop, tablets.

 Media queries are used in CSS to apply styles based on the conditions of the device
(like screen size). Example:

/* Smartphones */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}

/* Tablets */
@media (min-width: 601px) and (max-width: 992px) {
body {
background-color: lightgreen;
}
}

/* Laptops and Desktops */

@media (min-width: 993px) {
body {
background-color: lightyellow;
}
}
15. What is Bootstrap? How do we use bootstrap?

 Bootstrap is a front-end framework for developing responsive and mobile-first

websites. It includes CSS and JavaScript-based design templates for typography,
forms, buttons, navigation, and other interface components. It can be used by
including its CSS and JS files in your HTML file:

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.m
in.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min
.js"></script>

16. What are tr and td in HTML tables?

 <tr> defines a row in a table.

 <td> defines a cell in a table row.

17. Create an HTML table demonstrating the nested tables.

<table border="1">
<tr>
<td>Main Table Cell 1</td>
<td>
<table border="1">
<tr>
<td>Nested Table Cell 1</td>
<td>Nested Table Cell 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Main Table Cell 2</td>
<td>Main Table Cell 3</td>
</tr>
</table>

18. Write a program in JavaScript to demonstrate the use of alert and prompt.

alert('This is an alert message!');

let name = prompt('Please enter your name:');
alert('Hello, ' + name + '!');

19.Write a JS program to validate the following of an input form:

 Password and confirm password should be same.

 Password should contain 8 characters.
 Should be a combination of upper, lower, special characters and integers.
<form onsubmit="return validateForm()">
<input type="password" id="password" placeholder="Password">
<input type="password" id="confirmPassword" placeholder="Confirm
Password">
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
let password = document.getElementById('password').value;
let confirmPassword = document.getElementById('confirmPassword').value;
let regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{8,}$/;

if (password !== confirmPassword) {

alert('Passwords do not match!');
return false;
}
if (!regex.test(password)) {
alert('Password must be at least 8 characters long and include
upper, lower case letters, special characters, and numbers.');
return false;
}
return true;
}
</script>

20. Can form validation be done just by using HTML? If yes, explain with examples.

 Yes, HTML5 provides built-in form validation features using attributes like
required, pattern, minlength, maxlength, type, and title.

<form>
<input type="text" required pattern="[A-Za-z]{3,}" title="Only
letters and at least 3 characters long">
<input type="submit">
</form>

21. Write a JS program to demonstrate the game of stone-paper-scissors within 20

lines.

let choices = ['rock', 'paper', 'scissors'];

let userChoice = prompt('Choose rock, paper, or scissors:').toLowerCase();
let computerChoice = choices[Math.floor(Math.random() * 3)];
if (userChoice === computerChoice) {
alert('It\'s a tie!');
} else if (
(userChoice === 'rock' && computerChoice === 'scissors') ||
(userChoice === 'paper' && computerChoice === 'rock') ||
(userChoice === 'scissors' && computerChoice === 'paper')
) {
alert('You win! ' + userChoice + ' beats ' + computerChoice);
} else {
alert('You lose! ' + computerChoice + ' beats ' + userChoice);
}

22.Mention the different types of selectors in CSS and differentiate between them?
 Type Selector: Selects elements by tag name.

p {
color: blue;
}

 Class Selector: Selects elements by class name.

.example {
color: red;
}

 ID Selector: Selects an element by its ID.

#example {
color: green;
}

 Attribute Selector: Selects elements by attribute.

[type="text"] {
border: 1px solid black;
}

 Pseudo-class Selector: Selects elements in a specific state.

a:hover {
color: orange;
}

 Pseudo-element Selector: Selects a part of an element.

p::first-line {
font-weight: bold;
}

23. What is body parser and how do we use body parser get data from?

o Body-parser is a middleware in Node.js used to parse the body of incoming

requests. It extracts the entire body portion of an incoming request stream and
exposes it on req.body.

javascript
Copy code
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use(bodyParser.json());
app.post('/data', (req, res) => {
console.log(req.body);
res.send('Data received');
});
 app.listen(3000, () => console.log('Server running on port
3000'));

24. Define a responsive website? How to check if the website is responsive in

Chrome?

o A responsive website adapts its layout and design based on the screen size and
orientation of the device being used to view it. In Chrome, you can check
responsiveness using Developer Tools:
1. Right-click on the webpage and select "Inspect" or press
Ctrl+Shift+I.
2. Click on the "Toggle device toolbar" icon or press Ctrl+Shift+M.
3. You can now switch between different device views to see how the
website adapts.

25. Difference between get and post method.

o GET:

 Used to request data from a specified resource.

 Data is appended to the URL and visible in the browser address bar.
 Limited amount of data can be sent.
 Typically used for retrieving data.

o POST:

 Used to send data to a server to create/update a resource.

 Data is sent in the request body and not visible in the URL.
 No data size limitation.
 Typically used for submitting form data or uploading files.

26. Explain the types of meta tags with examples.

o Meta tags provide metadata about the HTML document. They are placed
inside the <head> tag.

html
Copy code
<meta charset="UTF-8"> <!-- Specifies the character encoding
for the HTML document -->
<meta name="description" content="Free Web tutorials"> <!--
Description of the webpage -->
<meta name="keywords" content="HTML, CSS, JavaScript"> <!--
Keywords for search engines -->
<meta name="author" content="John Doe"> <!-- Author of the
document -->
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <!-- Responsive design settings -->

27. Explain the use of console.log in JS.

 o console.log is used to output messages to the web console. It is commonly
used for debugging purposes to print variables, messages, or results.

javascript
Copy code
let x = 10;
console.log('The value of x is:', x); // Output: The value of x
is: 10

28. Differentiate between div and span.

o <div>:

 A block-level element that starts on a new line and takes up the full
width available.
 Used to group block-level content.

o <span>:

 An inline element that does not start on a new line and only takes up as
much width as necessary.
 Used to group inline content.

<div>This is a block-level element.</div>

<span>This is an inline element.</span>

29.Why is it recommended to use doctype HTML in the beginning of any HTML

document?

o The <!DOCTYPE html> declaration defines the document type and version of
HTML being used. It ensures that the browser renders the page in standards
mode rather than quirks mode, which can prevent inconsistencies across
different browsers.

30.We have heard about tr and td in HTML tables. What is th? And how is it
different from tr?

o <th> defines a header cell in a table and is used inside <tr>. It makes the
content bold and centered by default.
o <tr> defines a row in a table.

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
31.Differentiate between ordered and unordered list? How do I change the ordering
and unordering style in the list? E.g., disk to diamond or start from 3rd or 4th
number.

o Ordered List (<ol>): Items are numbered.

o Unordered List (<ul>): Items are bulleted.

html
Copy code
<ol start="3" type="I">
<li>Item 1</li>
<li>Item 2</li>
</ol>
<ul style="list-style-type: square;">
<li>Item 1</li>
<li>Item 2</li>
</ul>

32.Differentiate between attributes and properties of HTML.

o Attributes: Defined in the HTML markup and provide additional information

about elements (e.g., class, id, style).
o Properties: Represent the current state of an HTML element and can be
accessed/modified using JavaScript.

<input id="input1" value="Hello">

<script>
let input = document.getElementById('input1');
console.log(input.value); // Property
console.log(input.getAttribute('value')); // Attribute
</script>

33.What is nodemon and how do you configure it?

o Nodemon is a tool that automatically restarts a Node.js application when file

changes are detected. It helps in development by reducing manual restarts.

npm install -g nodemon

Configure by running the application with nodemon:

nodemon app.js

34.Differentiate between Node.js and Express.js.

o Node.js: A JavaScript runtime built on Chrome's V8 engine that allows

running JavaScript on the server-side.
o Express.js: A web application framework for Node.js that simplifies building
web applications and APIs by providing robust features like routing and
middleware.

35.Do we have import in express? Differentiate between import and require in

Node.js.
 o require: CommonJS module system used in Node.js.

const express = require('express');

o import: ES6 module system.

import express from 'express';

o Difference:

 require is synchronous, import can be asynchronous.

 require can be used conditionally, import cannot.

36. How do you tell the Node server to run on any port that is available or to run on
a specific code?

const express = require('express');

const app = express();
const port = process.env.PORT || 3000;

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

37. Differentiate between var, let, and const.

o var:
 Function-scoped.
 Can be redeclared and updated.
 Hoisted to the top of its scope, but not initialized.
o let:
 Block-scoped.
 Cannot be redeclared in the same scope but can be updated.
 Not hoisted (temporal dead zone).
o const:
 Block-scoped.
 Cannot be redeclared or updated.
 Not hoisted (temporal dead zone).

38. Differentiate between '==' and '===' operators.

o == (Equality Operator):
 Compares two values for equality after converting both values to a
common type (type coercion).
 Example: 5 == '5' is true because the string '5' is converted to
number 5.
o === (Strict Equality Operator):
 Compares two values for equality without type conversion. Both type
and value must be the same.
 Example: 5 === '5' is false because the types (number and string)
are different.
39. What are arrow functions? Write a function to calculate the square of a number
using arrow functions.
o Arrow functions are a concise way to write functions in JavaScript. They do
not have their own this context and are useful for writing shorter function
syntax.

const square = (num) => num * num;

console.log(square(5)); // Output: 25

40. Explain destructuring assignment with an example.

o Destructuring assignment is a JavaScript expression that makes it possible to
unpack values from arrays, or properties from objects, into distinct variables.

// Array Destructuring
const [a, b] = [1, 2];
console.log(a); // Output: 1
console.log(b); // Output: 2

// Object Destructuring
const {name, age} = {name: 'John', age: 30};
console.log(name); // Output: John
console.log(age); // Output: 30

41. Write a program in JS to filter out the even numbers from an array.

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4, 6]

42. Explain the map() function in JavaScript with an example.

o The map() function creates a new array populated with the results of calling a
provided function on every element in the calling array.

const numbers = [1, 2, 3, 4];

const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); // Output: [1, 4, 9, 16]

43. What are promises in JavaScript? Write a program to demonstrate the use of
promises.
o Promises in JavaScript represent the eventual completion (or failure) of an
asynchronous operation and its resulting value.

const myPromise = new Promise((resolve, reject) => {

setTimeout(() => {
resolve('Promise fulfilled!');
}, 2000);
});

myPromise.then((message) => {
console.log(message); // Output after 2 seconds: Promise
fulfilled!
}).catch((error) => {
console.error(error);
});
44. What is the purpose of using async/await?
o async/await is syntactic sugar built on top of promises, making
asynchronous code easier to write and read. async declares an asynchronous
function, and await pauses the execution until the promise resolves.

async function fetchData() {

try {
let response = await
fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}

fetchData();

45. Explain the use of fetch API in JavaScript with an example.

o The fetch API provides a way to make network requests and handle
responses, replacing older XMLHttpRequest.

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

46. What are the different types of storage available in the browser? Explain with
examples.
o Local Storage: Stores data with no expiration time. Data is available even
after the browser is closed and reopened.

localStorage.setItem('name', 'John');
console.log(localStorage.getItem('name')); // Output: John

o Session Storage: Stores data for the duration of the page session. Data is
cleared when the page session ends.

sessionStorage.setItem('name', 'Doe');
console.log(sessionStorage.getItem('name')); // Output: Doe

o Cookies: Store data that is sent to the server with every HTTP request. Can
have an expiration date.

document.cookie = "username=John Doe; expires=Fri, 18 Dec 2024

12:00:00 UTC";
console.log(document.cookie); // Output: username=John Doe

47. What are REST APIs? Explain the principles of REST.

o REST (Representational State Transfer) APIs use HTTP requests to perform
CRUD operations. The principles include:
 Stateless: Each request from client to server must contain all the
information needed to understand and process the request.
 Client-Server: Separation of client and server concerns.
  Uniform Interface: Simplifies and decouples the architecture,
allowing each part to evolve independently.
 Cacheable: Responses must define themselves as cacheable or not.
 Layered System: Client cannot ordinarily tell whether it is connected
directly to the end server or an intermediary.
48. What is the purpose of using middleware in Express.js? Give an example.
o Middleware functions are functions that have access to the request object
(req), the response object (res), and the next middleware function in the
application's request-response cycle. They can execute code, make changes to
the request and response objects, end the request-response cycle, and call the
next middleware function.

const express = require('express');

const app = express();

// Middleware function
app.use((req, res, next) => {
console.log('Request URL:', req.originalUrl);
next();
});

app.get('/', (req, res) => {

res.send('Hello World!');
});

app.listen(3000, () => console.log('Server running on port

3000'));

49. Explain CORS and how to enable it in Express.js.

o CORS (Cross-Origin Resource Sharing) is a mechanism that allows restricted
resources on a web page to be requested from another domain outside the
domain from which the resource originated. To enable CORS in Express.js,
you can use the cors middleware.

const express = require('express');

const cors = require('cors');
const app = express();

app.use(cors());

app.get('/', (req, res) => {

res.send('CORS enabled');
});

app.listen(3000, () => console.log('Server running on port

3000'));

50. What is the purpose of the package.json file in a Node.js project?

o The package.json file holds metadata relevant to the project and is used to
manage the project's dependencies, scripts, version, and other configuration
information. It includes details like the name, version, description, main file,
scripts, author, license, and dependencies.

{
"name": "my-app",
 "version": "1.0.0",
"description": "A sample Node.js project",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"author": "John Doe",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
}
}