HTML

​
1. Semantic Tags
Q1: What are semantic HTML tags?​
A: Semantic tags are HTML elements that clearly describe their meaning to both the browser and developers.
Examples include <header>, <article>, <section>, and <footer>. They help improve accessibility,
SEO, and code readability by defining the purpose of content rather than just its appearance.

Q2: Can you give examples of semantic and non-semantic tags?​

A:

●​ Semantic: <main>, <nav>, <aside>, <figure>, <figcaption>​

●​ Non-semantic: <div>, <span>​

Semantic tags tell you what content they contain, while non-semantic tags don’t.​

Q3: Why are semantic tags important for SEO?​

A: Search engines use semantic HTML to better understand a page’s structure and content. For example,
using <article> signals a self-contained piece of information, and <header> marks introductory content.
This improves how your page is indexed and can help with ranking.

Q4: What is the difference between <section> and <article>?​

A:

●​ <section> groups related content under a common theme.​

●​ <article> is for standalone content that could be reused or shared independently, like a blog post or
news article.​
An article can be inside a section, and sections can contain multiple articles.​

2. Attributes
Q5: What are HTML attributes?​
A: Attributes provide additional information about an HTML element. They are always written in the opening
tag, usually in a name="value" format. For example:

<a href="[Link]

Here, href is an attribute that defines the link’s destination.

Q6: What is the difference between global and specific attributes?​

A:

●​ Global attributes apply to all HTML elements, such as id, class, style, and title.​

●​ Specific attributes only work with certain elements, such as src for <img> or colspan for <td>.​

Q7: What does the alt attribute in <img> do?​

A: The alt attribute provides alternative text for an image. It’s shown when the image can’t load and is used
by screen readers for accessibility. Example:

<img src="[Link]" alt="Company logo">

Q8: What’s the difference between id and class attributes?​

A:

●​ id: Unique identifier for a single element.​

●​ class: Can be applied to multiple elements to group them together for styling or scripting.​
Example:​

<p id="intro">Hello</p>
<p class="highlight">Text</p>

3. HTML Elements
Q9: What’s the difference between block-level and inline elements?​
A:
 ●​ Block-level elements (e.g., <div>, <p>, <section>) start on a new line and take up the full width
available.​

●​ Inline elements (e.g., <span>, <a>, <strong>) stay in the same line and only take as much width as
needed.​

Q10: What is the difference between <div> and <span>?​

A: <div> is a block-level container used to group larger sections of content. <span> is an inline container
used for styling or grouping text inside a block without breaking the flow.

Q11: What is the difference between empty and non-empty elements?​

A:

●​ Empty elements have no closing tag and no inner content (e.g., <br>, <img>).​

●​ Non-empty elements have an opening tag, content, and a closing tag (e.g., <p>Text</p>).​

Q12: What are self-closing tags in HTML?​

A: Self-closing tags don’t require a separate closing tag. In HTML5, you can simply write <img
src="[Link]" alt="...">. In XHTML, you’d write <img src="[Link]" alt="..." />.

4. Forms and Inputs

Q13: What is the purpose of the <form> element?​
A: The <form> element is used to collect user input and send it to a server for processing. It can contain input
fields, text areas, checkboxes, radio buttons, and submit buttons.

Q14: What’s the difference between GET and POST methods in forms?​
A:

●​ GET: Sends form data in the URL. Best for simple, non-sensitive queries.​

●​ POST: Sends form data in the request body. Better for sensitive or large amounts of data.​
Q15: What is the difference between <input type="radio"> and <input type="checkbox">?​
A:

●​ Radio buttons allow one selection from a group (must share the same name).​

●​ Checkboxes allow multiple selections from a group.​

Example:​

<input type="radio" name="gender" value="male">

<input type="checkbox" name="hobby" value="reading">

Q16: What does the required attribute do in form inputs?​

A: It makes the input field mandatory before form submission. The browser will prevent form submission if the
required field is empty.​
Example:

<input type="email" required>

5. Media
Q17: How do you embed an image in HTML?​
A: Use the <img> tag with src and alt attributes. Example:

<img src="[Link]" alt="A beautiful sunset">

Q18: What’s the difference between <audio> and <video> tags?​

A:

●​ <audio> is used for embedding sound files.​

●​ <video> is used for embedding video files.​

Both support controls like play, pause, and volume.​

Q19: How do you make a video play automatically when the page loads?​
A: Use the autoplay attribute in the <video> tag. Example:

<video src="movie.mp4" autoplay muted></video>

