Frontend Developer Interview Questions

Frontend Developer Interview Questions

🔹 HTML (1–15)

  1. What is HTML?
  2. What are semantic elements in HTML?
  3. Difference between div and span?
  4. What is DOCTYPE in HTML?
  5. What are HTML attributes?
  6. What is a form in HTML?
  7. Difference between GET and POST methods?
  8. What are input types in HTML?
  9. What is iframe used for?
  10. What is accessibility in HTML?
  11. What is meta tag?
  12. What is HTML5?
  13. What are block and inline elements?
  14. What is the use of alt attribute in images?
  15. What is the difference between HTML and XHTML?

🔹 CSS (16–35)

  1. What is CSS?
  2. What are the types of CSS?
  3. What is box model in CSS?
  4. Difference between padding and margin?
  5. What is Flexbox?
  6. What is CSS Grid?
  7. Difference between Flexbox and Grid?
  8. What is z-index?
  9. What is position property in CSS?
  10. Difference between relative and absolute positioning?
  11. What is media query?
  12. What is responsive design?
  13. What is specificity in CSS?
  14. What is !important in CSS?
  15. What is pseudo-class?
  16. What is pseudo-element?
  17. What is display property?
  18. Difference between block and inline elements?
  19. What is opacity?
  20. What are CSS transitions?

🔹 JavaScript Basics (36–60)

  1. What is JavaScript?
  2. Difference between var, let, const?
  3. What are data types in JavaScript?
  4. What is hoisting?
  5. What is closure?
  6. What is scope?
  7. What is event loop?
  8. What are promises?
  9. What is async/await?
  10. What is callback function?
  11. What is DOM?
  12. What is DOM manipulation?
  13. What are events in JavaScript?
  14. Difference between == and ===?
  15. What is NaN?
  16. What is undefined?
  17. What is null?
  18. What is arrow function?
  19. What are array methods (map, filter, reduce)?
  20. What is JSON?
  21. What is localStorage?
  22. What is sessionStorage?
  23. What is object in JavaScript?
  24. What is prototype?
  25. What is strict mode?

🔹 Advanced JavaScript (61–75)

  1. What is event bubbling?
  2. What is event capturing?
  3. What is debouncing?
  4. What is throttling?
  5. What is IIFE?
  6. What is memory leak?
  7. What is garbage collection?
  8. What is ES6?
  9. What are modules in JavaScript?
  10. What is destructuring?
  11. What is spread operator?
  12. What is rest operator?
  13. What is currying?
  14. What is shallow copy?
  15. What is deep copy?

🔹 React JS (76–90)

  1. What is React?
  2. What are components in React?
  3. What is JSX?
  4. What is Virtual DOM?
  5. What is state in React?
  6. What are props?
  7. What is useState hook?
  8. What is useEffect hook?
  9. What is React Router?
  10. What is conditional rendering?
  11. What is lifting state up?
  12. What are controlled components?
  13. What are uncontrolled components?
  14. What is React lifecycle?
  15. What is React.memo?

🔹 General & Advanced Frontend (91–100)

  1. What is SPA (Single Page Application)?
  2. What is SEO in frontend development?
  3. What is performance optimization in web apps?
  4. What is CORS?
  5. What is REST API?
  6. What is HTTP and HTTPS?
  7. What is browser rendering process?
  8. What is caching in web applications?
  9. What are web accessibility standards?
  10. How do you debug frontend applications?

Answers

🔹 HTML (1–15)

1. What is HTML?

HTML (HyperText Markup Language) is the standard language used to create web pages. It structures content using elements like headings, paragraphs, images, and links.

2. What are semantic elements?

Semantic elements clearly describe their meaning, like <header>, <footer>, <article>. They improve SEO and accessibility.

3. Difference between div and span?

div is a block-level element used for layout, while span is inline and used for small text styling.

4. What is DOCTYPE?

It tells the browser which HTML version is used. Example:

<!DOCTYPE html>

5. What are attributes?

Attributes provide additional information about HTML elements (e.g., href, src, alt).

6. What is a form?

A form collects user input like name, email, password.

7. GET vs POST?

GET sends data in URL (less secure), POST sends data in request body (more secure).

8. What are input types?

Text, password, email, number, checkbox, radio, etc.

9. What is iframe?

It embeds another webpage inside a page.

10. What is accessibility?

Making websites usable for people with disabilities using ARIA tags and proper HTML structure.

11. What is meta tag?

Provides metadata like description, keywords, viewport settings.

12. What is HTML5?

Latest HTML version with new features like audio, video, canvas.

13. Block vs inline elements?

Block takes full width; inline takes only required space.

14. alt attribute?

Describes image for screen readers and SEO.

