Technical Interview Questions & Answers
This document contains important technical interview questions and answers related
to HTML, CSS, JavaScript, Data Structures, and Object-Oriented Programming
(OOPs) in JavaScript. It is designed to help candidates prepare for frontend
development roles.
HTML
1. What are HTML5 semantic elements, and why are they important?
Answer: Semantic elements like <article>, <section>, and <nav> provide meaning to web content, improving
accessibility and SEO by helping search engines and screen readers understand the structure.
2. How does the browser render an HTML page?
Answer: The browser parses the HTML file, constructs a DOM (Document Object Model), downloads and
applies CSS to create the CSSOM (CSS Object Model), and then renders the final page on screen.
3. What is the difference between block, inline, and inline-block elements?
Answer: - Block: Takes full width and starts on a new line (e.g., <div>, <p>).
- Inline: Takes only as much width as needed, does not start on a new line (e.g., <span>, <a>).
- Inline-block: Behaves like inline but allows setting width/height.
4. What are 'meta' tags in HTML?
Answer: Meta tags provide metadata such as character encoding, viewport settings for responsiveness, and
SEO-related information. Example:
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
5. What is lazy loading in HTML?
Answer: Lazy loading defers the loading of images/videos until they are needed, improving performance.
Example:
<img src='image.jpg' loading='lazy' alt='Lazy Load Image'>
CSS
1. What is the difference between relative, absolute, and fixed positioning?
Answer: - Relative: Positioned relative to its normal position.
- Absolute: Positioned relative to the nearest positioned (non-static) ancestor.
- Fixed: Positioned relative to the viewport and does not move when scrolling.
2. What is the difference between Flexbox and Grid in CSS?
Answer: - Flexbox: One-dimensional layout (row or column-based).
- Grid: Two-dimensional layout (rows and columns).
3. What is the difference between 'em', 'rem', and 'vh/vw' in CSS?
Answer: - em: Relative to the parent element's font size.
- rem: Relative to the root (HTML) font size.
- vh/vw: Relative to the viewport height/width.
4. What are CSS transitions and animations?
Answer: - Transitions: Smooth changes between states (e.g., hover effects). Example:
button { transition: background-color 0.5s ease; }
- Animations: More complex movement with keyframes. Example:
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
5. How does z-index work in CSS?
Answer: z-index controls the stacking order of elements. Higher values appear in front. Only works on
positioned elements (relative, absolute, fixed).
JavaScript
1. What is the difference between 'null' and 'undefined' in JavaScript?
Answer: - null: Assigned value representing 'no value'.
- undefined: A variable declared but not assigned a value.
2. What are promises in JavaScript?
Answer: Promises handle asynchronous operations. Example:
fetch('api/data').then(response => response.json()).then(data => console.log(data));
3. What is the event loop in JavaScript?
Answer: The event loop allows JavaScript to handle asynchronous tasks by pushing completed tasks from
the callback queue to the call stack.
4. What is the difference between '==' and '===' in JavaScript?
Answer: - '==' checks value equality with type coercion.
- '===' checks both value and type without conversion.
5. What is 'debouncing' in JavaScript?
Answer: Debouncing ensures a function executes only after a delay from the last event trigger, useful for
search bars and resize events. Example:
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}
Data Structures
1. What are the differences between an array and a linked list?
Answer: - Array: Fixed size, fast random access (O(1)), slow insertions/deletions.
- Linked List: Dynamic size, slow random access (O(n)), fast insertions/deletions.
2. What is a hash table and how does it work?
Answer: A hash table stores key-value pairs using a hash function for quick lookups. It handles collisions
using chaining or open addressing.
3. What is a stack and how is it used?
Answer: A stack is a LIFO (Last-In, First-Out) data structure used in recursion, function calls, and browser
history management.
4. What is the difference between BFS and DFS?
Answer: - BFS (Breadth-First Search): Explores all neighbors first (queue-based).
- DFS (Depth-First Search): Explores deep paths first (stack-based).
5. What is Big O notation and why is it important?
Answer: Big O describes an algorithm's worst-case performance, helping to analyze efficiency.
OOPs in JavaScript
1. What are the four principles of OOP?
Answer: 1. Encapsulation: Hiding data inside objects.
2. Abstraction: Hiding complex logic.
3. Inheritance: Extending functionality.
4. Polymorphism: Multiple methods with the same name.
2. What is prototypal inheritance in JavaScript?
Answer: Objects inherit properties from their prototype chain instead of traditional class-based inheritance.
3. How do classes work in JavaScript?
Answer: Introduced in ES6, classes are syntactic sugar over prototypal inheritance. Example:
class Person {
constructor(name) { this.name = name; }
greet() { console.log(`Hello, ${this.name}`); }
}
4. What is the 'this' keyword in JavaScript?
Answer: 'this' refers to the object calling the function, depending on execution context.
5. How do you create a private variable in JavaScript?
Answer: Using closures or the '#' symbol:
class Example { #privateVar = 42; getVar() { return this.#privateVar; } }
