HTML
1. What is HTML?
HTML(Hyper Text Markup Language) is used to structure the webpage and
add contents on the webpage.
2. What is the difference between <div> and <span>?
● <div> is a block-level element → takes up full width, starts on a
new line.
● <span> is an inline element → takes only content width, stays in
the same line.
3. What is the purpose of the <!DOCTYPE html> declaration?
It tells the browser that the document is written in HTML5 and
also the version of html.
4. What is the difference between block-level and inline elements?
● Block-level: start on a new line, take full width of the browser.
(e.g., <div>, <p>, <h1>...)
● Inline: stay in the same line, take only the content width of the
browser. (e.g., <span>, <a>, <img>...)
5. What are semantic elements? Give examples.
Semantic elements are HTML elements by the name of the element we
understand what type of content they contain.
Examples: <header>, <footer>, <article>, <section>, <nav>,
<aside>, <main>, <figure>
Helps with SEO and code readability.
6. What is the difference between <link> and <a> tags?
● <link> connects external resources (like CSS files) to a webpage.
Used inside <head>
Example: <link rel="stylesheet" href="[Link]">
● <a> creates hyperlinks to other pages or sections.
Example: <a href="[Link]">About</a>
7. How do you create a table in HTML?
Use the <table> tag with rows and cells:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Sruti</td>
<td>21</td>
</tr>
</table>
● <tr> → table row
● <th> → table header
● <td> → table data
8. What are forms in HTML? What are the different input types?
A form collects user input and sends it to a server.
<form>
<input type="text" placeholder="Name">
<input type="email">
<input type="password">
<input type="submit" value="Submit">
</form>
Common input types: text, email, password, number, checkbox, radio,
date, file, submit, reset.
9. What are meta tags used for?
Meta tags give information about the webpage (metadata) to browsers
and search engines.
Placed inside <head>.
10. Explain the differences between <section> and <article>
11. What are HTML5 new form input types? Give examples.
Email, url, number, range, date, time, month, week, color, tel, search
12. How do you make a link open in a new tab?
Use the target="_blank" attribute in the anchor tag.
13. What are data attributes (data-*) in HTML and how can you access
them in JavaScript?
Data attributes let you store custom, private data inside an HTML
element — data that is not meant to be displayed but can be used by
JavaScript for logic, interactivity, or styling.
<div id="product" data-price="499" data-category="electronics">
Headphones
</div>
Accessing the data using JS
const product = [Link]("product");
[Link]([Link]); // Output: 499
[Link]([Link]); // Output: electronics
14. What is the difference between HTML and HTML5?
15. What are form validation attributes in HTML5?
required, min, max, minlength, maxlength, pattern, readonly, disabled
[Link] is the iframe tag used for?
iframe tag is used to embed another webpage into our current
webpage. Like youtube videos or google maps
17. Explain accessibility in HTML (alt, aria-label, etc.).
Accessibility ensures websites are usable by people with disabilities.
CSS
1. What is CSS?
CSS (Cascading Style Sheets) is used to style and layout web pages —
for example, to set colors, fonts, spacing, and positioning of
elements.
2. How to add external CSS?
● First, create a CSS file with .css extension then
● Use the <link> tag inside the <head> of the HTML file:
● <link rel="stylesheet" href="[Link]">
3. What is a selector? Types of selector
Selector is used to target an html element. Selectors are - id(#),
class(.), tagname, universal(*), grouping(,)
Universal → It is used to target all the html elements including the
body tag.
Grouping → It is used to provide the same style to multiple different
selectors.
4. What is the difference between class and ID selectors?
● Class (.classname) → can be used on multiple elements. Has less
priority than id selector.
● ID (#idname) → must be unique for each element. Has more priority
than class selector
5. What is the difference between relative, absolute positioning?
● Relative → element moves relative to its original position. It
remembers its original position and other elements cannot occupy
the position.
● Absolute → element moves relative to its ancestor. It forgets its
original position and other elements can occupy the position.
6. What is the difference between padding and margin?
● Padding → space between content and border of an element.
● Margin → space outside the element or border (between border and
other elements).
7. What is the box model in CSS?
Every element is considered as a box in CSS, which consist of:
Content → Padding → Border → Margin
It defines how size and spacing of elements are calculated.
8. What is z-index in CSS?
z-index controls the stacking order of elements or overlapping of the
elements on the z-axis (front or back).
Higher z-index = appears on top of lower ones.
Works only with position property.
9. What are media queries and why are they used?
Media queries are used to make responsive designs — they apply styles
based on device screen size or orientation.
@media all and (max-width: 600px) { ... }
10. How can you center a div horizontally and vertically?
<div class="parent">
<div class="child"></div>
</div>
.parent{
height: 400px;
width: 100%;
border: solid;
display: flex;
justify-content: center;
align-items: center;
}
.child{
height: 50px;
width: 50px;
background-color: red;
}
11. What are CSS transitions and animations?
● Transition → smooth change of style from one style to another
style on hover.
● Animation → It is a continuous change of style from one style to
another and so on. To create animation use
■ @keyframes identifier{ }
12. What is the difference between display: none and visibility:
hidden?
● display: none → Hides the element and it does not occupy any space
on the webpage.
● visibility: hidden → Hides the element but it still occupies space
on the webpage.
13. What are Flexbox and Grid in CSS?
Flexbox
● Used for 1D (one-dimensional) layouts — arranging items in one
direction (either a row or a column).
Grid
● Used for 2D (two-dimensional) layouts — arranging items in rows
and columns together.
14. What is the difference between position: sticky and fixed?
● Sticky → Initially the element acts like a relative but when it
reaches a certain scrolling point it becomes fixed there.
● Fixed → stays fixed on the screen even when the page scrolls.
15. What are CSS variables and how to create them?
CSS variables (custom property) are used to store reusable values
(like colors or sizes).
● CSS variables are defined inside a :root selector (or any other
selector) using -- (double hyphen) before the variable name.
:root {
--primary-color: blue;
--font-size: 16px;
}
● Use the var() function to access the variable.
h1 {
color: var(--primary-color);
font-size: var(--font-size);
}
16. What is the difference between inline, block, and inline-block?
17. What is opacity property?
● The opacity property in CSS sets the transparency level of an
element, determining how much of the content behind it is
visible.
● Values: The property accepts a number between 0 (fully
transparent/invisible) and 1 (fully opaque/solid).
18. What is border-radius property?
● It is used to add rounded corners to an element.
● To make an element circle using border-radius: 50% or above.
JavaScript
1. What is JavaScript?
JavaScript is a scripting language used to make web pages interactive
and dynamic.
2. Difference between var, let, and const.
3. What is the difference between == and ===?
● == → compares values only (performs implicit type conversion).
● === → compares values and data types (no type conversion).
5 == "5" // true
5 === "5" // false
4. What are truthy and falsy values?
● Falsy values: 0, "", null, undefined, false,0n,NaN.
● Everything else is truthy.
5. What are functions in JavaScript?
Functions are blocks of code used to perform a specific task and it is
executed whenever it is called.
function greet() {
[Link]("Hii All");
}
greet();
6. What are arrow functions?
Arrow functions are a shorter and cleaner way to write functions in
JavaScript.
// Normal function
function add(a, b) {
return a + b;
}
// Arrow function
const add = (a, b) => a + b;
add(10, 20)
7. What is the difference between null and undefined?
● undefined → a variable declared but not assigned any value.
● null → an intentional absence of value assigned by the
programmer.
let x; // undefined
let y = null; // null
8. What is scope in JavaScript? What are the types of scope?
Scope determines where a variable can be accessed.
Types:
● Global scope – accessible everywhere.
● Function scope – accessible only inside that function (var, let,
const).
● Block scope – accessible only inside {} (let, const). var does
not have a block scope.
9. What are closures?
A closure is when an inner function remembers variables from its outer
function even after the outer function has finished executing. A
closure holds the reference of the outer function variables.
function outer() {
let count = 0;
return function inner() {
[Link](count);
};
}
const counter = outer();
counter();
10. What is hoisting in JavaScript? Is hoisting possible in var, let
and const?
Hoisting means moving variable and function declarations to the top of
their scope before code execution.
● var → hoisted (value becomes undefined).
● let and const → hoisted but not accessible before declaration as
the let and const variables are present in the TDZ (Temporal Dead
Zone).
TDZ is the phase where a let or const variable can’t be used
before its declaration and initialization.
11. What are higher-order functions and callback functions?
● Callback function → a function passed as an argument to a higher
order function.
● Higher-order function → a function that accepts another function
as an argument.
function higherOrder(fn) {
[Link]("Before executing callback");
fn();
[Link]("After executing callback");
}
higherOrder(() => [Link]("Callback function executed"));
12. What is the DOM?
● Whenever JS wants to interact with HTML (access and change
content, style, and structure of a webpage) it uses DOM.
● DOM is created by the browser.
● DOM (Document Object Model) is a tree-like structure representing
HTMLelements.
● It is represented by document object.
13. How to create an element in JS?
● Use the createElement() method.
const div = [Link]("div");
[Link] = "Hello Sruti!";
[Link](div);
14. What is the difference between textContent, and innerHTML?
● textContent only displays text.
● innerHTML allows adding HTML tags.
html
<div id="demo">
Hello <b>Everyone</b>!
</div>
js
const div = [Link]("demo");
[Link]([Link]); // Output: "Hello Everyone!"
[Link]([Link]); // Output: "Hello <b>Everyone</b>!"
15. How to select elements in JavaScript?
getElementById()
● Selects an element by its ID.
● Returns a single element.
● Syntax: [Link]("idName");
getElementsByClassName()
● Selects elements by class name.
● Returns a collection (HTMLCollection) of matching elements.
● Syntax: [Link]("className");
getElementsByTagName()
● Selects elements by tag name (e.g., div, p, h1).
● Returns a collection (HTMLCollection) of matching elements.
● Syntax: [Link]("tagName");
querySelector()
● Selects the first matching element based on an ID (#id), class
(.class), or tag (tag).
● Syntax: [Link]("#idName / .className / tagName");
querySelectorAll()
● Selects all matching elements based on an ID, class, or tag.
● Syntax: [Link]("#idName / .className /
tagName");
16. What are events? How to attach an event to an HTML element?
Events are actions triggered by the user (e.g., clicking a button,
pressing a key, resizing a window, etc.).
The addEventListener() method in JavaScript is used to attach an event
handler function to a specified element.
It accepts 2 parameters :
1.Event name
2.Event handler function which gets executed when the event occurs
on the element.
Syntax : [Link]("eventName", function);
let button = [Link]("myButton");
[Link]("click", () => {
[Link]("Click Event is Triggered");
});
17. What is event propagation?
Event propagation refers to how events flow through the DOM hierarchy
when an event occurs.
It consists of three phases:
Capturing phase
● The event starts from the window/document and moves down the DOM
tree toward the target element.
Target phase
● The event reaches the target element where it was triggered.
● Event listeners on the target element are executed here.
Bubbling phase
● The event bubbles up from the target element back up to the
document/window.
● Event listeners on parent elements are executed during this
phase.
18. What is the difference between synchronous and asynchronous code?
Synchronous code
● Executes line by line, one after another.
● Each task waits for the previous task to finish before running.
● Can block code execution if a task takes time.
Example:
[Link]("Task 1");
[Link]("Task 2");
[Link]("Task 3");
// Output: Task 1, Task 2, Task 3 (in order)
Asynchronous code
● Executes tasks independently, without waiting for previous tasks
to finish.
● Allows other code to run while waiting for long-running tasks
(like fetching data or timers).
Example:
[Link]("Task 1");
setTimeout(() => {
[Link]("Task 2");
}, 2000);
[Link]("Task 3");
// Output: Task 1, Task 3, Task 2
19. What is setTimeout?
setTimeout() runs a function after a specific time (in milliseconds).
Example:
setTimeout(() => {
[Link]("Hello Sruti");
}, 2000);
20. What are promises in JavaScript?
A Promise is an object that represents the eventual completion (or
failure) of an asynchronous operation.
A Promise has 3 states:
1. Pending → The initial state; the operation is not yet completed.
2. Fulfilled (Resolved) → The operation completed successfully, and
a value(data) is available.
3. Rejected → The operation failed, and an error/reason is
available.
21. What is async/await?
async/await is a simpler way to handle promises.
The async keyword is used before a function declaration to make it
return a Promise.
● Async keyword will be used before the function.
● Async will make the function asynchronous.
● Async functions will always return a promise.
The await keyword is used inside an async function to wait for a
Promise to resolve before continuing execution.
22. What is the fetch API?
The Fetch API is used to make HTTP requests (GET, POST, PUT, DELETE,
etc.) to a server from JavaScript.
It always returns a Promise, which resolves to the response object.
Example of fetch, async and await:
async function getData() {
const response = await fetch("[Link]
const data = await [Link]();
[Link](data);
}
getData();
23. What is JSON?
JSON (JavaScript Object Notation) is a data format used to store and
exchange data between client and server.
{ "name": "Sruti", "age": 21 }
JSON Methods
1. [Link]()
Converts JavaScript data into JSON format.
let jsonData =
'{"emp":[{"pname":"watch","prodPrice":"3000"},{"pname":"phone","prodPr
ice":"15000"}]}';
let parsedData = [Link](jsonData);
[Link](parsedData);
2. [Link]()
Converts JSON data into JS format.
let obj = {
emp: [
{ pname: "watch", prodPrice: "3000" },
{ pname: "phone", prodPrice: "15000" },
],
};
let jsonData = [Link](obj);
24. What is the use of typeof operator?
typeof operator is used to check the data type of a variable.
25. What is an object in JavaScript? How do you create objects?
An object stores data in key–value pairs.
26. Explain map(), filter(), reduce()?
map() - It is an array method which accepts a callback function. It
iterates over the array and returns a new array with the updated
element.
filter() - It is an array method which iterates over the array and
filters the array based on the condition and returns a new array with
the filtered data.
reduce () - It is an array method used to iterate over the array and
convert the array elements into a single value.
27. Difference between [Link]() and [Link]()
[Link]
Prevents adding or deleting properties but allows updating existing
ones.
const person = { name: "Alice", age: 30 };
[Link](person);
[Link] = 31; // Allowed
[Link] = "female"; // Not allowed
delete [Link]; // Not allowed
[Link]
Prevents adding, deleting, or updating properties.
const car = { brand: "Toyota", model: "Camry" };
[Link](car);
[Link] = "Corolla"; // Not allowed
[Link] = 2020; // Not allowed
delete [Link]; // Not allowed
28. What is destructuring?
Destructuring is a process of extracting data from an array or object and storing it into
variables.
1. For arrays: We can use any variable names.
2. For objects: We must use the exact key name (case-sensitive).
// Destructuring in array
const colors = ["red", "green", "blue"];
const [first, second, third] = colors;
[Link](first); // "red"
[Link](second); // "green"
[Link](third); // "blue"
// Destructuring in object
const user = { name: "Kartik", age: 21, city: "Kolkata" };
const { name, age, city } = user;
[Link](name); // "Kartik"
[Link](age); // 21
[Link](city); // "Kolkata"