Whether you’re preparing for your first frontend developer interview or aiming to sharpen your skills, it’s crucial to know what kinds of questions might come your way. Below, I’ve compiled 20 essential frontend interview questions with answers explained in a simple, approachable way, along with examples to help you fully grasp the concepts.
1. What is the difference between == and === in JavaScript?
Answer: == compares values loosely, meaning it converts the operands to the same type before comparing. ===, on the other hand, compares values strictly, without type conversion. So, === is safer for accurate comparisons.
Example:
console.log(1 == '1'); // true (because '1' is coerced to number)
console.log(1 === '1'); // false (no type conversion, so different types)
2. What is the Document Object Model (DOM)?
Answer: The DOM is an interface that represents the structure of HTML documents. It turns the HTML into a tree structure, where each element is a node that can be manipulated using JavaScript.
Example: Using JavaScript to modify the DOM:
document.getElementById('title').innerText = 'Frontend Guide';
3. What are HTML5 semantic elements and why are they important?
Answer: Semantic elements are HTML tags that clearly describe their meaning to both the browser and the developer. For example, <header>, <footer>, <article>, and <section>.
They improve accessibility and SEO, making it easier for search engines to understand the page structure.
Example:
<header>
<h1>Welcome to My Blog</h1>
</header>
<article>
<p>This is a blog post about frontend development.</p>
</article>
4. What are the differences between var, let, and const in JavaScript?
Answer:
var: Function-scoped and can be redeclared.let: Block-scoped and can be updated but not redeclared.const: Block-scoped, cannot be updated or redeclared.
Example:
var name = "John"; // Function scoped
let age = 25; // Block scoped
const gender = "male"; // Block scoped and constant
5. What is CSS specificity and how does it work?
Answer: CSS specificity determines which styles are applied to an element when there’s a conflict. Specificity is calculated based on the types of selectors: inline styles, IDs, classes, and element types. The more specific the selector, the higher priority it gets.
Example:
/* Specificity: 0, 1, 0 */
#header {
color: red;
}
/* Specificity: 0, 0, 1 */
.header {
color: blue;
}
/* The color red will be applied since ID selectors have higher specificity */
6. What is Flexbox in CSS, and why is it useful?
Answer: Flexbox is a layout module in CSS that provides a more efficient way to align and distribute space among items in a container, even when their size is unknown. It’s especially useful for responsive design.
Example:
.container {
display: flex;
justify-content: space-between;
}
7. Explain the box model in CSS.
Answer: The CSS box model describes how the size of elements is calculated. Each element is considered as a box with four layers: content, padding, border, and margin.
- Content: The actual content of the box (e.g., text, image).
- Padding: Space between content and border.
- Border: A border surrounding the padding.
- Margin: Space outside the border.
Example:
div {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 15px;
}
8. What is the difference between null and undefined in JavaScript?
Answer:
undefined: A variable that has been declared but not assigned a value.null: A value that explicitly represents “no value” or “empty.”
Example:
let a; // undefined
let b = null; // null
9. What is a closure in JavaScript?
Answer: A closure is a function that retains access to its outer scope, even after the outer function has finished executing. This allows the inner function to remember the variables from its surrounding context.
Example:
function outer() {
let count = 0;
return function() {
count++;
return count;
};
}
const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2
10. What are promises in JavaScript?
Answer: A promise is an object that represents the eventual completion (or failure) of an asynchronous operation. It can be in one of three states: pending, fulfilled, or rejected.
Example:
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve('Operation successful');
} else {
reject('Operation failed');
}
});
promise.then((message) => {
console.log(message); // 'Operation successful'
}).catch((error) => {
console.log(error);
});
11. What is event delegation in JavaScript?
Answer: Event delegation is a technique where you add a single event listener to a parent element to manage events on its child elements, which improves performance by reducing the number of event listeners.
Example:
document.querySelector('ul').addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
console.log('List item clicked!');
}
});
12. Explain the concept of hoisting in JavaScript.
Answer: Hoisting is JavaScript’s behavior of moving declarations (functions and variables) to the top of their containing scope before the code is executed. However, only declarations are hoisted, not initializations.
Example:
console.log(x); // undefined (declaration is hoisted)
var x = 5;
13. What is CSS Grid, and when would you use it?
Answer: CSS Grid is a layout system for creating complex, responsive two-dimensional layouts. It’s more flexible than Flexbox when you need to handle both rows and columns.
Example:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
14. Explain the concept of responsive design.
Answer: Responsive design ensures that web pages render well across different screen sizes and devices by using flexible layouts, images, and CSS media queries.
Example:
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
15. What is the difference between block, inline, and inline-block elements in CSS?
Answer:
- Block: Takes up the full width available and starts on a new line.
- Inline: Only takes up as much width as its content and doesn’t start on a new line.
- Inline-block: Like
inline, but allows setting width and height.
16. What is the this keyword in JavaScript?
Answer: In JavaScript, this refers to the object that is executing the current function. Its value depends on the context in which the function is called.
Example:
const person = {
name: 'John',
greet: function() {
console.log(`Hello, ${this.name}`);
}
};
person.greet(); // Hello, John
17. What are pseudo-classes in CSS?
Answer: Pseudo-classes define the special state of an element, such as when it’s being hovered or focused.
Example:
button:hover {
background-color: blue;
}
18. What is the purpose of async and await in JavaScript?
Answer: async and await make it easier to handle promises. async marks a function as asynchronous, and await pauses execution until the promise is resolved.
Example:
async function fetchData() {
let data = await fetch('https://api.example.com');
return data.json();
}
19. What are media queries in CSS?
Answer: Media queries allow you to apply CSS rules based on screen size, resolution, or device type, making your website responsive.
Example:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
20. What is the difference between forEach and map in JavaScript?
Answer:
forEach: Executes a provided function for each array element but doesn’t return a new array.map: Also iterates over each element but returns a new array with transformed elements.
Example:
const arr = [1, 2, 3];
arr.forEach(num => console.log(num * 2)); // No return value
const doubled = arr.map(num => num * 2); // Returns [2, 4, 6]
These 20 frontend interview questions cover a range of fundamental topics. If you’re preparing for a frontend role, mastering these concepts will give you a solid foundation for your next interview. Additionally, if you want to thoroughly prepare before the interview, I recommend reading Cracking the Coding Interview: 189 Programming Questions and Solutions. It has helped many people excel in their coding interviews. Best of luck with your preparation!