Note: Most browsers require muted with autoplay for user experience reasons.

Q20: What is the purpose of the <figure> and <figcaption> tags?​

A: <figure> is used to group media content like images or diagrams with their caption. <figcaption>
provides the caption text.​
Example:

<figure>
<img src="[Link]" alt="Sales chart">
<figcaption>Monthly sales performance</figcaption>
</figure>

​
CSS

​
​
1. Selectors
Q1: What are CSS selectors?​
A: CSS selectors are patterns used to target HTML elements so you can apply styles to them. Examples
include element selectors (p), class selectors (.container), ID selectors (#header), and attribute selectors
(input[type="text"]).

Q2: What is the difference between a class selector and an ID selector?​

A:

●​ Class selector (.classname): Can be used on multiple elements.​

●​ ID selector (#idname): Should be unique and used only once per page.​
Example:​

.highlight { color: red; }

#main-title { font-size: 24px; }

Q3: What are pseudo-classes and pseudo-elements?​

A:
 ●​ Pseudo-classes define the state of an element, like :hover, :focus, or :nth-child(2).​

●​ Pseudo-elements style specific parts of an element, like ::before and ::after.​

Example:​

a:hover { color: blue; }

p::first-letter { font-size: 2em; }

2. Box Model
Q4: What is the CSS box model?​
A: The box model describes how every element in a webpage is treated as a rectangular box with 4 parts:

1.​ Content (text, images)​

2.​ Padding (space between content and border)​

3.​ Border (edge of the element)​

4.​ Margin (space outside the element)​

Q5: What is the difference between inline, block, and inline-block elements in terms of the box
model?​
A:

●​ Block: Takes full width, starts on a new line, respects all box model properties.​

●​ Inline: Stays in line, only respects horizontal padding and margin, not height.​

●​ Inline-block: Behaves like inline but respects all box model properties.​

Q6: What does box-sizing: border-box do?​

A: It changes how the total width and height of an element are calculated. With border-box, padding and
borders are included inside the set width/height, making layouts easier to manage.

3. Positioning and Layout

Q7: What are the different CSS position values?​
A:

●​ static (default, no positioning)​

●​ relative (positioned relative to itself)​

●​ absolute (positioned relative to nearest positioned ancestor)​

●​ fixed (relative to viewport)​

●​ sticky (switches between relative and fixed based on scroll)​

Q8: What’s the difference between absolute and fixed positioning?​

A:

●​ Absolute: Moves relative to the nearest ancestor with a position other than static.​

●​ Fixed: Moves relative to the browser window and stays in place even when scrolling.​

Q9: What is the difference between Flexbox and CSS Grid?​

A:

●​ Flexbox: Best for one-dimensional layouts (rows or columns).​

●​ Grid: Best for two-dimensional layouts (rows and columns together).​

Flexbox is simpler for navigation bars, while Grid is better for full-page layouts.​

4. Responsive Design
Q10: What is responsive design in CSS?​
A: Responsive design ensures a webpage adapts to different screen sizes and devices. It’s achieved using
flexible layouts, relative units, and media queries.

Q11: What is a media query?​

A: A media query applies CSS rules only when certain conditions are met, such as screen width. Example:

@media (max-width: 768px) {

body { font-size: 14px; }
}

Q12: What is the difference between em, rem, %, and px units?​

A:

●​ px: Fixed size, doesn’t scale.​

●​ %: Relative to parent element’s size.​

●​ em: Relative to the font size of the element.​

●​ rem: Relative to the root (html) font size.​

5. Styling
Q13: What is the difference between inline, internal, and external CSS?​
A:

●​ Inline CSS: Inside an element’s style attribute.​

●​ Internal CSS: Inside a <style> tag in the HTML head.​

●​ External CSS: In a separate .css file linked with <link>.​

Q14: What is the difference between relative, absolute, and fixed units for styling?​
A:

●​ Relative units (em, %, rem): Scale based on context or root.​

●​ Absolute units (px, cm, in): Fixed and do not scale with the page.​

Q15: What is the difference between inline styles and using CSS classes for styling?​
A:

●​ Inline styles are applied directly to an element and override most other styles.​

●​ CSS classes are reusable and separate styling from structure, making code cleaner.
 JS

​
1. DOM Manipulation
Q1: What is the DOM in JavaScript?​
A: The DOM (Document Object Model) is a tree-like representation of an HTML document. It allows
JavaScript to access and manipulate the structure, style, and content of a webpage.

Q2: How do you select an element in the DOM?​

A:

●​ [Link]("id") → Selects by ID​

●​ [Link](".class") → Selects first match​

●​ [Link]("p") → Selects all matching elements​

Q3: How do you change the text of an element using JavaScript?​

A:

[Link]("title").textContent = "New Title";

textContent changes the text, while innerHTML can also set HTML markup.

Q4: How do you add a new element to the DOM?​

A:

let newDiv = [Link]("div");

[Link] = "Hello World";
[Link](newDiv);

createElement() creates it, appendChild() adds it to the page.

Q5: How do you attach an event listener to an element?​

A:
[Link]("btn").addEventListener("click", () => {
alert("Button clicked!");
});

addEventListener is preferred over inline event attributes for cleaner code.

2. Control Flow
Q6: What are the main types of control flow in JavaScript?​
A: Conditional statements (if, else if, else, switch), loops (for, while, do...while), and error
handling (try...catch).

Q7: What’s the difference between if and switch statements?​

A:

●​ if: Good for multiple unrelated conditions.​

●​ switch: Better for checking one value against multiple possible matches.​

Q8: What is the difference between for...of and for...in loops?​

A:

●​ for...of: Loops over iterable values (arrays, strings).​

●​ for...in: Loops over object property names.​

Q9: How do you exit a loop early?​

A: Use break to stop the loop immediately, and continue to skip the current iteration but keep looping.​
Example:

for (let i = 0; i < 5; i++) {

if (i === 3) break;
}

Q10: How does try...catch work in JavaScript?​

A: It’s used to handle errors without stopping script execution.
try {
let result = riskyFunction();
} catch (error) {
[Link]("Error:", [Link]);
}

3. ES6 Features
Q11: What are let and const in JavaScript?​
A:

●​ let: Block-scoped, can be reassigned.​

●​ const: Block-scoped, cannot be reassigned (but objects/arrays can still be modified).​

Q12: What are template literals?​

A: Strings written with backticks (`) that allow embedded expressions and multi-line text.

let name = "John";

[Link](`Hello, ${name}!`);

Q13: What is destructuring in JavaScript?​

A: A syntax to unpack values from arrays or properties from objects.

const [a, b] = [1, 2];

const { name, age } = { name: "Sara", age: 25 };

Q14: What are default parameters in functions?​

A: They allow a function to use default values if no arguments are provided.

function greet(name = "Guest") {

[Link](`Hello, ${name}`);
}

Q15: What are arrow functions?​

A: Shorter function syntax with lexical this binding.
const add = (a, b) => a + b;

Q16: What are JavaScript modules?​

A: ES6 introduced export and import for modular code.

// [Link]
export const name = "John";
// [Link]
import { name } from "./[Link]";

Q17: What is the spread operator (...) used for?​

A: Expands arrays/objects into individual elements or properties.

let arr1 = [1, 2];

let arr2 = [...arr1, 3, 4];

Q18: What is the difference between map() and forEach()?​

A:

●​ map(): Returns a new array with transformed elements.​

●​ forEach(): Executes a function for each element but returns undefined.​

4. APIs
Q19: What is an API in JavaScript?​
A: An API (Application Programming Interface) is a set of methods and properties provided by the browser or
other services that JavaScript can use to interact with data, hardware, or external systems.

Q20: What’s the difference between a REST API and a Web API?​
A:

●​ REST API: Follows REST principles for HTTP communication (GET, POST, etc.).​

●​ Web API: General term for APIs accessible over the web, not always REST-based.​
Q21: How do you make a GET request using fetch()?​
A:

fetch("[Link]
.then(response => [Link]())
.then(data => [Link](data))
.catch(error => [Link](error));

Q22: How do you send data with a POST request using fetch()?​
A:

fetch("[Link] {
method: "POST",
headers: { "Content-Type": "application/json" },
body: [Link]({ name: "John" })
});

Q23: What is the difference between XMLHttpRequest and fetch()?​

A:

●​ fetch() is modern, promise-based, and cleaner.​

●​ XMLHttpRequest is older, uses callbacks, and requires more boilerplate.​

Q24: How does the async/await syntax work with APIs?​

A:

async function getData() {

try {
let res = await fetch("[Link]
let data = await [Link]();
[Link](data);
} catch (err) {
[Link](err);
}
}

It makes asynchronous code look synchronous.

Q25: What is JSON and how is it used in APIs?​
A: JSON (JavaScript Object Notation) is a lightweight data format used for storing and exchanging data
between a server and a client. APIs often send and receive data in JSON format.