Part 1: HTML
Topic 1: Semantic Tags
Q1: What are semantic tags in HTML?
A:Semantic tags in HTML are tags that give meaningto the content inside them. Instead of just
defining structure, they describe the type of content they contain. For example,<header>,<footer>,
, and<section>are
<article>
semantic tags that helpmake the content of a webpage more
understandable to both developers and browsers.
Example:
<header>
<h1>Welcome to My Website</h1>
</header>
Q2: What is the difference between
<div>and
<section>
?
A:The<div>tag is a non-semantic tag used as a containerfor content. It has no meaning by itself and
is typically used for layout purposes. The<section>tag is a semantic element used to define a section
of content, usually with a heading. It's meant to group related content.
Example:
<div> <!-- A container for general content -->
<h2>Article 1</h2>
<p>This is the content of the article.</p>
</div>
<section> <!-- A section with a specific meaning -->
<h2>Introduction</h2>
<p>This section contains the introduction.</p>
</section>
Q3: Why should you use semantic tags in HTML?
A:Using semantic tags improves accessibility, SEO(search engine optimization), and code readability.
These tags help screen readers and search engines understand the structure and meaning of the content,
making your website more user-friendly and easier to find online.
Q4: What is the
<article>tag used for?
A:The<article>tag is used to represent self-containedcontent that could be distributed or reused
independently. It is typically used for blog posts, news articles, or any piece of content that could stand
alone.
Example:
<article>
<h2>News Article</h2>
<p>This is an example of a news article.</p>
</article>
Topic 2: Attributes
Q5: What is the
altattribute in an
<img>tag?
A:Thealtattribute provides alternative text foran image if the image fails to load. It is also important
for accessibility, as it helps screen readers describe the image to users with visual impairments.
Example:
<img src="logo.png" alt="Website Logo">
Q6: What is the
hrefattribute used for in the
<a>tag?
A:Thehrefattribute specifies the URL of the pagethe link points to. It is used inside an anchor (<a>)
tag to define the destination of the hyperlink.
Example:
<a href="https://www.example.com">
Click here to visit Example
</a>
Q7: What is the
idattribute in HTML?
A:Theidattribute is used to give a unique identifierto an element on a webpage. It allows you to
easily reference that element in JavaScript or CSS.
Example:
<div id="main-content">
<p>This is the main content section.</p>
</div>
Q8: What is the
classattribute in HTML?
A:Theclassattribute is used to assign one or moreclass names to an element. These class names can
be referenced in CSS to style the elements or in JavaScript to manipulate them.
Example:
<p class="highlight">This text is highlighted.</p>
Topic 3: HTML Elements
Q9: What is the purpose of the
<head>tag in HTML?
A:The<head>tag contains metadata about the webpage,such as the title, links to stylesheets, and
scripts. It does not display content directly on the page.
Example:
<head>
<title>My Website</title>
</head>
Q10: What is the
<body>tag used for?
A:The<body>tag contains all the visible contentof a webpage, such as text, images, and other media.
Everything you see on the page is inside the<body>tag.
Example:
<body>
<h1>Welcome to My Website</h1>
<p>This is some content.</p>
</body>
Q11: What is the
<form>element used for?
A:The<form>element is used to create interactiveforms that allow users to input data. It typically
includes various input elements like text fields, buttons, and checkboxes.
Example:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
Q12: What is the difference between
<ol>and
<ul>
?
A:<ol>creates an ordered list, where the list itemsare numbered, while<ul>creates an unordered list,
where the list items are marked with bullets.
Example:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
Topic 4: Forms and Inputs
Q13: What is the purpose of the
<input>element ina form?
A:The<input>element is used to create interactivecontrols in a form, such as text fields,
checkboxes, radio buttons, and submit buttons.
Example:
<input type="text" placeholder="Enter your name">
<input type="submit" value="Submit">
Q14: What is the
placeholderattribute used for inan
<input>tag?
A:Theplaceholderattribute provides a short hintthat describes the expected value of an input field.
This hint appears inside the input field when it is empty.
Example:
<input type="email" placeholder="Enter your email">
Q15: What are
<select>and
<option>used for in HTML?
A:The<select>tag creates a dropdown menu, and the<option>tag is used to define the individual
items in the dropdown.
Example:
<select>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
Q16: How can you make a form field required in HTML?
A:Therequiredattribute makes a form field mandatory,meaning the user must fill it out before
submitting the form.
Example:
<form>
<input type="text" name="name" required>
<input type="submit" value="Submit">
</form>
Topic 5: Media
Q17: How can you embed a video in an HTML page?
A:You can use the<video>tag to embed a video ona webpage. You can also provide multiple formats
for compatibility across different browsers.
Example:
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Q18: How can you embed an audio file in HTML?
A:You can use the<audio>tag to embed an audio file.Thecontrolsattribute adds basic audio
controls such as play, pause, and volume.
Example:
<audio controls>
<source src="song.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
Q19: What is the
autoplayattribute used for in the
<audio>and
<video>tags?
A:Theautoplayattribute allows the audio or videoto start playing automatically as soon as it is
loaded.
Example:
<video autoplay>
<source src="movie.mp4" type="video/mp4">
</video>
Q20: What is the
loopattribute used for in the
<audio>and
<video>tags?
A:Theloopattribute makes the audio or video playrepeatedly, starting over as soon as it finishes.
Example:
<video loop>
<source src="movie.mp4" type="video/mp4">
</video>
Part 2: CSS
Topic 1: Selectors
Q1: What is a CSS selector?
A:A CSS selector is used to target HTML elementsthat you want to style. There are different types of
selectors like element selectors, class selectors, and ID selectors.
Example:
/* Targeting a specific element */
h1 {
color: blue;
}
/* Targeting a class */
.highlight {
background-color: yellow;
}
/* Targeting an ID */
#main-content {
font-size: 20px;
}
Q2: What is the difference between class selectors and ID selectors in CSS?
.)can be applied to multipleelements, while ID selectors (using#) are
A:Class selectors (using
unique and should only be applied to one element on the page.
Example:
/* Class selector */
.button {
background-color: blue;
}
/* ID selector */
#submit-button {
color: white;
}
Topic 2: Box Model
Q3: What is the CSS box model?
A:The CSS box model defines how elements are structuredin terms of content, padding, border, and
margin.
● Content:The actual content of the element.
● Padding:Space around the content inside the element.
● Border:The border surrounding the padding.
● Margin:The space outside the border, creating distance from other elements.
Q4: What is the difference between
paddingand
margin
?
A:Padding is the space inside an element, betweenthe content and its border. Margin is the space
outside the element, between the border and other elements.
Example:
/* Padding adds space inside the box */
.element {
padding: 20px;
}
/* Margin adds space outside the box */
.element {
margin: 10px;
}
Topic 3: Positioning
Q5: What are the different types of positioning in CSS?
A:There are five types of positioning in CSS:
1. Static:Default positioning, elements are positionedaccording to the normal flow of the
document.
2. Relative:The element is positioned relative to itsnormal position.
3. Absolute:The element is positioned relative to the nearest positioned ancestor.
4. Fixed:The element is positioned relative to the viewportand remains fixed even when the page
is scrolled.
5. Sticky:The element is positioned based on the user'sscroll position. It toggles between relative
and fixed.
Example:
/* Static position (default) */
.element {
position: static;
}
/* Relative position */
.element {
position: relative;
top: 10px;
}
/* Absolute position */
.element {
position: absolute;
top: 20px;
}
Topic 4: Flexbox and Grid
Q6: What is Flexbox in CSS?
A:Flexbox is a layout model that allows you to createflexible and responsive layouts. It enables
alignment, distribution of space, and direction of items inside a container.
Example:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
Q7: What is the CSS Grid system?
A:CSS Grid is a layout system that allows you tocreate two-dimensional layouts, defining rows and
columns. It provides more control over complex layouts compared to Flexbox.
Example:
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 10px;
}
Part 3: JavaScript
Topic 1: DOM Manipulation
Q1: What is the DOM?
A:The DOM (Document Object Model) is an interfacethat allows programming languages like
JavaScript to interact with the content, structure, and style of an HTML document. It represents the
page so that JavaScript can manipulate elements, such as changing text, images, and styles.
Example:
document.getElementById("myElement").innerHTML = "Hello, world!";
Q2: How do you access an HTML element using JavaScript?
A:You can access an HTML element using various methodssuch asgetElementById(),
, orquerySelector().
getElementsByClassName()
Example:
// Access element by ID
let element = document.getElementById("myElement");
// Access element by class name
let items = document.getElementsByClassName("myClass");
// Access the first matching element
let firstItem = document.querySelector(".item");
Q3: How can you change the text content of an HTML element?
A:You can change the text content using theinnerHTMLortextContentproperty.innerHTMLallows
you to change the HTML inside the element, whiletextContentchanges the text.
Example:
document.getElementById("myElement").textContent = "New text content!";
Q4: How do you add an event listener in JavaScript?
A:You can add event listeners to HTML elements usingtheaddEventListener()method, which
listens for specific events likeclick,submit, etc.
Example:
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
Q5: How do you change the style of an element with JavaScript?
A:You can modify the style of an HTML element byaccessing thestyleproperty.
Example:
document.getElementById("myElement").style.color = "red";
Topic 2: Control Flow
Q1: What is an
ifstatement in JavaScript?
A:Anifstatement is used to execute a block of codebased on a condition. If the condition is true, the
code inside theifblock is executed.
Example:
if (age >= 18) {
console.log("You are an adult.");
}
Q2: What is a
switchstatement in JavaScript?
A:Aswitchstatement is used to evaluate an expressionand execute code based on different possible
conditions. It's more efficient than multipleif-elsestatements when dealing with many conditions.
Example:
let day = 3;
switch (day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
case 3:
console.log("Wednesday");
break;
default:
console.log("Invalid day");
}
Q3: What is a
forloop in JavaScript?
A:Aforloop repeats a block of code a certain numberof times. It consists of three parts:
initialization, condition, and increment.
Example:
for (let i = 0; i < 5; i++) {
console.log(i);
}
Q4: What is a
whileloop in JavaScript?
A:Awhileloop repeats a block of code as long asa given condition remains true.
Example:
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
Q5: What is a
do-whileloop in JavaScript?
A:Ado-whileloop is similar to awhileloop, butit ensures the block of code is executed at least
once, even if the condition is false.
Example:
let i = 0;
do {
console.log(i);
i++;
} while (i < 5);
Topic 3: ES6 Features
Q1: What is
letand
constin JavaScript?
A:letandconstare used to declare variables inJavaScript.
● letallows you to change the value of a variable later.
● constis used to declare variables whose values cannotbe reassigned.
Example:
let name = "John"; // Can be reassigned
const pi = 3.14;
// Cannot be reassigned
Q2: What are arrow functions in JavaScript?
A:Arrow functions provide a shorter syntax for writingfunctions. They also have different behavior
when handling this keyword.
Example:
const greet = (name) => {
return "Hello " + name;
};
Q3: What is template literal in JavaScript?
A:Template literals allow you to create strings thatcan include variables or expressions using
backticks (̀). They can also span multiple lines.
Example:
let name = "John";
let message = `Hello, ${name}!`;
console.log(message);
// Output: Hello, John!
Q4: What is destructuring in JavaScript?
A:Destructuring allows you to unpack values fromarrays or objects into separate variables in a more
concise way.
Example:
// Array destructuring
let [first, second] = [1, 2];
// Object destructuring
let person = { name: "John", age: 30 };
let { name, age } = person;
Q5: What is the spread operator in JavaScript?
A:The spread operator (
...
) allows you to unpack elements from an array or properties from an
object.
Example:
let arr = [1, 2, 3];
let newArr = [...arr, 4];
// [1, 2, 3, 4]
Q6: What is the rest parameter in JavaScript?
A:The rest parameter (
...
) allows you to collectmultiple function arguments into an array.
Example:
function sum(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}
Q7: What are default parameters in JavaScript?
A:Default parameters allow you to specify defaultvalues for function parameters if no value is
provided.
Example:
function greet(name = "Guest") {
console.log(`Hello, ${name}!`);
}
Q8: What are modules in JavaScript?
A:Modules allow you to split code into smaller, reusablepieces. You can export functions, objects, or
variables from one file and import them into another.
Example:
// In file math.js
export function add(a, b) {
return a + b;
}
// In another file
import { add } from './math.js';
Topic 4: APIs
Q1: What is an API in JavaScript?
A:An API (Application Programming Interface) is aset of rules and protocols that allow different
software systems to communicate with each other. In JavaScript, APIs allow you to interact with web
services or perform tasks like fetching data from a server.
Example:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
Q2: What is
fetch()in JavaScript?
A:Thefetch()method is used to make network requests,such as getting data from a server. It returns
a promise that resolves to the response of the request.
Example:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
Q3: What is
localStoragein JavaScript?
A:localStorageis a web API that allows you to storekey-value pairs in the browser, which persist
even after the page is refreshed.
Example:
localStorage.setItem('name', 'John');
let name = localStorage.getItem('name');
console.log(name);
// Output: John
Q4: What is
sessionStoragein JavaScript?
A:sessionStorageis similar tolocalStorage, butthe data is only available for the duration of the
page session and is cleared when the tab is closed.
Example:
sessionStorage.setItem('username', 'john123');
Q5: What is a JSON object in JavaScript?
A:JSON (JavaScript Object Notation) is a lightweightdata format used for storing and exchanging
data. It represents data in key-value pairs and is commonly used in APIs.
Example:
let jsonData = '{"name": "John", "age": 30}';
let obj = JSON.parse(jsonData);
// Convert JSON string to object
Q6: What is
XMLHttpRequestin JavaScript?
A:XMLHttpRequestis a JavaScript object used to interactwith servers and retrieve data
asynchronously without refreshing the page. It is an older method for making network requests, but is
still used in many applications.
Example:
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
if (xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send();
Q7: How do you handle errors in API requests?
A:Errors in API requests can be handled using the.catch()method with promises or using
try-catchblocks
in async functions.
Example:
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.log('There was a problem with the fetch
operation:', error));
