Frontend Interview Questions and Answers

1. What is the difference between HTML and HTML5?

HTML5 is the latest version of HTML that introduces new semantic elements (like

<article>, <section>), multimedia support (<audio>, <video>), and APIs (like local

storage and canvas) that were not available in previous versions.

2. What are semantic HTML elements?

Semantic elements clearly describe their meaning in a human- and machine-readable

way (e.g., <header>, <footer>, <article>), improving SEO and accessibility.

3. How do you make a website responsive?

By using media queries, fluid grid layouts, flexible images, and responsive units (%, em,

rem, vw, vh) to adapt the design to various screen sizes.

4. What is the difference between id and class in HTML?

id is unique and used to identify a single element, whereas class can be used for

multiple elements and is useful for styling groups.

5. What is the box model in CSS?

The box model includes content, padding, border, and margin. It defines how elements

are rendered and how spacing works.

6. What is specificity in CSS?

Specificity determines which CSS rule is applied when there are conflicting rules. It is

calculated based on inline styles, IDs, classes, and tag names.

7. What are pseudo-classes in CSS?

Pseudo-classes define a special state of an element (e.g., :hover, :nth-child, :focus).

8. What is the difference between em, rem, and % units in CSS?

em is relative to the parent font size, rem is relative to the root element’s font size, and

% is relative to the parent element’s dimension.

9. What is Flexbox and when would you use it?

Flexbox is a CSS layout module that allows for efficient layout alignment and

distribution of space among items in a container, especially when the size of items is

unknown.

10. What is the difference between absolute, relative, fixed, and sticky positioning in

CSS?

absolute: positioned relative to the nearest positioned ancestor.

relative: positioned relative to its normal position.

fixed: positioned relative to the viewport.

sticky: toggles between relative and fixed, depending on scroll position.

---

JavaScript

11. What is the difference between var, let, and const?

var is function-scoped and hoisted.

let and const are block-scoped, with const used for variables that don't change.

12. What is a closure in JavaScript?

A closure is a function that retains access to its outer scope even after the outer

function has returned.

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

== checks for value equality with type coercion, while === checks for both value and

type equality.

14. What is event delegation?

Event delegation allows you to use a single event listener on a parent element to

handle events on its child elements.

15. What are arrow functions and how do they differ from regular functions?

Arrow functions are a shorter syntax for functions and do not have their own this,

arguments, or super bindings.

16. What is the difference between synchronous and asynchronous code?

Synchronous code runs in sequence; asynchronous code can run independently and

uses callbacks, promises, or async/await.

17. What is the DOM?

The Document Object Model (DOM) is a programming interface for HTML and XML

documents, representing the page so programs can change the document structure,
 Frontend Interview Questions and Answers

style, and content.

18. How do you prevent event bubbling?

By using event.stopPropagation() in your event handler.

19. What is hoisting in JavaScript?

Hoisting is JavaScript's behavior of moving declarations to the top of the current scope

before code execution.

20. What is the difference between null and undefined?

undefined means a variable has been declared but not assigned a value, while null is an

assignment value representing no value.

---

React.js

21. What is React?

React is a JavaScript library for building user interfaces using components and a virtual

DOM.

22. What are components in React?

Components are reusable pieces of UI that can be either class-based or function-based.

23. What is JSX?

JSX is a syntax extension for JavaScript that allows writing HTML-like code within

JavaScript files.

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

Props are passed to components and are immutable, while state is managed within a

component and can change over time.

25. What is the Virtual DOM?

The Virtual DOM is a lightweight copy of the real DOM. React updates the Virtual DOM

first, compares changes, and then updates the real DOM efficiently.

26. What are hooks in React?

Hooks are functions that let you use state and other React features in functional

components.

27. What is useEffect used for?

useEffect is a hook used for side effects like fetching data, directly manipulating the

DOM, or setting timers.

28. How do you handle forms in React?

Forms in React are handled by controlling form elements with state and handling the

onChange and onSubmit events.

29. What is context in React?

Context provides a way to pass data through the component tree without having to
 Frontend Interview Questions and Answers

pass props down manually at every level.

30. What is a key in React and why is it important?

A key is a unique identifier used in lists to help React identify which items have

changed, are added, or are removed.

31. What is a promise in JavaScript?

A promise is an object representing the eventual completion or failure of an

asynchronous operation.

32. What is async/await?

Async/await is syntactic sugar over promises, making asynchronous code look and

behave like synchronous code.

33. What is throttling and debouncing?

Throttling limits the number of times a function can be called over time. Debouncing

delays function execution until a specified time has passed since the last call.

34. What is memoization?

Memoization is an optimization technique that stores the results of expensive function

calls and returns the cached result when the same inputs occur again.

35. What is a service worker?

A service worker is a script that runs in the background and can intercept network

requests, cache assets, and enable offline functionality.

36. How can you improve website performance?

By optimizing images, minifying CSS/JS, lazy loading resources, using CDN, reducing

HTTP requests, and caching effectively.

37. What are Webpack and Babel?

Webpack is a module bundler. Babel is a JavaScript compiler that allows you to use the

latest JavaScript features by converting them to backwards-compatible code.

38. What is tree shaking in JavaScript?

Tree shaking is a process of removing unused code from the final bundle to reduce file

size.

39. How do you handle errors in JavaScript?

Using try...catch blocks, .catch() on promises, and error boundaries in React.

40. What is a polyfill?

A polyfill is a piece of code that provides modern functionality on older browsers that do

not natively support it.

---

Accessibility, Testing, Version Control, General

41. What is web accessibility (a11y)?

Accessibility means building websites usable by people with disabilities, ensuring

support for screen readers, keyboard navigation, and proper contrast.

42. What are ARIA attributes?

ARIA (Accessible Rich Internet Applications) attributes help improve accessibility for

dynamic content and complex UI components.

43. How do you test frontend code?

Using tools like Jest, React Testing Library, Cypress, and manual testing for UI

interactions and responsiveness.

44. What is responsive design?

Responsive design ensures that a website looks good and functions well across different

screen sizes and devices.

45. What is Git and why is it used?

Git is a version control system used to track changes in source code during software

development.

46. What is the difference between Git and GitHub?

Git is the tool; GitHub is a platform for hosting and collaborating on Git repositories.

47. What is continuous integration (CI)?

CI is a development practice where developers integrate code frequently, verified by

automated builds and tests.

48. What are some common frontend security issues?

Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), and insecure CORS

configurations are common frontend security threats.

49. What is progressive enhancement?

Progressive enhancement is a strategy for web design that emphasizes core webpage

content first, then adds advanced features for capable browsers.

50. What are single-page applications (SPA)?

SPAs load a single HTML page and dynamically update content without refreshing the

entire page, commonly built using frameworks like React or Angular.