Important fronted interview Questions #

 INTERVIEW QUESTION

HTML

1. What are semantic HTML elements? Give examples.
Ans: Semantic HTML elements clearly describe their meaning to both browsers and developers, such as <header>, <footer>, <article>, <section>, and <main>.

2. Difference between block, inline, and inline-block elements?
Ans: Block elements take full width and start on a new line, inline elements take only content width, and inline-block elements behave inline but allow width and height.

3. What is the difference between <div> and <span>?
Ans: <div> is a block-level element used for layout, while <span> is an inline element used for styling small text.

4. What are HTML5 new features?
Ans: HTML5 introduced semantic tags, audio/video support, canvas, localStorage, geolocation, and improved form controls.

5. Explain the difference between HTML and XHTML.
Ans: HTML is flexible and not case-sensitive, while XHTML is strict, XML-based, and case-sensitive.

6. What is the difference between id and class in HTML?
Ans: An id is unique and used once, whereas a class can be used multiple times.

7. What is the difference between relative and absolute URLs in HTML?
Ans: Relative URLs depend on the current file path, while absolute URLs include the full path with domain.

8. What are data- attributes used for?*
Ans: data-* attributes are used to store custom data in HTML elements for JavaScript access.

9. Difference between <script>, <script async>, and <script defer>?
Ans: <script> blocks HTML parsing, async loads and executes immediately, and defer executes after HTML parsing.

10. Difference between <link> and @import for including CSS?
Ans: <link> loads CSS faster and is recommended, while @import loads CSS sequentially.

11. What are meta tags in HTML?
Ans: Meta tags provide metadata like charset, viewport, SEO description, and author information.

12. Difference between <canvas> and <svg>?
Ans: <canvas> is pixel-based and drawn using JavaScript, while <svg> is vector-based and scalable.

13. What is the difference between localStorage, sessionStorage, and cookies?
Ans: localStorage stores data permanently, sessionStorage stores data per tab session, and cookies store small data sent to the server.

14. What are accessibility (ARIA) attributes? Why are they important?
Ans: ARIA attributes improve accessibility by helping screen readers understand UI elements.

15. Difference between <section>, <article>, <aside>, and <main>?
Ans: <section> groups content, <article> is independent content, <aside> is side content, and <main> holds main page content.

CSS

16. Difference between relative, absolute, fixed, and sticky positioning?
Ans: Relative positions element relative to itself, absolute positions relative to nearest positioned parent, fixed positions relative to viewport, and sticky switches between relative and fixed based on scroll.

17. What is the difference between inline, internal, and external CSS?
Ans: Inline CSS is written inside elements, internal CSS is inside <style> tag, and external CSS is in a separate .css file.

18. Difference between relative units (%, em, rem, vw, vh)?
Ans: Relative units adjust based on parent element, root element, or viewport size.

19. Difference between absolute and relative units?
Ans: Absolute units like px are fixed, while relative units adjust according to screen or parent.

20. What is the difference between Flexbox and CSS Grid?
Ans: Flexbox is one-dimensional (row or column), while CSS Grid is two-dimensional (rows and columns).

21. Difference between inline vs block elements in terms of CSS?
Ans: Inline elements ignore width and height, block elements respect width, height, and margins.

22. What is z-index and how does it work?
Ans: z-index controls the vertical stacking order of positioned elements.

23. Explain the concept of CSS specificity.
Ans: Specificity determines which CSS rule applies, with priority: inline > id > class > element.

24. Difference between visibility: hidden and display: none?
Ans: visibility: hidden hides element but keeps space, while display: none removes it from layout.

25. What is the difference between transform, transition, and animation in CSS?
Ans: Transform changes element shape, transition animates property changes, animation runs keyframes automatically.

26. What are pseudo-classes and pseudo-elements? Give examples.
Ans: Pseudo-classes define element states like :hover, pseudo-elements style parts like ::before.

27. Difference between inline CSS and external CSS in terms of performance?
Ans: External CSS is better for performance due to caching.

28. What are media queries and how do they work?
Ans: Media queries apply CSS based on device screen size or conditions.

