1.

Web App:

✅ What is a Web App?

A web app is an application that runs in a web browser.

It uses web technologies like HTML, CSS, JavaScript on the front end, and may use
backend languages like Python, PHP, Java, or Node.js.

📌 Key Points:
- Accessible via URLs (like websites)
- Runs on a server, not installed locally
- Supports user interaction, data processing, and dynamic content
- Examples: Gmail, Facebook, Online Banking apps

2. Is JavaScript Programming Language?

Yes, JavaScript (JS) is a programming language.

🔹 Why?
- It has variables, functions, loops, and conditions
- Supports logic and decision making
- Can build interactive websites, server-side apps, and even mobile apps

💡 Common Uses:
- Frontend (with HTML & CSS)
- Backend (with Node.js)
- Game development, automation, APIs, and more

3. what is GET and POST? which is Secure?

🔁 What is GET?

- GET is an HTTP method used to request data from a server.

- Data is sent through the URL as query parameters.

http
GET /login?username=dhanish&password=123

✅ When to use:
- When you are only retrieving data
- For search operations, filters, or simple info

📝 What is POST?

- POST is used to send data to the server (usually for storing or updating).
- Data is sent in the body of the request, not the URL.

http
POST /login
Body: { "username": "dhanish", "password": "123" }

✅ When to use:
- For form submissions like login/signup
- When sending sensitive or large data

So, POST is more secure because:

- Data isn't exposed in the browser history or URL.
- It’s harder to tamper with or accidentally share.

4. Data Validation in website:

Data validation ensures that the user inputs correct and expected data before it is
processed or stored.

🧠 Types of Data Validation:

1. Client-side (in browser)

- Done using HTML, JavaScript
- Fast response
- Example: Checking if email format is valid

2. Server-side (on backend)

- Done using backend code (like Python, PHP, Node.js)
- More secure
- Example: Checking if username already exists in database

📌 Why it's important:

- Prevents invalid or malicious input
- Improves data quality
- Protects against attacks like SQL Injection, XSS

💡 Example (Client-side HTML):

html
<input type="email" required>

💡 Example (JavaScript):
js
if (password.length < 8) {
alert("Password must be at least 8 characters long");
}

5. how is a normal user able to see website live?

1. User enters a website URL (e.g., www.google.com) in the browser.

2. The browser sends a request to the DNS server to get the website’s IP address.
3. The request is forwarded to the web server where the website is hosted.
4. The server responds with the website files (HTML, CSS, JS).
5. The browser renders these files and displays the live website.

📦 Real Example Flow:

User → Browser → DNS → Server → Response → Live Website

💡 Key Terms:
- DNS: Converts domain names to IP addresses
- Hosting server: Stores the website files
- HTTP/HTTPS: Protocols used to send and receive data
- Browser: Renders the website for the user

6. what are sematic tags in HTML? why are they important?

Semantic tags are HTML tags that clearly describe the meaning of the content they
hold.

🧠 Examples of Semantic Tags:

- <header> – defines the header section
- <nav> – defines navigation links
- <main> – main content area
- <section> – a section of content
- <article> – an independent piece of content
- <footer> – footer section

🎯 Why are Semantic Tags Important?

1. Improves code readability
2. Helps screen readers and accessibility tools
3. Better for SEO (search engines understand page structure)
4. Easier for developers to maintain

🚫 Non-semantic Example:
html
<div id="header">Welcome</div>

✅ Semantic Example:
html
<header>Welcome</header>

7. Difference between relative, absolute, and fixed positioning in CSS :

✅ 1. relative
- Positioned relative to its normal position
- It moves, but still occupies space in the layout

css
position: relative;
top: 10px; / moves 10px down from its original position /

✅ 2. absolute
- Positioned relative to the nearest positioned ancestor (not static)
- Removed from the normal flow (doesn’t occupy space)

css
position: absolute;
top: 0;
left: 0;

🔹 If no positioned ancestor → positioned relative to <body> (or <html>)

✅ 3. fixed
- Positioned relative to the browser window
- Stays fixed even while scrolling

