Describe HTML layout structure.
Every web page has different components to display the intended content and a specific
UI. But still, there are few things which are templated and are globally accepted way to
structure the web page, such as:
● <header>: Stores the starting information about the web page.
● <footer>: Represents the last section of the page.
● <nav>: The navigation menu of the HTML page.
● <article>: It is a set of information.
● <section>: It is used inside the article block to define the basic structure of a page.
● <aside>: Sidebar content of the page.
In how many ways can we specify the CSS styles for the HTML element?
There are three ways in which we can specify the styles for HTML elements:
● Inline: Here we use the ‘style’ attribute inside the HTML element.
● Internal: Here we use the <style> tag inside the <head> tag. To apply the style we
bind the elements using ‘id’ or ‘class’ attributes.
● External: Here we use the <link> tag inside <head> tag to reference the CSS file
into our HTML code. Again the binding between elements and styles is done using
‘id’ or ‘class’ attributes.
What is the role of the alt attribute in the <img> tag?
Answer: The alt attribute provides alternative text for an image. This text is displayed if
the image cannot be loaded and is also read by screen readers for accessibility purposes.
Additionally, the alt attribute helps search engines understand the content of the image,
contributing to SEO.
What are semantic HTML elements and why are they
important?
Answer: Semantic HTML elements clearly describe their meaning in a human- and
machine-readable way. Examples include <article>, <aside>, <details>,
<figcaption>, <figure>, <footer>, <header>, and <section>. These elements
improve the accessibility and SEO of a webpage, as search engines and screen readers can
better understand the structure and content of the page.
How do you center a div element in CSS?
.div { width: 50%; margin: 0 auto; }
.container { display: flex; justify-content: center; align-items: center; height: 100vh; }
What is the difference between id and class selectors in
CSS?
Answer:
● id Selector: The id selector targets a unique element on a webpage. It is denoted
by # followed by the ID value (e.g., #header). IDs must be unique within a
document.
● class Selector: The class selector targets one or more elements that share the
same class. It is denoted by . followed by the class name (e.g., .button). Multiple
elements can have the same class.
How do you handle errors in JavaScript during interviews?
try {
// Code that may throw an error
} catch (error) {
// Handle the error console.error(error.message);
}
How do you concatenate two arrays in JavaScript?
const arr1 = [1, 2];
const arr2 = [3, 4];
const result = arr1.concat(arr2);
console.log(result);
How do media queries work in CSS?
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}
What is the difference between absolute, fixed, and
sticky positioning?
● absolute: positioned to nearest ancestor with relative, absolute, or fixed.
● fixed: positioned relative to the viewport, stays fixed on scroll.
● sticky: acts like relative until a threshold is met, then becomes fixedWhat is
the difference between absolute, fixed, and sticky positioning?
absolute: positioned to nearest ancestor with relative, absolute, or fixed.
fixed: positioned relative to the viewport, stays fixed on scroll.
sticky: acts like relative until a threshold is met, then becomes fixed
What is the difference between var, let, and const?
● var: function-scoped, hoisted (can be redeclared)
● let: block-scoped, not hoisted to the top like var
● const: block-scoped, cannot be reassigned
What’s the difference between min-width and max-
width in CSS?
● min-width: sets the minimum width
● max-width: sets the maximum width
What is a z-index and how does it work?
Higher z-index appears on top
● Works only on positioned elements (relative, absolute, etc.)
cssCopyEdit.modal {
position: absolute;
z-index: 9999;
}
How can you make a div a perfect circle using CSS?
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
What are the differences between inline, internal, and
external CSS?
● Inline: inside style attribute (highest specificity)
● Internal: inside <style> tag in <head>
● External: linked .css file (recommended for large apps)
What are some new form input types in HTML5?
● date, color, range, email, tel, url, number
