Top 100 Front End Developer Interview Questions and Answers PDF 2025

Front end developers play a crucial role in creating the user-facing side of web applications, responsible for implementing visual designs, ensuring responsive layouts, and delivering seamless user experiences across different devices and browsers.

Given the competitive nature of the tech industry and the technical depth required for front-end positions, thorough interview preparation is essential for landing your dream job.

Interview preparation is very important not only for freshers but also for experienced candidates, so you never miss any opportunity.

Here we have added most asked interview questions and detailed answers tailored for both fresher and experienced candidates.

Front End Developer Interview Questions and Answers for Freshers

Que 1. What is the difference between HTML and HTML5?

Answer:
HTML is the standard markup language used to create web pages, while HTML5 is its latest version with new elements, attributes, and behaviors. Key improvements in HTML5 include:

• Support for audio and video without plugins
• New semantic tags like <article>, <section>, <nav>
• Offline capabilities via applicationCache
• Improved form controls like email, date, range

Que 2. What are semantic HTML elements?

Answer:
Semantic HTML elements clearly describe their meaning to both the browser and developer. Examples include:

• <article> – Independent content block
• <section> – Thematic grouping of content
• <nav> – Navigation links
• <header>, <footer> – Structural page elements

These enhance SEO, readability, and accessibility.

Que 3. What is the Box Model in CSS?

Answer:
The CSS Box Model is a box that wraps around every HTML element. It consists of:

• Content – The text or image inside
• Padding – Clears space around the content
• Border – Surrounds the padding
• Margin – Clears space outside the border

div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

Que 4. What is the difference between == and === in JavaScript?

Answer:

• == performs type coercion (loose comparison)
• === checks both value and type (strict comparison)

5 == "5"   // true
5 === "5"  // false

Use === to avoid unexpected results.

Que 5. How does CSS specificity work?

Answer:
Specificity determines which CSS rule applies when multiple rules match the same element. Priority is:

• Inline styles: 1000
• IDs: 100
• Classes, attributes, pseudo-classes: 10
• Elements and pseudo-elements: 1

Example:

p { color: blue; }              // 1
p.info { color: red; }          // 11
#main p.info { color: green; }  // 111

Que 6. What are pseudo-classes in CSS?

Answer:
Pseudo-classes define special states of elements:

• :hover – When a user hovers over an element
• :focus – When an element gains focus
• :nth-child(n) – Selects specific children

button:hover {
  background-color: green;
}

Que 7. What are media queries in CSS?

Answer:
Media queries allow CSS to adapt based on device characteristics like width and resolution.

@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

They are essential for responsive design.

Que 8. What is the DOM and how is it used in front-end development?

Answer:
The Document Object Model (DOM) is a programming interface for HTML documents. JavaScript uses it to manipulate the structure, content, and style of a webpage.

document.getElementById("title").innerText = "Updated Text";

It allows dynamic updates and interactivity.

Que 9. What is the difference between null and undefined in JavaScript?

Answer:

• undefined: A variable declared but not assigned a value
• null: A variable assigned to represent “no value” intentionally

let x;
console.log(x); // undefined

let y = null;
console.log(y); // null

Que 10. How do you optimize a website for performance?

Answer:
Optimization techniques include:

• Minifying CSS and JavaScript
• Using a Content Delivery Network (CDN)
• Compressing images
• Caching assets
• Lazy loading media
• Reducing HTTP requests

These improve loading speed and user experience.

Que 11. Explain the difference between relative, absolute, and fixed positioning in CSS.

Answer:

• relative: Moves element relative to its normal position
• absolute: Positions element relative to its nearest positioned ancestor
• fixed: Positions element relative to the browser window

.fixed-box {
  position: fixed;
  top: 10px;
  right: 10px;
}

Que 12. What are arrow functions in JavaScript?

Answer:
Arrow functions are a concise way to write functions and do not bind their own this.

const greet = name => `Hello, ${name}`;

Useful for callbacks and short functions.

Que 13. What is event delegation in JavaScript?

Answer:
Event delegation is a technique where a parent element handles events from its children using event.target.

document.getElementById("list").addEventListener("click", function(e) {
  if (e.target.tagName === "LI") {
    console.log("List item clicked:", e.target.textContent);
  }
});

It improves performance and handles dynamic content.

Que 14. How do you handle form validation in JavaScript?

Answer:
You can validate form inputs using both HTML5 attributes and JavaScript logic:

if (!emailInput.value.includes("@")) {
  alert("Please enter a valid email");
}

Also use properties like .checkValidity() and .setCustomValidity().

Que 15. What are promises in JavaScript?

Answer:
A Promise represents an asynchronous operation that can be in one of three states: pending, fulfilled, or rejected.