css
position: fixed;
bottom: 10px;
right: 10px;

🔁 Quick Summary Table:

| Position | Relative To | Scrolls With Page | Occupies Space |

|------------|--------------------------|-------------------|----------------|
| relative | Itself (original spot) | ✅ Yes | ✅ Yes |
| absolute | Nearest positioned parent | ❌ No | ❌ No |
| fixed | Browser window | ❌ No | ❌ No |

8. How does a browser render webpage from HTMl file?

1. Browser requests the HTML file

- User enters URL → browser sends a request to server → gets the HTML file.

2. HTML is parsed
- Browser reads the HTML code top to bottom.

3. DOM is created (Document Object Model)

- The HTML is turned into a tree structure representing elements on the page.

4. CSS is parsed and applied

- External/internal styles are fetched and applied to elements.

5. Render Tree is built

- Combines the DOM and CSS to decide how each element looks.

6. Layout stage (Reflow)

- Browser calculates position and size of each element on screen.
7. Painting (Repaint)
- Elements are drawn pixel by pixel on the screen.

8. JavaScript execution
- Any <script> tags are run, which can modify the DOM dynamically.

🎯 In short:

HTML → DOM → CSS + JS → Render Tree → Layout → Paint → Display

9. Media queries in CSS and how are they used in responsive design?

Media queries are a feature in CSS that allow you to apply styles based on device
properties, like screen size, orientation, or resolution.

🧠 Why are they used?

To make websites responsive — meaning they adapt to different screen sizes (like
mobile, tablet, desktop).

🔹 Syntax Example:
css
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}

🟢 This applies the background color only if the screen width is 768px or less
(mobile/tablet).

💡 Common Use Cases:

- Adjusting layouts for mobile vs desktop
- Hiding/showing elements based on screen size
- Changing font sizes or image widths

🔁 Summary:
Media queries help you write device-specific styles for a smooth, user-friendly
experience on all screen sizes.

10. what is DOM?

DOM (Document Object Model) is a tree-like structure that represents the content of
an HTML document in the browser.

It allows JavaScript to access, modify, or delete HTML elements dynamically.

 📌 Key Points:
- Each HTML element becomes a node in the DOM tree
- The browser creates the DOM when it loads the HTML
- JavaScript can use the DOM to make a page interactive

💡 Example:
html
<p id="demo">Hello</p>

js
document.getElementById("demo").innerText = "Hi!";

📌 This changes the text from "Hello" to "Hi!" using the DOM.

11. JS Validation:

JavaScript validation is the process of checking user input on the client side
(browser) before it’s sent to the server.

🎯 Why is it used?
- To ensure correct data is entered
- Improve user experience with instant feedback
- Reduce unnecessary server requests

💡 Example: Check if input is empty

html
<input type="text" id="name">
<button onclick="validate()">Submit</button>

<script>
function validate() {
let name = document.getElementById("name").value;
if (name === "") {
alert("Name field cannot be empty");
}
}
</script>

📌 Common Validations:
- Empty fields
- Email format
- Password strength
- Matching passwords
- Numeric or date formats

12. What is HTML, CSS and JAVASCRIPT?

 ✅ 1. HTML (HyperText Markup Language)
- Purpose: HTML is used to structure the content of a webpage.
- What it does: It defines elements like headings, paragraphs, links, images,
forms, and more.
- Syntax: HTML uses tags like <h1>, <p>, <a>, etc., to define the structure.

Example:
html
<h1>Welcome to My Website</h1>
<p>This is a simple HTML paragraph.</p>

✅ 2. CSS (Cascading Style Sheets)

- Purpose: CSS is used to style the HTML elements, controlling the layout, colors,
fonts, and overall appearance.
- What it does: It defines how HTML elements should look (e.g., size, position,
color).
- Syntax: CSS uses selectors to target HTML elements and properties to style them.

Example:
css
h1 {
color: blue;
font-size: 36px;
}

p {
font-family: Arial, sans-serif;
color: gray;
}