15. HTML vs XHTML?

XHTML is stricter and follows XML rules.

🔹 CSS (16–35)

16. What is CSS?

CSS styles HTML elements like colors, layout, fonts.

17. Types of CSS?

Inline, internal, external CSS.

18. Box model?

Content → Padding → Border → Margin.

19. Padding vs Margin?

Padding is inside space; margin is outside space.

20. Flexbox?

Layout system for aligning items in rows/columns.

21. CSS Grid?

Two-dimensional layout system (rows + columns).

22. Flexbox vs Grid?

Flexbox = 1D, Grid = 2D layout.

23. z-index?

Controls stacking order of elements.

24. Position property?

Defines element positioning (static, relative, absolute, fixed, sticky).

25. Media query?

Used for responsive design.

26. Responsive design?

Design that adjusts to all screen sizes.

27. Specificity?

Priority order of CSS rules.

28. !important?

Overrides all CSS rules.

29. Pseudo-class?

Defines state like :hover, :focus.

30. Pseudo-element?

Targets part of element like ::before.

31. Display property?

block, inline, inline-block, none.

32. Opacity?

Controls transparency (0–1).

33. CSS transition?

Smooth change between states.

34. Animation?

Keyframe-based movement effects.

35. Overflow?

Controls content that exceeds container.

🔹 JavaScript Basics (36–60)

36. What is JavaScript?

A programming language used for dynamic web behavior.

37. var, let, const?

var = function scope, let/const = block scope.

38. Data types?

String, Number, Boolean, Object, Null, Undefined.

39. Hoisting?

Variables/functions moved to top before execution.

40. Closure?

Function that remembers outer variables.

41. Scope?

Defines variable accessibility.

42. Event loop?

Handles async operations in JS.

43. Promise?

Represents future value of async operation.

44. async/await?

Simplifies asynchronous code.

45. Callback?

Function passed as argument.

46. DOM?

Structure of HTML document.

47. DOM manipulation?

Changing HTML using JS.

48. Events?

User actions like click, hover.

49. == vs ===?

== checks value, === checks value + type.

50. NaN?

Not a Number result.

51. undefined vs null?

undefined = not assigned, null = empty value.

52. Arrow function?

Short syntax for functions.

53. map/filter/reduce?

Array methods for transformation.

54. JSON?

Data format for APIs.

55. localStorage?

Stores data permanently in browser.

56. sessionStorage?

Stores data for session only.

57. Object?

Collection of key-value pairs.

58. Prototype?

Mechanism for inheritance.

59. strict mode?

Helps catch JS errors.

60. ES6?

Modern JavaScript version.

🔹 Advanced JS (61–75)

61. Event bubbling?

Event moves from child → parent.

62. Event capturing?

Parent → child flow.

63. Debouncing?

Delays execution until user stops action.

64. Throttling?

Limits function execution rate.

65. IIFE?

Immediately Invoked Function Expression.

66. Memory leak?

Unused memory not cleared.

67. Garbage collection?

Automatic memory cleanup.

68. Modules?

Code splitting using import/export.

69. Destructuring?

Extract values from arrays/objects.

70. Spread operator?

Expands elements.

71. Rest operator?

Collects multiple values.

72. Currying?

Function returning function.

73. Shallow copy?

Copies reference only.

74. Deep copy?

Copies complete object.

75. ES6 features?

Arrow functions, let/const, modules.

🔹 React JS (76–90)

76. React?

Library for UI development.

77. Components?

Reusable UI building blocks.

78. JSX?

HTML inside JavaScript.

79. Virtual DOM?

Lightweight copy of real DOM.

80. State?

Dynamic data inside component.

81. Props?

Data passed from parent.

82. useState?

Hook for state management.

83. useEffect?

Handles side effects.

84. React Router?

Navigation in SPA.

85. Conditional rendering?

Rendering based on condition.

86. Lifting state up?

Sharing state between components.

87. Controlled component?

Form controlled by React.

88. Uncontrolled component?

Form controlled by DOM.

89. Lifecycle?

Mounting, updating, unmounting.

90. React.memo?

Prevents unnecessary re-render.

🔹 Final (91–100)

91. SPA?

Single Page Application.

92. SEO in frontend?

Optimizing website for search engines.

93. Performance optimization?

Reducing load time.

94. CORS?

Cross-origin resource sharing policy.

95. REST API?

Communication between frontend and backend.

96. HTTP vs HTTPS?

HTTPS is secure version.

97. Rendering process?

HTML → CSS → JS → UI.

98. Caching?

Storing data for faster loading.

99. Accessibility?

Making sites usable for all users.

100. Debugging?

Finding and fixing errors.