const promise = new Promise((resolve, reject) => {
  resolve("Success");
});

promise.then(result => console.log(result));

Helps in avoiding callback hell.

Que 16. What are the differences between var, let, and const?

Feature	var	let	const
Scope	Function	Block	Block
Reassign	Yes	Yes	No
Hoisting	Yes	No	No

Use let and const in modern JS to avoid bugs.

Que 17. How does Flexbox work in CSS?

Answer:
Flexbox is a layout system that arranges items in a row or column.

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

It simplifies alignment, spacing, and responsiveness.

Que 18. What is the difference between synchronous and asynchronous JavaScript?

Answer:

• Synchronous: Executes line by line
• Asynchronous: Executes in background and doesn’t block main thread

setTimeout(() => {
  console.log("Async Code");
}, 1000);

console.log("Sync Code");

Output: Sync Code → Async Code

Que 19. What is the role of Webpack in front-end development?

Answer:
Webpack bundles JavaScript and other assets into optimized files. Features include:

• Code splitting
• Tree shaking
• Handling CSS, images, and fonts
• Development server with hot reloading

Useful for managing large front-end projects.

Que 20. What are single-page applications (SPAs) and how are they different from traditional websites?

Answer:
SPAs load one HTML page and dynamically update content via JavaScript. No full page reloads.

Feature	SPA	Traditional Website
Page Reload	No	Yes
Speed	Faster UX	Slower navigation
Tech Stack	React, Angular, Vue	PHP, JSP, static HTML
Data Handling	Uses APIs (AJAX/Fetch)	Server-rendered

SPAs offer a more fluid and app-like experience.

Also Check: Front End Developer Interview Questions for Freshers

Que 21. What is the purpose of the <head> tag in HTML?

Answer: The <head> tag in HTML contains metadata about the document, which isn’t displayed in the browser’s viewport. It includes elements like <title> for the page title (shown in the browser tab), <meta> for encoding, viewport settings, or SEO descriptions, <link> for stylesheets, and <script> for JavaScript. It helps browsers and search engines process the page.

Example:

<head>
    <title>My Page</title>
    <meta charset="UTF-8">
    <meta name="description" content="A simple page">
    <link rel="stylesheet" href="styles.css">
</head>

Que 21. What is the purpose of the <head> tag in HTML?

Answer:
The <head> tag in HTML contains metadata about the document, which isn’t displayed in the browser’s viewport. It includes elements like <title> for the page title (shown in the browser tab), <meta> for encoding, viewport settings, or SEO descriptions, <link> for stylesheets, and <script> for JavaScript. It helps browsers and search engines process the page.

Example:

<head>
    <title>My Page</title>
    <meta charset="UTF-8">
    <meta name="description" content="A simple page">
    <link rel="stylesheet" href="styles.css">
</head>

Que 22. What are inline and block elements in HTML/CSS?

Answer:
Inline elements, like <span>, <a>, or <img>, don’t start on a new line and only take the width they need, allowing elements beside them. Block elements, like <div>, <p>, or <h1>, start on a new line and take full width, creating a block structure. Use CSS display: inline-block for hybrid behavior.

Example:

<p>Block paragraph</p>
<span>Inline</span> <span>Next to it</span>

Que 23. How do you add comments in HTML, CSS, and JavaScript?

Answer:
Comments document code without affecting execution:

• HTML: <!-- Comment -->
• CSS: /* Comment */
• JavaScript: // Single-line or /* Multi-line */

Example:

<!-- HTML comment -->
<style>
    /* CSS comment */
    body { background: white; }
</style>
<script>
    // JS comment
    console.log("Hello");
</script>

Que 24. What is the role of the alt attribute in the <img> tag?

Answer:
The alt attribute provides alternative text for images if they fail to load (e.g., due to network issues) or for screen readers, aiding accessibility and SEO.

Example:

<img src="logo.png" alt="Company Logo">

Que 25. How do you create a hyperlink in HTML?

Answer:
Use the <a> tag with href for the URL. Add target="_blank" for new tabs or title for tooltips.

Example:

<a href="https://example.com" target="_blank" title="Visit Example">Click here</a>

Que 26. What is the difference between ID and class selectors in CSS?