✅ 3. JavaScript (JS)
- Purpose: JavaScript is used to add interactivity to a webpage.
- What it does: It allows you to modify content dynamically, handle events, and
create animations or validations.
- Syntax: JavaScript uses functions, variables, and events to control the behavior
of the page.

Example:
js
document.getElementById("myButton").onclick = function() {
alert("Button clicked!");
}

🔁 Summary:
- HTML: Structures content
- CSS: Styles content
- JavaScript: Adds interactivity and behavior

13. HTML form input types:

| Input Type | Purpose | Example
|
|-----------------|-------------------------------------|--------------------------
---------------|
| text | Single-line text | <input type="text">
|
| password | Password field (hidden text) | <input type="password">
|
| email | Email address input (validated) | <input type="email">
|
| number | Numeric input | <input type="number">
|
| date | Date picker | <input type="date">
|
| checkbox | Checkbox for boolean values | <input type="checkbox">
|
| radio | Radio buttons for single options | <input type="radio">
|
| file | File selection | <input type="file">
|
| submit | Submit button | <input type="submit">
|
| reset | Reset form fields | <input type="reset">
|
| button | Custom button | <input type="button">
|
| hidden | Hidden field (not visible) | <input type="hidden">
|
| color | Color picker | <input type="color">
|

14. Validation of data in HTML form:

1. Start with the Overview:

"Form validation is the process of ensuring that the data entered by users into
form fields meets specific criteria before submission. It helps improve the quality
of data and provides a better user experience."

2. Explain HTML5 Validation:

"HTML5 offers built-in validation using input attributes. For example, we can use
attributes like required, type="email", min/max, and pattern to enforce basic
validation rules directly in the HTML."

- required ensures the field is not left empty.

- type="email" automatically validates the format of an email address.
- min and max are used for numeric or date input to ensure values fall within a
specific range.
- pattern allows using regular expressions to define more complex validation
criteria, such as ensuring a specific password format.

3. Explain JavaScript Validation for Custom Scenarios:

"For more complex or custom validation, we can use JavaScript. With JavaScript, we
can validate multiple fields, provide real-time feedback, and show custom error
messages."

"Here’s how it works:

- We check if a field is empty (like ensuring the username is not left blank).
- For email validation, we use regular expressions to check that the entered email
follows a valid format.
- JavaScript prevents the form from being submitted if any of the validation checks
fail."

4. Mention Error Handling:

"JavaScript can also display error messages dynamically below each form field if
the validation fails, helping users understand exactly what needs to be corrected."

5. Conclude with the Benefits:

"Combining HTML5’s built-in validation and JavaScript's flexibility ensures that

users provide valid and meaningful data, reducing the chances of errors or
incomplete submissions."

Example:

You could also walk the interviewer through a simple example:

- "For instance, if we have an email field, using type="email" ensures that the
user can only enter a valid email format. If the field is left empty or the format
is incorrect, the form won’t submit until the issue is fixed."

- "If we want to validate passwords, we can check the length of the password or
ensure that it includes both letters and numbers using JavaScript."

15. How server get data from HTML Form?

When a user submits an HTML form, the data entered into the form is sent to a
server for processing. This happens through a combination of HTML form elements,
HTTP methods (GET or POST), and server-side processing.

Steps to Get Data:

1. User Fills Out the Form:

The user enters data into the form fields (e.g., text boxes, checkboxes, radio
buttons) on the HTML page.

2. Form Submission:
When the user clicks the Submit button, the form data is sent to the server. The
form sends data to the server using one of two HTTP methods:

- GET: Data is appended to the URL as query parameters.

- POST: Data is sent in the body of the request (more secure for sensitive
data).

Example:
html
<form action="server_endpoint" method="POST">
<input type="text" name="username" placeholder="Enter username">
<input type="password" name="password" placeholder="Enter password">
<input type="submit" value="Submit">
</form>

3. Server Receives the Data:

When the form is submitted, the server (e.g., using PHP, Node.js, Python, etc.)
receives the data. The data sent from the HTML form can be accessed through the
request object in the server-side code.

