Front-End Interview Questions

General knoweldge of Front-End development and behavioral questions.

1. What are the time and space complexity for sorting algorithms Algorithm
2. What is Prototypal Inheritance? How does it work?JavaScript
3. explain `this` keyword in JavaScript JavaScript
4. what is Closure and how does it work?JavaScript
5.`var` vs `let` vs `const`JavaScript
6. Explain the concept of Promise to a 5-year-old JavaScript
7. Map vs Object vs Set vs Array JavaScript
8. difference between `==` and `===`JavaScript
9. explain how different CSS `position` property works CSS
10. what is the difference between `block` and `inline`?CSS
11. How HTTP works ? What is HTTP/2?Network
12. How does HTTPS work?Network
13. What is Event Delegation?DOM
14. Explain the differences between AMD, CommonJS and ES modules JavaScript
15. `Array.prototype.forEach()` vs `Array.prototype.map()`JavaScript
16. How does `instanceOf` work? difference with `typeof`JavaScript
17. Explain `new` operator in JavaScript. What exactly does it do?JavaScript
18. Explain `macrotask` and `microtask`JavaScript
19. What does header `Connection:Keep-Alive` do?Network
20. What happens when you type a URL in browser's address bar?Browser
21. What is DNS? How does it work?Network
22. What is HTTP Cache? How does it work?Network
23. How to communicate between Webview and Native Client?Webview
24. Explain TCP 3-Way Handshake process Network
25. what is the angle between the hours and the minutes hands at 3:15 Fun
26. What is CDN? Why do we use it?Network
27. Explain Box Model CSS
28. How to detect crash of a web page?Browser
29. What is the difference between Express and Koa JavaScript Library
30. Explain the lifecycle of Vue instance Vue
31. What is the Pros and Cons of Node.js Node.js
32. Explain `async` and `await`JavaScript
33. Cookie vs localStorage vs sessionStorage Browser
34. What is CSRF? How to prevent it?Security
35. Explain common HTTP response status code Network
36. What is XSS? How to prevent it?Security
37. What is the best gift you have ever given or received ?Behavioral
38. How could you do to improve performance in React?React
39. What are Pseudo Class and Pseudo Element?CSS
39. Can you explain what React Fiber is?React
41. What is `keep-alive` in Vue.js useful for?Vue.js
42. What is the difference between Repaint and Reflow?Browser
43. What are Web Workers and Service Workers ? WebAPI
44. How Garbage collection in JavaScript works?JavaScript
45. What is memory leak ? How to debug and prevent it?JavaScript
46. Explain Event Loop in Browser and in Node.js JavaScript
47. What is Virtual DOM? How does it work?JavaScript
48. What is HOC(Higher Order Component)?JavaScript React
49. What is the pros and cons of Redux?Redux
50. What is React Hooks? What are the pros and cons?React
51. What is SSR? What is the pros and cons?JavaScript
52. What is loader and plugin in Webpack?Webpack
53. What are WeakSet and WeakMap?JavaScript
54. What is Micro Frontends? What does it try to solve?Architecture
55. Explain the common performance metrics Performance
56. How do you track errors from your web application?Architecture
57. Explain common HTTP request methods? What are they used for?Network
58. What does a HTTP request look like?Network
59. What is Array-Like Objects in JavaScript?JavaScript
60. When do we need to use non-strict mode?JavaScript
61. How to publish an NPM package JavaScript
62. What is Promise ? How to resolve a bunch of Promises in order?JavaScript
63. What is Factory Pattern?JavaScript
64. What is the difference between ES6 Class and ES5 implementation?JavaScript
65. What is Decorator Pattern JavaScript
66. How to find the Performance Bottleneck of a web app?Performance
67. What is the difference between setTimeout and setInterval?JavaScript
68. Tell us the difference between common image format on the web.General
69. What is Proxy Pattern?JavaScript
70. What is Observer Pattern?JavaScript
71. How to implement lazy load for images?Architecture
72. How do you do unit test & e2e test in your web projects?Architecture
73. How do you do SEO in your project?General
74. How does @import works in CSS? What is the pros and cons CSS
75. What is Process and what is Thread General
76. What is the difference between for...in and Object.keys?JavaScript
77. What is difference between `for ... of` and `forEach`JavaScript
78. Tell us a time you acted beyond your comfort zone.Behavioral
79. How does HMR(Hot Module Replacement) work in Webpack?Webpack
80. Long Polling vs Sever-Sent Event vs WebSocket Network
81. How does client-side routing work?WebAPI
82. What is the difference between reset.css and Normalize.css CSS
83. How to create a box with fixed Aspect Ratio in CSS?CSS
84. How to create triangles with CSS?CSS
85. What were the best things you’ve ever created?Behavioral
86. What are you proud of the most?Behavioral
87. Tell me about a time that you failed.Behavioral
88. Tell me a time you achieved something through good collaboration.Behavioral
89. Tell me a time you handled conflict.Behavioral
90. How do you give and receive feedback?Behavioral
91. What is the best advice you have received?Behavioral
92. Why us?Behavioral
93. Why Front End? Behavioral
94. Can you do a retrospective on your current project?Behavioral
95. Tell me a time you handled pressure.Behavioral
96. Tell me a goal you set and you managed to achieve.Behavioral
97. Tell me a goal you set but couldn't manage to achieve.Behavioral
98. Tell me a time you acted beyond your responsibility.Behavioral
99. How do you handle a challenge?Behavioral
100. Tell me a time you motivated yourself and your team members.Behavioral
101. What is that your team upset you the most?Behavioral
102. Your decision proved to be wrong, how do you receive feedback?Behavioral
103. What would you do if your progress is dragged own by other teams?Behavioral
104. What teams you want to be working in?Behavioral
105. Tell me a time you disagreed with your supervisor.Behavioral
106. Tell me about your current role.Behavioral
107. What's the most challenging thing you've done?Behavioral
108. Which environment is best to you to work Behavioral
109. Tell about most important decision in your life.Behavioral
110. What is your strength and weakness.Behavioral
111. What is the newest web technique that you are interested in.Behavioral
112. How do you target your web app to different screen sizes?Architecture
113. How do you create retina hairline(0.5px line in CSS)?CSS
114. What is CSS pixel and device pixel?CSS
115. What is single sign-on? How to implement it?Architecture
116. What is Singleton Pattern?JavaScript
117. What is JWT(JSON Web Token)?JavaScript
118. What is Skeleton Screen? How to implement them?Architecture
119. What is the difference between `async` and `defer` on script tag?Browser
120. What have you learned from past professional working experiences?Behavioral
121. How to center an element vertically?CSS Amazon
122. Explain the common CSS Relative length units CSS
123. what is Open Redirect problem? How to solve it?Security
124. How to implement pagination in Front End?Architecture
125. please explain the 3rd parameter of EventTarget.addEventListener()WebAPI
126. How would you debug a web page and find the bad code?General Amazon
127. Tell us about CSS keywords: initial/inherit/unset/revert CSS
128. Explain how position:sticky works CSS
129. how to create a responsive Square with CSS?CSS
130. What is the difference between modules and standard scripts?JavaScript
131. what is the difference between cache-control:no-cache and cache-control:no-store?HTTP
132. What is the differencee between Symmetric and Asymmetric Encryption?Security
133. can you tell the difference between MVC, MVVM and Flux?Architecture
134. is Array.prototype.sort() stable in JavaScript?JavaScript
135. What attributes do Cookies have?HTTP
136. How to achieve responsiveness in your web app?CSS
137. What does`flex:1` mean?CSS
138. What is Block Formatting Context?CSS
139. What would be the principles if you are to lead a relatively large Front-End project?General
140. how does `clear` in CSS work?CSS
141. What does Object.freeze() do?JavaScript
142. Are you familiar with webpack? how does it work?DevTool
143. How does responsiveness work?CSS
144. What is the difference between Vue and React? How would you choose?Framework
145. how to implement user login?Auth
146. what is 'use strict' for?JavaScript
147. What is Same-Origin policy ? How to share Cross-Origin resource? HTTP
148. what is base64 ?network
149. Tell me more about Unicode and UTF-8 General
150. Explain the structure of a HTTP message HTTP
151. What is 300ms tap delay for touch device? How to remove it Mobile
152. What is Generator and what is it useful for?JavaScript
153. why 0.1 + 0.2 !== 0.3 ? How to deal with float precision in your apps?JavaScript
154. How would you add offline support to your web app?JavaScript
155. how to improve performance of a webpage of a lot of images?performance
156. what is `transform:translateZ(0)` for?CSS
157. will the sheep be eaten?Fun
158. What technologies are you learning right now? and what do you plan to learn?Behavior
159. What is the difference between `git merge` and `git rebase`?General
160. How to turn HTML web page in to an image?General
161. explain iterators and generators JavaScript
162. What is the difference between function declaration and function expression?JavaScript
163. How do you troubleshoot when user reports a blank screen on you web page?General
164. What is the difference between `null` and `undefined` ? Which one should I use?JavaScript
165. What is the different between '^1.2.3' and '~1.2.3' in package.json NPM
166. Tell us the differences about <b> <strong> <i> <em>HTML
167. please briefly introduce yourself General
168. What is the difference between `display:none` and `visibility:hidden`CSS
169. What is the response body of HTTP status code 304?Network
170. Do you have any questions to ask about our company, team or anything?Behavioral
171. Tell us your approach if you're asked to build a Design System for your team and company? SystemDesign
172. What is the difference between TCP and UDP?Network
173. Explain the cookie attribute: "SameSite".Network