29. Difference between min-width and max-width in responsive design?
Ans: min-width supports mobile-first design, max-width supports desktop-first design.

30. Difference between CSS Grid vs Flexbox? When to use which?
Ans: Grid is used for layouts, Flexbox is used for components and alignment.

31. What is the difference between relative path and absolute path in CSS?
Ans: Relative path depends on file location, absolute path uses full path.

32. Difference between inline styles and CSS classes in React?
Ans: CSS classes are reusable and preferred over inline styles.

33. Difference between CSS BEM methodology and normal CSS?
Ans: BEM provides structured and maintainable naming conventions.

34. What are media queries used for?
Ans: They are used to make responsive designs for different screen sizes.

35. Difference between responsive design and adaptive design?
Ans: Responsive design adapts fluidly, adaptive design uses fixed layouts.

JAVASCRIPT

36. Difference between var, let, and const?
Ans: var is function-scoped, while let and const are block-scoped; const cannot be reassigned.

37. What is the difference between == and ===?
Ans: == checks value only, while === checks both value and type.

38. What is hoisting in JavaScript?
Ans: Hoisting moves variable and function declarations to the top of their scope.

39. Difference between null and undefined?
Ans: null is an assigned empty value, while undefined means a variable is declared but not assigned.

40. What is closure in JavaScript?
Ans: A closure is a function that remembers variables from its outer scope.

41. Difference between synchronous and asynchronous JavaScript?
Ans: Synchronous code blocks execution, while asynchronous code runs without blocking.

42. Difference between event bubbling and event capturing?
Ans: Event bubbling propagates from child to parent, while capturing goes from parent to child.

43. What is the difference between call, apply, and bind methods?
Ans: They change function context; call and apply execute immediately, bind returns a new function.

44. Difference between shallow copy and deep copy in JS?
Ans: Shallow copy copies references, deep copy copies actual values.

45. What are promises in JavaScript?
Ans: Promises handle asynchronous operations and represent future values.

46. Difference between promise chaining and async/await?
Ans: async/await provides cleaner and more readable syntax.

47. What is the difference between localStorage and sessionStorage?
Ans: localStorage persists data, sessionStorage lasts for the browser session.

48. Difference between setTimeout and setInterval?
Ans: setTimeout executes once, setInterval executes repeatedly.

49. What is the difference between arrow functions and normal functions?
Ans: Arrow functions do not have their own this.

50. Difference between for...in and for...of loops?
Ans: for...in iterates object keys, for...of iterates values.

51. What is the difference between DOM and BOM?
Ans: DOM handles document elements, BOM handles browser-related objects.

52. Difference between innerHTML and innerText?
Ans: innerHTML includes HTML tags, innerText shows only text.

53. What is event delegation?
Ans: Handling events using a parent element for better performance.

54. Difference between ES5 and ES6 features?
Ans: ES6 introduced let, const, arrow functions, classes, and modules.

55. What are higher-order functions in JavaScript?
Ans: Functions that take other functions as arguments or return them.

56. Difference between synchronous vs asynchronous execution?
Ans: Synchronous blocks code execution, asynchronous does not.

57. What is the difference between JSON and JavaScript objects?
Ans: JSON is a string format, JavaScript objects are real objects.

58. Difference between map(), forEach(), filter(), and reduce()?
Ans: map transforms, forEach iterates, filter selects, reduce combines values.

59. Difference between mutable and immutable data in JS?
Ans: Mutable data can change, immutable data cannot.

60. Difference between functional programming and OOP in JS?
Ans: Functional programming focuses on functions, OOP focuses on objects.

61. Difference between prototype and proto?
Ans: prototype defines shared properties, __proto__ links objects.

62. What is the difference between class and constructor function in JS?
Ans: Classes are syntactic sugar over constructor functions.

63. Difference between import and require?
Ans: import is ES6 module syntax, require is CommonJS.

64. What is the difference between REST API and GraphQL?
Ans: REST uses fixed endpoints, GraphQL allows flexible data fetching.