- For GET requests: The data is available in the URL in key-value pairs (e.g.,
?username=johndoe&password=secret123).
- For POST requests: The data is available in the body of the request and can be
parsed using the server-side language (e.g., $_POST in PHP, request.body in
Express.js).

4. Server Processes the Data:

The server processes the data (e.g., stores it in a database, checks it against
stored values, performs calculations).

5. Server Sends a Response:

After processing the data, the server may send a response back to the browser.
This could be a confirmation message, an error, or a new page (e.g., a welcome page
after login).

1. HTML Form:
html
<form action="/submit" method="POST">
<input type="text" name="username" placeholder="Enter your username"
required>
<input type="password" name="password" placeholder="Enter your password"
required>
<input type="submit" value="Submit">
</form>
2. Form Submission (POST request):
When the user clicks "Submit," the form sends the data (e.g.,
username=johndoe&password=secret123) to the server using a POST request.

3. Server-side Processing:
In Node.js (using Express), the server would receive the data like this:
js
app.post('/submit', (req, res) => {
const username = req.body.username; // Get the data from the form
const password = req.body.password; // Get the data from the form

// Process data (e.g., check login credentials)

// Send response back to the user
res.send('Form data received!');
});

4. Server Response:
The server processes the data and sends a response (e.g., confirmation or an
error message).

Key Points:
- The form sends data to the server using GET (in URL) or POST (in request body).
- The server processes the data and sends a response to the browser.
- GET is used for simple data retrieval, while POST is used for sensitive data
submission (like login credentials).

16. Difference between <Section> and <Article>:

1. <section>:
- Purpose: Represents a generic section of content in a document, such as a
chapter, a group of related content, or a section within an article.
- Usage: Typically used to group related content together under a common heading
(like a thematic division). It doesn't necessarily make the content stand on its
own.
- Example:
html
<section>
<h2>About Us</h2>
<p>This section describes our company...</p>
</section>

2. <article>:
- Purpose: Represents self-contained content that can stand alone and be reused or
syndicated. It usually contains independent information like a blog post, news
article, or product description.
- Usage: Each <article> should be able to make sense on its own outside the context
of the page, such as in an RSS feed or when printed.
- Example:
html
<article>
<h2>Breaking News</h2>
<p>This is an article about the latest news...</p>
</article>

Key Differences:
- Self-contained content: <article> is for content that can stand alone, whereas
<section> is for grouping related content within a larger page.
- Reusability: <article> is often used for content that can be syndicated or
reused, while <section> is just a structural part of the page.

17. CSS Selector:

CSS selectors are patterns used to select and style HTML elements based on their
attributes like ID, class, type, and more.

Types of CSS Selectors:

1. Universal Selector ():

- Selects all elements on the page.
css
{
color: blue;
}

2. Type Selector (Element Selector):

- Selects all elements of a specific type (e.g., all <p> elements).
css
p {
color: red;
}

3. Class Selector (.):

- Selects elements with a specific class attribute.
css
.example {
background-color: yellow;
}

4. ID Selector ():
- Selects a single element with a specific ID attribute.
css
header {
font-size: 20px;
 }

5. Descendant Selector (space):

- Selects elements that are inside a specified element.
css
div p {
color: green;
}

6. Child Selector (>):

- Selects elements that are direct children of a specified element.
css
div > p {
color: purple;
}

7. Adjacent Sibling Selector (+):

- Selects the element that is directly after a specified element.
css
h1 + p {
color: orange;
}

8. General Sibling Selector (~):

- Selects all elements that are siblings (same parent) of a specified element.
css
h1 ~ p {
color: gray;
}

9. Attribute Selector:
- Selects elements with a specific attribute.
css
input[type="text"] {
border: 1px solid black;
}

10. Pseudo-class Selector (:):

- Selects elements based on their state (e.g., :hover, :first-child).
css
a:hover {
color: red;
}
11. Pseudo-element Selector (::):
- Selects part of an element (e.g., the first letter, first line).
css
p::first-letter {
font-size: 2em;
}