Answer:
ID selectors (#id) target a unique element (one per page) for specific styling. Class selectors (.class) target multiple elements for reusable styles.

Example:

#unique { color: red; }
.common { font-size: 16px; }

<div id="unique">Unique</div>
<div class="common">Shared</div>

Que 27. How do you center an element horizontally in CSS?

Answer:
For block elements, use margin: auto with a set width. For inline-block, use text-align: center on the parent. With Flexbox: justify-content: center.

Example:

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

<div class="container">
    <div>Centered</div>
</div>

Que 28. What is a variable in JavaScript, and how do you declare one?

Answer:
A variable stores changeable data. Declare with var (function-scoped, legacy), let (block-scoped), or const (block-scoped, immutable).

Example:

let score = 10;
const name = "Alice";
score = 20;  // OK
// name = "Bob";  // Error

Que 29. How do you create an array in JavaScript?

Answer:
An array is an ordered list, created with [] or new Array().

Example:

let fruits = ["Apple", "Banana"];
fruits.push("Cherry");
console.log(fruits[0]);  // Apple

Que 30. What is a for loop in JavaScript?

Answer:
A for loop iterates with initialization, condition, and increment.

Example:

for (let i = 0; i < 3; i++) {
    console.log(i);  // 0, 1, 2
}

Que 31. How do you add an event listener in JavaScript?

Answer:
Use addEventListener() to handle events like clicks.

Example:

const button = document.getElementById("btn");
button.addEventListener("click", () => alert("Clicked!"));

Que 32. What is the console in JavaScript, and how do you use it?

Answer:
The console logs data for debugging, accessible in browser dev tools. Use console.log(), console.error(), or console.table().

Example:

console.log("Test");
console.table({name: "Alice", age: 25});

Que 33. How do you select an element by ID in JavaScript?

Answer:
Use document.getElementById("id") for a single element.

Example:

const elem = document.getElementById("header");
elem.style.color = "blue";

Que 34. What is a boolean in programming?

Answer:
A boolean is a true/false value used for conditions.

Example:

let isActive = true;
if (isActive) {
    console.log("On");
}

Que 35. How do you concatenate strings in JavaScript?

Answer:
Use + or template literals (`).

Example:

let name = "Bob";
let greeting = `Hello, ${name}!`;  // Hello, Bob!

Que 36. What is the TYPEOF operator in JavaScript?

Answer:
typeof returns the type of a variable as a string (e.g., “string”, “number”).

Example:

console.log(typeof 42);  // "number"
console.log(typeof null);  // "object" (quirk)

Que 37. How do you create an object in JavaScript?

Answer:
An object is a key-value collection, created with {}.

Example:

let user = {
    name: "Alice",
    age: 25
};
user.age = 26;

Que 38. What is the difference between textContent and innerHTML in JavaScript?

Answer:
textContent gets/sets plain text, ignoring HTML. innerHTML gets/sets HTML, parsing tags.

Example:

elem.textContent = "<b>Bold</b>";  // Shows as text
elem.innerHTML = "<b>Bold</b>";  // Renders bold

Que 39. How do you remove an element from the DOM in JavaScript?

Answer:
Use remove() or parentNode.removeChild().

Example:

const elem = document.getElementById("item");
elem.remove();

Que 40. What is a callback function in JavaScript?

Answer:
A callback is a function passed as an argument, executed later.

Example:

function greet(name, callback) {
    console.log("Hi, " + name);
    callback();
}
greet("Alice", () => console.log("Done"));

Front End Developer Interview Questions and Answers for Experienced

Que 41. What is the Virtual DOM and how does it improve performance?

Answer:
The Virtual DOM is a lightweight copy of the actual DOM used by libraries like React. When a state change occurs, the Virtual DOM is updated first. Then, it compares the new version with the old one using a diffing algorithm and only applies the necessary changes to the real DOM, reducing reflows and repaints, hence improving performance.

Que 42. Explain the difference between call(), apply(), and bind() in JavaScript.

Answer:

• call() invokes a function with a specified this and arguments provided one by one
• apply() is similar to call() but accepts arguments as an array
• bind() returns a new function with bound this, but doesn’t execute it immediately

function greet(msg) {
  console.log(`${msg}, ${this.name}`);
}
const person = { name: "Alice" };
greet.call(person, "Hello");
greet.apply(person, ["Hi"]);
const greetAlice = greet.bind(person, "Hey");
greetAlice();

Que 43. What are closures in JavaScript?

Answer:
A closure is a function that retains access to its lexical scope even when the function is executed outside that scope.

function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(count);
  }
}
const counter = outer();
counter(); // 1
counter(); // 2

Closures are useful for data privacy and functional programming patterns.

Que 44. What is the difference between localStorage, sessionStorage, and cookies?

Feature	localStorage	sessionStorage	cookies
Expiry	Never (until cleared)	On tab close	Manually set
Storage Limit	~5MB	~5MB	~4KB
Sent to Server	No	No	Yes (with requests)

Used for client-side data persistence.

Que 45. What is debouncing and throttling in JavaScript?

Answer:
Both are performance techniques to control the rate of function execution:

• Debouncing: Delays execution until after a pause in events
• Throttling: Ensures a function is called at most once in a fixed time interval

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

Commonly used in scroll, resize, and input events.

Que 46. How does the event loop work in JavaScript?

Answer:
The event loop is responsible for executing code, collecting and processing events, and executing queued sub-tasks.

Execution Flow:

1. Executes synchronous code (call stack)
2. Handles microtasks (Promises)
3. Executes macrotasks (setTimeout, setInterval)

This makes JavaScript non-blocking and single-threaded yet capable of asynchronous behavior.

Que 47. How do CSS Grid and Flexbox differ?

Answer:

• Flexbox: Best for 1D layouts (row or column)
• Grid: Best for 2D layouts (rows and columns)

Feature	Flexbox	Grid
Axis	One-dimensional	Two-dimensional
Alignment	Easier for items	Easier for layout
Media Queries	Often needed	Less needed

Use Grid for page layout and Flexbox for component alignment.

Que 48. What are Higher-Order Components (HOCs) in React?

Answer:
An HOC is a function that takes a component and returns a new component with added behavior.

function withLogging(WrappedComponent) {
  return function(props) {
    console.log('Component rendered');
    return <WrappedComponent {...props} />;
  };
}

Useful for cross-cutting concerns like logging, permissions, or theming.

Que 49. How does Context API differ from Redux?

Answer:

Feature	Context API	Redux
Complexity	Simple	More complex
Use Case	Small to medium apps	Large-scale applications
Boilerplate	Minimal	High
Middleware	Not built-in	Built-in support

Context API is great for basic state sharing; Redux offers advanced features like time travel debugging and middleware.

Que 50. How does lazy loading work in front-end applications?

Answer:
Lazy loading defers the loading of non-critical resources until needed, which speeds up initial page load.

Examples:

• Images: <img loading="lazy" />
• React Components: React.lazy() and Suspense
• Routes: Code splitting using dynamic import()

It improves performance, especially on slower networks.

Que 51. What are service workers and how do they help in PWAs?

Answer:
Service workers are scripts that run in the background and enable offline functionality, background sync, and push notifications.

Key features:

• Caching assets for offline use
• Intercepting network requests
• Enabling Progressive Web Apps (PWAs)

navigator.serviceWorker.register('/sw.js')
  .then(() => console.log('SW registered'));

Que 52. What are Web Components?

Answer:
Web Components are a set of standardized APIs to create reusable and encapsulated custom HTML elements. Core components include:

• Custom Elements: Define new HTML tags
• Shadow DOM: Encapsulated DOM and styling
• HTML Templates: Define markup without rendering immediately

They enable true component-based architecture without frameworks.

Que 53. Explain critical rendering path in browser rendering.

Answer:
The Critical Rendering Path is the sequence of steps the browser follows to convert HTML, CSS, and JS into pixels on the screen:

1. Parse HTML → DOM
2. Parse CSS → CSSOM
3. Combine DOM + CSSOM → Render Tree
4. Layout
5. Paint
6. Composite

Optimizing this flow (e.g., minifying, deferring JS) enhances performance.

Que 54. What are SSR and CSR in modern front-end frameworks?

Answer:

• SSR (Server-Side Rendering): HTML is rendered on the server, improves SEO and FCP
• CSR (Client-Side Rendering): JS renders HTML in the browser, faster interactions post-load

Feature	SSR	CSR
SEO	Better	Needs extra effort
Speed	Fast initial load	Fast post load
Frameworks	Next.js, Nuxt	React, Angular

Que 55. How do you prevent XSS (Cross-Site Scripting) attacks in front-end?

Answer:

• Escape user input before rendering
• Use frameworks that auto-escape (React, Angular)
• Use CSP (Content Security Policy) headers
• Avoid innerHTML, use safer methods like textContent

element.textContent = userInput;

Prevention must be applied both client and server side.

Que 56. What is tree shaking in JavaScript?

Answer:
Tree shaking is a dead-code elimination process used in bundlers like Webpack to remove unused code from final bundles.

For example, in ES6 modules:

// math.js
export function add() {}
export function subtract() {}

// main.js
import { add } from './math'; // subtract is removed during build

This reduces bundle size and improves loading speed.

Que 57. What are the benefits of using TypeScript in front-end development?

Answer:
TypeScript is a superset of JavaScript with static typing.

Benefits:

• Catches errors during development
• Better code editor support (intellisense, refactoring)
• Improves maintainability
• Supports modern ES features and transpiles to JS

function greet(name: string): string {
  return `Hello, ${name}`;
}

Que 58. How does hydration work in SSR frameworks like Next.js?

Answer:
Hydration is the process of attaching event listeners to server-rendered HTML so the page becomes interactive on the client side.

• SSR sends HTML to client
• JS loads and hydrates components
• Makes static content dynamic

Hydration ensures seamless SSR to CSR transition.

Que 59. What are WebSockets and how do they differ from HTTP?

Answer:
WebSockets provide full-duplex communication over a single connection, ideal for real-time apps (chats, games, live updates).

Feature	HTTP	WebSockets
Communication	One-way (client→server)	Two-way (full duplex)
Persistent	No	Yes
Overhead	High (headers)	Low

WebSockets use ws:// or wss:// protocols.

Que 60. What is Shadow DOM and how does it help in component-based design?

Answer:
The Shadow DOM is a browser feature that encapsulates the DOM and styles of a web component.

Benefits:

• Style and DOM encapsulation
• Prevents conflicts with global styles
• Enables reusable and isolated components

const shadow = element.attachShadow({ mode: 'open' });
shadow.innerHTML = `<style>p { color: red; }</style><p>Hello</p>`;

Used in native Web Components and supported by frameworks like Lit.

Also Check: Full Stack Developer Interview Questions

Que 61. How do you implement code splitting in a React application to optimize performance?

Answer:
Code splitting divides the app bundle into smaller chunks, loading only what’s needed. In React, use React.lazy with Suspense for dynamic imports. Wrap components in Suspense with a fallback UI. Configure Webpack for chunking (automatic in Create React App). Example:

const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

This reduces initial load time by 20-40%, critical for large SPAs. Use route-based splitting with React Router.

Que 62. What is the purpose of the UseMemo hook, and when should you use it?

Answer:
useMemo memoizes expensive computations, recomputing only when dependencies change, preventing unnecessary re-renders. Use for complex calculations like sorting or filtering large datasets.

Example:

const memoizedValue = useMemo(() => expensiveSort(data), [data]);

Use sparingly to avoid memory overhead; ideal for performance-critical components like data grids.

Que 63. How do you handle accessibility (a11y) in a React application?

Answer:
Ensure a11y with semantic HTML, ARIA attributes (e.g., aria-label), and focus management (useRef). Use libraries like react-aria or test with axe-core. Example:

<button aria-label="Close modal" onClick={close}>X</button>

Test with screen readers (NVDA, VoiceOver). Follow WCAG guidelines for contrast and keyboard navigation to ensure compliance.

Que 64. Explain the role of service workers in optimizing front-end applications.

Answer:
Service workers are scripts running in the background, enabling offline support, caching, and push notifications for PWAs. Register in JavaScript:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

Cache assets with Cache API for offline access, reducing server requests by 50%. Handle versioning to avoid stale caches.

Que 65. How do you manage state in a large-scale React application?

Answer:
Use Redux or Zustand for global state, Context API for localized state (e.g., themes), and useReducer for complex component state. Normalize data in Redux for efficient updates. Example with Context:

const ThemeContext = createContext();
function App() {
  return <ThemeContext.Provider value="dark"><Child /></ThemeContext.Provider>;
}

Combine with useSelector for performance in Redux. Avoid prop drilling; use middleware for async.

Que 66. What is server-side rendering (SSR), and how do you implement it with Next.js?

Answer:
SSR renders React components on the server, sending HTML to the client for faster first paint and SEO. In Next.js, use getServerSideProps:

export async function getServerSideProps() {
  const data = await fetch('https://api.example.com').then(res => res.json());
  return { props: { data } };
}
function Page({ data }) {
  return <div>{data.title}</div>;
}

Handle hydration mismatches by ensuring consistent client/server rendering. Improves TTFB by 30%.

Que 67. How do you prevent memory leaks in JavaScript applications?

Answer:
Avoid memory leaks by removing event listeners, clearing intervals, and nullifying references in cleanup functions. Use React’s useEffect for cleanup:

useEffect(() => {
  const timer = setInterval(() => {}, 1000);
  return () => clearInterval(timer);
}, []);

Profile with Chrome DevTools Memory tab to detect leaks. Reduces memory usage in long-running SPAs.

Que 68. What are the differences between CSS-in-JS and traditional CSS?

Answer:
CSS-in-JS (e.g., styled-components) scopes styles to components, supports dynamic styling, and avoids global conflicts. Traditional CSS uses separate files, is static, and relies on selectors. CSS-in-JS adds bundle size but simplifies maintenance.

Example with styled-components:

const Button = styled.button`background: ${props => props.theme.color};`;

CSS-in-JS suits component-heavy apps; traditional CSS for simpler projects.

Que 69. How do you implement lazy loading for images in a web application?

Answer:
Use the loading="lazy" attribute for native lazy loading or IntersectionObserver for custom logic.

Example with IntersectionObserver:

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});
images.forEach(img => observer.observe(img));

Improves initial load by deferring offscreen images.

Que 70. What is the role of the useEffect hook in React?

Answer:
useEffect handles side effects like data fetching, subscriptions, or DOM updates. It runs after render and can return a cleanup function.

Example:

useEffect(() => {
  fetch('/api').then(res => setData(res.json()));
  return () => console.log('Cleanup');
}, [dependency]);

Use for lifecycle tasks; manage dependencies to avoid infinite loops.

Que 71. How do you optimize a front-end application for SEO?

Answer:
Optimize SEO with SSR (Next.js) for crawlable HTML, meta tags (<meta name="description">), and structured data (JSON-LD). Use semantic HTML, fast load times (minify JS/CSS), and sitemaps. Example:

<meta name="description" content="App description">
<script type="application/ld+json">{/* Schema */}</script>

Test with Google Lighthouse. Improves search ranking significantly.

Que 72. What is the purpose of Webpack’s code splitting and tree shaking?

Answer:
Code splitting creates smaller bundles, loading code on-demand (e.g., via dynamic imports). Tree shaking removes unused code during bundling, reducing bundle size. Configure in Webpack with optimization.usedExports.

Example:

import('./module').then(module => module.default());

Reduces bundle size by 20-30%, improving load times.

Que 73. How do you implement internationalization (i18n) in a React app?

Answer:
Use libraries like react-i18next. Load translations from JSON, wrap app in provider, use hooks for strings.

Example:

import { useTranslation } from 'react-i18next';
function Component() {
  const { t } = useTranslation();
  return <p>{t('welcome')}</p>;
}

Supports dynamic language switching, critical for global apps.

Que 74. What are the benefits of using TypeScript with React?

Answer:
TypeScript adds static typing, catching errors at compile-time, improving refactoring, and enhancing IDE support. Define interfaces for props/state.

Example:

interface Props { name: string; }
const Component: React.FC<Props> = ({ name }) => <div>{name}</div>;

Reduces runtime errors by 15-20% in large projects.

Que 75. How do you handle browser compatibility issues in front-end development?

Answer:
Use polyfills (e.g., core-js for ES6) and vendor prefixes via Autoprefixer. Test with BrowserStack or Sauce Labs. Normalize CSS with reset/normalize.css.

Example polyfill:

import 'core-js/stable/promise';

Check caniuse.com for feature support. Ensures consistent UX across browsers.

Que 76. Explain the difference between client-side routing and server-side routing.

Answer:
Client-side routing (e.g., React Router) handles navigation in the browser, loading components without server requests, ideal for SPAs. Server-side routing sends requests to the server, reloading full pages, used in traditional apps.

Example with React Router:

<Routes>
  <Route path="/home" element={<Home />} />
</Routes>

Client-side is faster; server-side better for SEO without SSR.

Que 77. How do you implement a progressive web app (PWA) with React?

Answer:
Use Workbox or CRA’s service worker for offline support, caching, and push notifications. Add manifest.json for app metadata.

Example manifest:

{
  "name": "My PWA",
  "start_url": "/",
  "display": "standalone"
}

Register service worker in index.js. Enhances offline UX and installability.

Que 78. What is the role of GraphQL in front-end development compared to REST?

Answer:
GraphQL allows flexible queries, fetching only needed data, reducing over/under-fetching compared to REST’s fixed endpoints. Use Apollo Client in React:

const { data } = useQuery(gql`query { user(id: 1) { name } }`);

GraphQL simplifies data management but requires schema setup. REST is simpler for small apps.

Que 79. How do you debug performance issues in a React application?

Answer:
Use React DevTools Profiler to identify slow renders. Check for unnecessary re-renders with React.memo or useCallback. Profile with Chrome Performance tab for bottlenecks. Example:

const Memoized = React.memo(Component);

Optimize with code splitting, lazy loading, and memoization to cut render times by 30%.

Que 80. What is the purpose of the Shadow DOM in web components?

Answer:
Shadow DOM encapsulates a component’s DOM and styles, preventing external interference. Create with attachShadow:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }).innerHTML = `<p>Shadow content</p>`;
  }
}
customElements.define('my-element', MyElement);

Ensures style isolation, used in frameworks like Stencil.

Also check: Front End Developer Interview Questions for Experienced

Front End Developer Scenario based Interview Questions and Answers

Que 81. You notice a website takes a long time to load on mobile. What steps would you take to debug and improve performance?

Answer:
Steps to debug and improve:

• Use Chrome DevTools → Lighthouse Audit
• Check network tab for large assets or uncompressed files
• Optimize images with formats like WebP
• Implement lazy loading for below-the-fold images
• Minify and bundle CSS/JS
• Use async/defer for non-critical scripts
• Apply responsive design and reduce unused CSS

Que 82. A page layout breaks when viewed on smaller screens. How do you resolve this issue?

Answer:

• Inspect the page using mobile simulation in DevTools
• Add media queries to adjust font size, layout, and visibility
• Use relative units like %, em, rem instead of fixed px
• Ensure the viewport meta tag is set: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Que 83. A user reports that a button is not clickable. What would you check?

Answer:

• Check if a transparent element or overlay is covering the button
• Ensure z-index and positioning are correct
• Verify the button has no pointer-events: none CSS
• Inspect console errors for any JavaScript issues
• Check event listeners are correctly attached

Que 84. You implemented an infinite scroll, but it loads the same data repeatedly. How do you fix it?

Answer:

• Ensure backend pagination or data offset is correctly implemented
• Track current page or last record ID on the front-end
• Debounce scroll events to avoid rapid API calls
• Verify that the API provides unique results on each request

if (!isLoading && hasMoreData) fetchNextPage();

Que 85. A modal opens, but users can still scroll the background. How can you prevent this?

Answer:
Disable background scroll by applying styles when the modal is active:

body.modal-open {
  overflow: hidden;
}

document.body.classList.add("modal-open");

Remove the class when modal closes.

Que 86. A single-page app works fine locally but shows a blank page after deploying. What could be the issue?

Answer:

• Check base path in index.html or router config
• Ensure proper server configuration for SPA fallback (e.g., Nginx or Apache should redirect all routes to index.html)
• Inspect console for 404 or CORS errors
• Ensure static files are served correctly

Que 87. A React component re-renders unnecessarily. How do you optimize it?

Answer:

• Use React.memo() to prevent re-renders if props haven’t changed
• Use useCallback and useMemo to memoize functions and values
• Avoid passing new object or array literals directly as props
• Implement key-based lists properly to avoid full re-renders

Que 88. Your team wants to migrate from plain CSS to CSS-in-JS. What challenges might you face?

Answer:

• Developer learning curve
• Larger bundle sizes if not optimized
• Tooling adjustments (e.g., no traditional CSS files)
• Harder to inspect styles directly in browser DevTools
• SSR challenges (need for libraries like styled-components or emotion with SSR support)

Que 89. A user reports that a dropdown doesn’t work on Safari but works in Chrome. How would you debug it?

Answer:

• Reproduce the issue in Safari using a Mac or BrowserStack
• Check for CSS/JS features not supported in Safari
• Use Safari DevTools to inspect event bindings
• Use feature detection (@supports, typeof)
• Add appropriate fallbacks or polyfills for unsupported APIs

Que 90. You have to build a dashboard with 20+ charts. How will you ensure performance and manageability?

Answer:

• Lazy load charts when scrolled into view
• Use virtualization libraries (e.g., react-window)
• Minimize state updates and re-renders
• Use chart libraries optimized for performance (e.g., Chart.js, Recharts)
• Break the dashboard into reusable components

Que 91. You’re asked to implement dark mode toggle. How would you do it?

Answer:

• Use a toggle button that switches between classes (e.g., dark and light)
• Store preference in localStorage
• Use CSS variables or utility frameworks like Tailwind:

:root {
  --bg-color: #fff;
}
.dark-mode {
  --bg-color: #000;
}

document.body.classList.toggle("dark-mode");

Que 92. After deploying a new build, users are seeing outdated JS files. How do you fix this?

Answer:

• Enable cache busting with hashed filenames during build (e.g., main.[hash].js)
• Configure server to set appropriate cache headers
• Use service workers carefully (clear old caches)
• Inform users to hard refresh or add a notification if a new version is available

Que 93. A form has several dependent dropdowns (e.g., Country → State → City). How would you implement it?

Answer:

• Fetch and populate each dropdown based on the selection of the previous one
• Use state management (React state, Redux) to track selections
• Show loading indicators while fetching data
• Handle edge cases like empty results gracefully

useEffect(() => {
  if (selectedCountry) {
    fetchStates(selectedCountry).then(setStates);
  }
}, [selectedCountry]);

Que 94. Your React application’s form submission is slow due to multiple API calls triggered on submit. How would you optimize this?

Answer:
Slow form submission from multiple API calls can be optimized by batching requests into a single endpoint (e.g., GraphQL mutation or REST composite API) to reduce network overhead. Use async/await with Promise.all for parallel execution if batching isn’t possible. Cache static data (e.g., user preferences) in localStorage or Redux to avoid redundant calls. Show a loading spinner to improve UX.

Example with Promise.all:

async function handleSubmit() {
  setLoading(true);
  try {
    const [userData, orderData] = await Promise.all([
      fetch('/api/user').then(res => res.json()),
      fetch('/api/order').then(res => res.json())
    ]);
    // Process data
  } catch (error) {
    console.error(error);
  } finally {
    setLoading(false);
  }
}

This cuts latency by 40-60%. Profile with Chrome Network tab to verify.

Que 95. Users report that your SPA’s navigation feels sluggish, especially on low-end devices. How would you diagnose and improve performance?

Answer:
Sluggish navigation may stem from large bundles or excessive renders. Diagnose using Chrome Performance tab to record navigation, checking for long tasks (>50ms). Use React DevTools Profiler to spot unnecessary re-renders. Optimize by code splitting with React.lazy/Suspense, memoizing components with React.memo, and using useCallback for event handlers.

Example:

const LazyPage = React.lazy(() => import('./Page'));
const MemoizedComponent = React.memo(Component);

Minify assets with Webpack, enable gzip compression, and lazy load images. This reduces TTI by 30% on low-end devices.

Que 96. Your website’s images load slowly, causing layout shifts (CLS issues). How would you resolve this?

Answer:
Cumulative Layout Shift (CLS) from slow images can be fixed by setting explicit width/height attributes to reserve space, using loading="lazy" for offscreen images, and optimizing with modern formats (WebP). Use CSS aspect-ratio or placeholder divs for responsive images. Serve via CDN (e.g., Cloudflare) for faster delivery.

Example:

<img src="image.webp" width="300" height="200" loading="lazy" alt="description">

Test with Lighthouse (CLS <0.1 is ideal). This improves UX and SEO.

Que 97. A client complains that your app’s UI doesn’t update when state changes in Redux. What could be the issue, and how would you fix it?

Answer:
UI not updating with Redux state changes may result from immutable state updates, incorrect useSelector, or missing connect in class components. Check reducer for mutations (use spread operator or libraries like Immer). Ensure useSelector references the correct state slice.

Example fix:

const count = useSelector(state => state.counter.value);

Debug with Redux DevTools to trace state changes. Use immer for immutability:

produce(state, draft => {
  draft.value += 1;
});

This ensures UI reflects state, critical for data-driven apps.

Que 98. Your React app crashes on older browsers due to unsupported JavaScript features. How would you handle this?

Answer:
Crashes on older browsers (e.g., IE11) occur from unpolyfilled ES6+ features like arrow functions. Add polyfills with core-js and babel-polyfill. Configure Webpack/Babel with @babel/preset-env, specifying target browsers (e.g., “last 2 versions, ie >= 11”).

Example .babelrc:

{
  "presets": [["@babel/preset-env", { "targets": "ie >= 11" }]]
}

Test with BrowserStack. This ensures compatibility without sacrificing modern syntax.

Que 99. Your team notices high memory usage in a React app with large lists. How would you optimize memory consumption?

Answer:
High memory usage in large lists can be addressed with virtualization (react-window or react-virtualized) to render only visible items. Use React.memo to prevent re-renders, and avoid inline objects/functions in render props.

Example with react-window:

import { FixedSizeList } from 'react-window';
function List({ items }) {
  return <FixedSizeList height={400} itemCount={items.length} itemSize={35}>
    {({ index, style }) => <div style={style}>{items[index]}</div>}
  </FixedSizeList>;
}

Profile with Chrome Memory tab to confirm reductions (50-70% memory savings).

Que 100. A stakeholder requests a feature to allow users to toggle between light and dark themes. How would you implement this in React?

Answer:
Implement theme toggling with Context API and CSS variables or styled-components. Store theme in localStorage for persistence. Provide a toggle button to switch themes.

Example:

const ThemeContext = createContext('light');
function App() {
  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  };
  return (
    <ThemeContext.Provider value={theme}>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <Main />
    </ThemeContext.Provider>
  );
}

CSS:

:root {
  --bg: white; /* Light */
}
[data-theme="dark"] {
  --bg: black;
}

This provides seamless UX with minimal code.

Also Check: Web Development Interview Questions and Answers

Front End Developer Interview Questions PDF

We have included a PDF of all questions and answers, allowing you to study offline and practice at your convenience.

FAQs: Front End Developer Interview Questions

Conclusion

We have added front-end developer interview questions for both freshers and experienced professionals. We have also included scenario-based questions focused on real-life coding problems. At last, we have added a PDF so you can prepare offline anytime.

Similar Coding Interview Guides:

Coding Interview Questions	Python Interview Questions
Java interview Questions	OOPs Interview Questions