Top 15 Frontend Development Interview Questions & Answers

Frontend development is a crucial skill for modern web applications. In this guide, we’ll cover 50 essential interview questions along with answers, code examples, and explanations to help you prepare!

---

📌 HTML Questions & Answers

1. What is the difference between HTML and HTML5?

Answer: HTML5 introduced new features such as:

• Semantic elements (<header>, <footer>).
• Native multimedia support (<audio>, <video>).
• Improved forms (<input type="date">).

🔹 Example:

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

---

2. What are semantic HTML elements?

Answer:
Semantic elements describe their meaning, like <article>, <nav>, and <section>.

🔹 Example:

<header>Website Header</header>
<article>Blog Post</article>
<footer>Footer Info</footer>

---

3. What is the difference between <div> and <span>?

Answer:

• <div> is a block-level element.
• <span> is an inline element.

🔹 Example:

<div style="background:lightblue;">Block Element</div>
<span style="color:red;">Inline Element</span>

---

4. What is the purpose of the <meta> tag in HTML?

Answer:
It provides metadata like SEO keywords and viewport settings.

🔹 Example:

<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>

---

📌 CSS Questions & Answers

5. What is the difference between em, rem, px, and % in CSS?

Answer:

• px → Fixed size
• em → Relative to parent
• rem → Relative to root
• % → Relative to container

🔹 Example:

html { font-size: 16px; }
p { font-size: 2rem; } /* 2 * 16px = 32px */

---

6. What is the difference between Flexbox and CSS Grid?

Answer:

• Flexbox → 1D layout (row or column).
• Grid → 2D layout (rows & columns).

🔹 Example (Flexbox):

.container {
    display: flex;
    justify-content: center;
  }

---

7. What is the z-index property in CSS?

Answer:
z-index controls stacking order of elements.

🔹 Example:

.box { position: absolute; z-index: 10; }

---

📌 JavaScript Questions & Answers

8. What is the difference between == and === in JavaScript?

Answer:

• == → Compares values only.
• === → Compares values & types.

🔹 Example:

console.log(5 == "5");  // true
console.log(5 === "5"); // false

---

9. What is an event in JavaScript?

Answer:
An event is an action like click, hover, or keypress.

🔹 Example:

document.getElementById("btn").addEventListener("click", function() {

    alert("Button Clicked!");

  });

---

10. What is the event loop in JavaScript?

Answer:
The event loop allows JavaScript to handle asynchronous operations.

🔹 Example:

console.log("Start");
setTimeout(() => console.log("Delayed"), 2000);
console.log("End");

✅ Outputs:

Start  
End  
Delayed  

---

📌 React Questions & Answers

11. What is JSX in React?

Answer:
JSX allows writing HTML inside JavaScript.

🔹 Example:

const element = <h1>Hello, JSX!</h1>;

---

12. What is the difference between props and state in React?

Answer:

• Props → Data passed from parent to child.
• State → Component-specific data that can change.

🔹 Example (Props):

function Welcome(props) {
    return <h1>Hello, {props.name}!</h1>;
  }

---

13. What is the useState hook?

Answer:
useState is used to manage state in functional components.

🔹 Example:

import { useState } from "react";
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

---

📌 Next.js Questions & Answers

14. What is Server-Side Rendering (SSR) in Next.js?

Answer:
SSR renders the page on the server before sending HTML to the client.

🔹 Example:

export async function getServerSideProps() {
    const res = await fetch("https://api.example.com/data");
    const data = await res.json();
    return { props: { data } };
  }

---

15. How does Next.js handle routing?

Answer:
Next.js uses file-based routing, meaning files inside pages/ automatically become routes.

🔹 Example:

export default function About() {
    return <h1>About Page</h1>;
  }

✅ Accessible at /about.