Summary:
- CSS selectors are used to target elements in HTML to apply styles.
- Selectors can be based on element type, class, ID, attributes, and more.
- Understanding these selectors is essential for efficient and precise styling of
web pages.

18. Events in JS:

An event in JavaScript refers to an action or occurrence that is detected by the

browser or the user, such as a mouse click, keyboard input, or page load. Events
are triggered by interactions with the web page or system, and JavaScript allows
developers to respond to these events by executing specific code (event handling).

Examples of Events:

1. User Interactions:
- Mouse Events: click, dblclick, mouseover, mouseout, etc.
- Keyboard Events: keydown, keyup, keypress
- Form Events: submit, focus, blur, change, etc.

2. Browser Events:
- Window/Document Events: load, resize, scroll, etc.

Event Handling:
You can handle events in JavaScript using:
- Event Listeners: These are functions that are triggered when a specific event
occurs on an element.

Example:
javascript
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});

In this example, the event is click, and the browser will respond by showing an
alert message when the user clicks the button.

Summary:
An event in JavaScript is any action that triggers a response, such as a user
clicking on a button, typing in a text field, or the page finishing loading.
JavaScript enables developers to define how the system should respond to these
actions through event listeners or handlers.

19. Use of event.target and event reference:

In JavaScript, event.target and event reference are commonly used in event handling
to work with the target element that triggered the event and to access
event-specific properties.

1. event.target

- Definition: event.target refers to the specific element that triggered the event.
It helps in identifying the element that fired the event, especially when events
are delegated to parent elements.

- Use Case: Useful when dealing with multiple elements that share the same event
handler, or when using event delegation. This is often used in scenarios where you
don't want to assign an event listener to each individual element but instead to a
common parent.

Example:

html
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<script>
document.getElementById("myList").addEventListener("click", function(event) {
alert("You clicked on: " + event.target.textContent);
});
</script>

In this example:
- The event listener is attached to the <ul> element.
- event.target is used to get the specific <li> element that was clicked, and it
shows an alert with the content of that item.

2. event Reference (Event Object)

- Definition: The event object is an automatically passed argument to the event

handler function. It contains details about the event, such as the type of event
(e.g., click, keydown), the element that triggered the event, and additional
properties like mouse coordinates, keyboard keys, etc.
- Use Case: The event object is used to retrieve all the information about the
event, such as the type, target, key pressed, mouse position, etc. It can be used
to prevent the default action (e.g., prevent form submission) or stop the event
from propagating further.

Example:

html
<button id="myButton">Click Me</button>

<script>
document.getElementById("myButton").addEventListener("click", function(event) {
// Accessing event properties
alert("Event type: " + event.type);
alert("Mouse position: X = " + event.clientX + ", Y = " + event.clientY);
});
</script>

In this example:
- event.type gives the type of the event (click).
- event.clientX and event.clientY give the mouse position relative to the viewport
when the button is clicked.

Common Uses:

- event.target:
- Identifying which element was clicked, hovered, or interacted with.
- Useful in event delegation to handle events on child elements without attaching
individual handlers.

- event Object:
- Accessing properties like event.type, event.target, event.key, event.clientX,
event.clientY, etc.
- Preventing default behavior (event.preventDefault()) and stopping event
propagation (event.stopPropagation()).

Example: Using both together (Event Delegation):

html
<div id="container">
<button class="item">Item 1</button>
<button class="item">Item 2</button>
<button class="item">Item 3</button>
</div>

<script>
document.getElementById("container").addEventListener("click", function(event) {
if (event.target.classList.contains("item")) {
alert("You clicked on: " + event.target.textContent);
 }
});
</script>

- In this example, event.target ensures we identify which button (inside the

container) was clicked, even though the event listener is on the parent
(container).

Summary:
- event.target is used to get the element that triggered the event, useful for
event delegation.
- event is the event object passed to the handler, which contains useful
information about the event like type, coordinates, and key presses.

20. Event Delegation:

Event Delegation is a technique where you add one event listener to a parent
element instead of adding separate listeners to each child element.

How It Works:
- When you click on a child element (like a button or list item), the event
"bubbles up" to the parent element.
- The parent element listens for that event and can check which child element was
clicked using event.target.