65. Difference between debouncing and throttling?
Ans: Debouncing delays execution, throttling limits execution frequency.

REACT

66. What is the difference between functional and class components?
Ans: Functional components use hooks and are simpler, while class components use lifecycle methods.

67. What are React hooks? Name some common hooks.
Ans: Hooks are functions that allow using state and lifecycle features in functional components, such as useState, useEffect, and useContext.

68. Difference between useEffect and useLayoutEffect?
Ans: useEffect runs after rendering, while useLayoutEffect runs before browser paint.

69. What is the difference between controlled and uncontrolled components?
Ans: Controlled components are managed by React state, uncontrolled components are managed by the DOM.

70. Difference between state and props in React?
Ans: State is mutable and managed within a component, props are read-only and passed from parent.

71. Difference between useMemo and useCallback?
Ans: useMemo memoizes a value, while useCallback memoizes a function.

72. Difference between Context API and Redux?
Ans: Context API is for small to medium state management, Redux is for large and complex applications.

73. What are React keys and why are they important?
Ans: Keys uniquely identify elements in lists and help React optimize rendering.

74. Difference between React.Fragment and a div wrapper?
Ans: Fragment avoids adding extra nodes to the DOM.

75. Difference between virtual DOM and real DOM?
Ans: Virtual DOM updates efficiently by comparing changes before updating the real DOM.

76. Difference between lazy loading and code splitting?
Ans: Lazy loading loads components when needed, code splitting divides code into smaller bundles.

77. Difference between React Router v5 and v6?
Ans: React Router v6 is simpler, faster, and uses element-based routes.

78. Difference between useState and useReducer hook?
Ans: useState is for simple state, useReducer is for complex state logic.

79. Difference between SSR and CSR in React?
Ans: SSR renders on server for faster load, CSR renders in browser.

80. Difference between hydration and rendering in React?
Ans: Hydration attaches event listeners to server-rendered HTML, rendering creates UI from scratch.

---

Performance, Security & Tools 

81. How do you optimize frontend performance?
Ans: By minimizing files, lazy loading, caching, and optimizing images.

82. Difference between lazy loading and preloading?
Ans: Lazy loading loads resources when needed, preloading loads them early.

83. What is critical CSS and why is it important?
Ans: Critical CSS loads essential styles first to improve page load speed.

84. Difference between HTTP/1.1, HTTP/2, and HTTP/3?
Ans: Each version improves speed, multiplexing, and performance.

85. How do you prevent XSS attacks in frontend?
Ans: By sanitizing user input and escaping HTML.

86. What is CORS and how does it work?
Ans: CORS controls access between different domains using HTTP headers.

87. Difference between cache-control and expires header?
Ans: cache-control is modern and flexible, expires is older.

88. What is a service worker and how does it help in PWA?
Ans: Service workers enable offline access and caching.

89. Difference between CSR, SSR, and SSG?
Ans: CSR renders in browser, SSR on server, SSG generates static pages.

90. What are web components and why use them?
Ans: Web components are reusable custom HTML elements.

91. Difference between Git merge and Git rebase?
Ans: Merge keeps commit history, rebase rewrites it.

92. Difference between package-lock.json and yarn.lock?
Ans: Both lock dependency versions for consistency.

93. Difference between npm and yarn?
Ans: Both manage packages, yarn is generally faster.

94. Difference between Webpack and Vite?
Ans: Vite is faster and uses native ES modules.

95. Difference between monolith and microfrontend architecture?
Ans: Monolith is a single app, microfrontend splits app into modules.

96. What are Design Systems? Give examples.
Ans: Design systems are reusable UI guidelines like Material UI.

97. Difference between Tailwind CSS and traditional CSS frameworks?
Ans: Tailwind is utility-first, traditional CSS uses predefined components.

98. What are Lighthouse metrics for frontend performance?
Ans: Performance, accessibility, SEO, and best practices.

99. Difference between responsive design and adaptive design?
Ans: Responsive adapts fluidly, adaptive uses fixed layouts.

100. What are Progressive Web Apps (PWA)?
Ans: PWAs are web apps with offline support and app-like features.