Front-End Interview Questions

General knoweldge of Front-End development and behavioral questions.

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