Frontend Developer Interview

Questions & Answers

HTML & CSS
 What is the difference between em and rem units in CSS?

`em`: Relative to the parent’s font-size.

`rem`: Relative to the root (`html`) font-size.

 Explain the purpose of the meta viewport tag in responsive design.

Controls layout on mobile browsers and ensures proper scaling. Example:

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

 How would you implement a responsive navigation bar using CSS?

Use media queries to adjust layout. For smaller screens, switch to a hamburger menu.

 What are pseudo-elements in CSS? Can you give examples?

They style parts of elements. Examples: `::before`, `::after`, `::first-line`.

 Explain the CSS Box Model and its components.

Includes `content`, `padding`, `border`, and `margin`. Controls element sizing and spacing.

 What is the difference between inline, inline-block, and block elements in HTML?

`inline`: Flows in text, no width/height.

`inline-block`: Like inline, but with width/height.
`block`: Full width, new line.

 What are media queries, and how would you use them in a project?

Used for responsive design. Example:

@media (max-width: 600px) { body { font-size: 14px; } }

 What is the difference between relative, absolute, fixed, and sticky positioning in CSS?

`relative`: Relative to itself.

`absolute`: Relative to nearest positioned ancestor.
`fixed`: Relative to viewport.
`sticky`: Switches between relative and fixed based on scroll.
JavaScript
 What is the difference between var, let, and const in JavaScript?

`var`: Function-scoped.
`let`: Block-scoped, mutable.
`const`: Block-scoped, immutable reference.

 Explain the concept of closures in JavaScript with an example.

A function that retains access to outer scope.

Example:
function outer() { let count = 0; return function() { count++; return count; }; }

 How does the this keyword work in JavaScript?

Refers to the object calling the function. Arrow functions bind `this` lexically.

 What are higher-order functions, and can you provide an example?

Functions that take or return other functions. Example: `[Link](x => x * 2)`

 What is the difference between synchronous and asynchronous JavaScript?

`Synchronous`: Runs sequentially.

`Asynchronous`: Runs independently (e.g., `setTimeout`, `fetch`).

 Explain the difference between forEach and map methods in arrays.

`forEach`: Executes function for each element.

`map`: Returns new array of results.

 What is the purpose of promises, and how do you use them?

To handle async tasks. Example: `fetch(url).then().catch()`

 What are arrow functions, and how do they differ from regular functions?

Short syntax, no `this` binding. Example: `const add = (a, b) => a + b`

 How does event delegation work in JavaScript?

Attach listener to parent and use `[Link]` to catch child events.

 What are REST APIs?

APIs using HTTP methods to perform CRUD operations.

 How do you ensure the security of an API?

Use HTTPS, authentication, validation, rate-limiting, and CORS.

 Explain the purpose of HTTP status codes in API responses.

Indicate response status (e.g., 200, 404, 500).

 How would you optimize API performance?

Use caching, pagination, indexing, and reduce payload size.

 What is the difference between GET and POST methods in REST APIs?

`GET`: Retrieves data.

`POST`: Sends data to be processed.

[Link]
 What is the virtual DOM, and how does React use it?

A lightweight DOM used to detect and apply minimal changes to the real DOM.

 Explain the difference between functional components and class components in React.

Functional: Simple, use hooks.

Class: Use lifecycle methods.

 What is the purpose of useState and useEffect hooks?

`useState`: Handles state.

`useEffect`: Handles side-effects.

 How does props differ from state in React?

`props`: External data.

`state`: Internal data.

 What are controlled and uncontrolled components in React?

Controlled: React handles value.

Uncontrolled: DOM handles value via ref.

 How do you handle forms in React?

Use controlled components with `onChange` handlers and `useState`.

 What is React context, and how does it help in state management?

Allows passing data without prop drilling.

 How would you optimize a React application for performance?

Use `[Link]`, `useMemo`, `useCallback`, and code splitting.

 What is the difference between useMemo and useCallback hooks?

`useMemo`: Memoize value.

`useCallback`: Memoize function.

 Explain React's lifecycle methods and their equivalents in hooks.

In class: `componentDidMount`, `componentDidUpdate`.

In hooks: `useEffect`.

Redux
 What are the three core principles of Redux?

1. Single source of truth

2. State is read-only
3. Changes via pure functions

 Explain the structure of a Redux application.

Includes: Store, Actions, Reducers, and optionally Middleware. State flows one way.

 What is the role of actions in Redux? Can you provide an example?

Describe what happened. Example:

{ type: 'ADD_TODO', payload: 'Learn Redux' }

🔢 React Questions
11 Can you build a simple counter app?
1️⃣

2️⃣What is useReducer? Why & how to use it?

3️⃣What is Webpack in React?

4️⃣What is the useRef hook? Where do we use it?

5️⃣What is Redux? How does it relate to Flux?

6️⃣When should you use props, Redux, or Context API?

7️⃣How do you optimize performance in a React app?

8️⃣Differences between useCallback, useMemo, and custom hooks?

9️⃣What are props? How do you pass data from child to parent?

🔸 🔟 Explain:
▪️Higher Order Components (HOC)
▪️Pure Components
▪️Controlled vs Uncontrolled Components
▪️React Portals

💻 JavaScript Interview Questions

1️⃣What is a Promise?

2️⃣Explain the Event Loop – how does it enable async behavior?

3️⃣Difference between Spread and Rest operators?

4️⃣Output-based questions with [Link](), setTimeout(), and Promises?

5️⃣What are Microtask Queue and Macrotask Queue?

6️⃣How do Modules work in JS?

7️⃣Solve mini problems using map, filter, and reduce.

8️⃣What is Hoisting in JS?

9️⃣Difference between regular functions and arrow functions?

🔸 🔟 What is a Closure? Show with a simple code example.