Why Use It?

- Efficiency: Instead of attaching an event listener to every child element, you
attach just one to the parent. This saves memory and improves performance.
- Dynamic Content: It works even if new child elements are added later on.

Example:

Imagine you have a list of items, and you want to know which item was clicked.

Without Event Delegation:

You'd have to add an event listener to each list item:

javascript
document.getElementById("item1").addEventListener("click", function() { alert("Item
1 clicked!"); });
document.getElementById("item2").addEventListener("click", function() { alert("Item
2 clicked!"); });
// And so on for each item...

With Event Delegation:

You add just one event listener to the parent (the list):
html
<ul id="list">
<li id="item1">Item 1</li>
<li id="item2">Item 2</li>
</ul>

<script>
document.getElementById("list").addEventListener("click", function(event) {
// event.target is the specific <li> clicked
alert(event.target.textContent + " clicked!");
});
</script>

Now, even if you add more items later or dynamically, this one event listener will
still work!

Summary:
- Event Delegation saves you from adding too many event listeners.
- You attach one listener to the parent, and use event.target to find out which
child element was clicked.
- It works well with dynamic content (elements added later).

21. Promise in JS:

For an interview, it's best to keep it concise and focus on the key concepts.
Here's how you could explain Promises in a simple way:

Simple Explanation:
A Promise is like a "promise" made by an asynchronous operation. It will either:
- Fulfill with a result (success), or
- Reject with an error (failure).

Promises help handle asynchronous operations like network requests without getting
stuck in complicated nested callbacks.

Key Points:
1. States of a Promise:
- Pending: The operation is still in progress.
- Fulfilled: The operation was successful.
- Rejected: The operation failed.

2. Basic Syntax:
javascript
let myPromise = new Promise((resolve, reject) => {
let success = true; // Example condition
if (success) resolve("Success!");
else reject("Error!");
});
3. Handling Results:
- Use .then() for successful outcomes:
javascript
myPromise.then(result => console.log(result)); // Success!

- Use .catch() to handle errors:

javascript
myPromise.catch(error => console.log(error)); // Error!

4. Chaining Promises:
You can chain multiple .then() to handle a sequence of asynchronous operations:
javascript
myPromise
.then(result => result 2)
.then(result => console.log(result)); // 10

Example Use Case:

If you’re making a network request, you use a promise to wait for the result before
doing something with it.

Optional for Deeper Understanding (If Interviewer Asks):

- Promise.all(): Waits for all promises to finish.
- Promise.race(): Resolves when the first promise completes.

22. what is a webpage?

A webpage is a document on the internet that is accessed through a web browser. It

is typically written in HTML (HyperText Markup Language) and can include text,
images, videos, links, forms, and other multimedia elements. A webpage can be
static (content doesn't change) or dynamic (content changes based on user
interactions or other factors).

Key Points:
1. HTML: The core language used to structure the content of a webpage.
2. CSS: Used to style the webpage (fonts, colors, layout).
3. JavaScript: Adds interactivity and dynamic behavior to the webpage.

Example:
- When you open a website like Google or Facebook, what you see is made up of
several webpages, each accessible by a unique URL (Uniform Resource Locator).

In short, a webpage is a single page or document on the web that users can view and
interact with.
23. Create JS function to print a string and click event button.

Here’s an example of a JavaScript function that prints a string when a button is

clicked:

HTML:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Click Example</title>
</head>
<body>
<!-- Button to trigger the function -->
<button onclick="printMessage()">Click Me</button>

<!-- Area to display the printed message -->

<div id="output"></div>

<script>
// JavaScript function to print the string when the button is clicked
function printMessage() {
// The message you want to print
const message = "Hello, this is a printed message!";

// Get the element with id 'output' and set its innerHTML to the message
document.getElementById('output').innerHTML = message;
}
</script>
</body>
</html>

How it works:
- When the button is clicked, the printMessage() function is triggered.
- The function sets the inner HTML of the div with id="output" to the string
"Hello, this is a printed message!".