narendrakoya999 / frontend-machine-coding-interview-questions

This Repository contains List of Frontend Development Interview Questions

Machine Coding🧠 Round Questions-Frontend🎯

HTML and CSS

1. Build a Basic HTML Page: Create a basic HTML page that includes a header, navigation menu, main content section, and a footer.

2. Responsive Navigation Menu: Implement a responsive navigation menu that collapses into a hamburger menu on smaller screens using HTML, CSS, and JavaScript/jQuery.

3. JavaScript Calculator: Build a simple calculator using HTML, CSS, and JavaScript that can perform basic arithmetic operations (addition, subtraction, multiplication, division).

4. Image Carousel: Create an image carousel/slider using HTML, CSS, and JavaScript/jQuery that allows users to navigate through a set of images with next and previous buttons.

5. To-Do List Application: Develop a to-do list web application using HTML, CSS, and JavaScript. Users should be able to add, edit, and delete tasks.

6. Responsive Design: Take an existing web page and make it responsive for various screen sizes (e.g., desktop, tablet, mobile) using media queries and CSS.

7. Fetch API: Use the Fetch API to retrieve data from a JSON endpoint and display it on a web page using JavaScript.

8. Single Page Application (SPA): Build a simple single-page application (SPA) using a frontend framework of your choice (e.g., React, Angular, Vue.js). Create multiple views and navigate between them.

9. Form Validation: Implement client-side form validation for a registration form using HTML5 and JavaScript. Validate fields like email, password strength, and required fields.

10. Implement a Drag and Drop Feature: Create a web page with a drag-and-drop interface using HTML, CSS, and JavaScript. Allow users to drag elements and drop them into designated areas.

11. Infinite Scroll: Implement an infinite scroll feature on a web page. Load additional content as the user scrolls down the page using JavaScript and AJAX.

12. Interactive Map: Build an interactive map using a mapping library (e.g., Leaflet, Google Maps API) and allow users to search for locations, add markers, and display additional information when clicking on markers.

13. Web Accessibility: Ensure that a web page complies with web accessibility standards (WCAG). Make necessary HTML and CSS modifications to improve accessibility for users with disabilities.

14. CSS Animation: Create a CSS animation, such as a spinning loader or a fading effect, to enhance user experience on a webpage.

15. Responsive Email Template: Design and code a responsive email template that looks good on both desktop and mobile email clients.

16. Dynamic Content Filtering: Create a web page that allows users to filter content dynamically based on categories or tags using JavaScript.

17. Social Media Sharing Buttons: Implement social media sharing buttons (e.g., Facebook, Twitter) on a webpage. When a user clicks a button, a share dialog should appear.

18. Image Lazy Loading: Implement image lazy loading to improve page performance. Images should only load when they are in the viewport.

19. Form Autocomplete: Add autocomplete functionality to a search input field using JavaScript. Provide suggestions as the user types.

20. Implement a Lightbox: Create a lightbox/modal window that displays images or content when a user clicks on a thumbnail or a button.

Intermediate Frontend Development

21. Real-time Chat Application: Build a real-time chat application using a frontend framework (e.g., React, Vue.js) and a backend technology like WebSocket or Firebase.

22. Responsive Tables: Make HTML tables responsive. Ensure that tables adapt to different screen sizes without horizontal scrolling.

23. Data Visualization: Create a data visualization chart (e.g., bar chart, pie chart) using a JavaScript library like D3.js or Chart.js.

24. Sticky Navigation: Implement a sticky navigation bar that sticks to the top of the page when scrolling down and returns to its original position when scrolling up.

25. Web Performance Optimization: Optimize the performance of a slow-loading webpage. Identify bottlenecks and apply optimizations to reduce load times.

26. Progressive Web App (PWA): Convert a web application into a Progressive Web App. Add features like offline access and push notifications.

27. Unit Testing: Write unit tests for a JavaScript function or component using a testing framework like Jest.

28. Cross-browser Compatibility: Ensure that a webpage works correctly and looks consistent across different web browsers (e.g., Chrome, Firefox, Edge).

29. Web Security: Identify and fix security vulnerabilities in a web application, such as Cross-Site Scripting (XSS) or Cross-Site Request Forgery (CSRF).

30. Responsive Email Signature: Design and code a responsive email signature that can be used in email clients.

31. Infinite Carousel: Create an infinite carousel/slider that automatically loops through a set of images or content, providing navigation controls for the user.

32. Image Gallery: Build an image gallery where users can view a collection of images, click to enlarge, and navigate through them using previous and next buttons.

33. Tooltip Component: Design and implement a reusable tooltip component in HTML, CSS, and JavaScript/jQuery that appears when hovering over specific elements.

34. Data Fetch and Display: Fetch data from a public API (e.g., GitHub API, OpenWeatherMap API) and display it on a webpage using JavaScript. Format and style the data appropriately.

35. Animated Dropdown Menu: Create a dropdown menu that expands and collapses with smooth animations when the user hovers over a trigger element.

36. Interactive Forms: Enhance a web form with interactive features like auto-suggestions, input validation, and conditional form fields using JavaScript.

37. Page Transitions: Implement smooth page transitions between different sections or pages of a website using CSS transitions and JavaScript.

38. Keyboard Shortcuts: Add keyboard shortcuts to a web application to improve user accessibility and navigation.

39. Dark Mode Toggle: Create a dark mode toggle button that switches the website's color scheme between light and dark mode.

40. WebGL Experiment: Develop an interactive WebGL project, such as a 3D visualization or animation, and embed it into a webpage.

41. Custom Video Player: Build a custom HTML5 video player with custom controls, such as play, pause, volume, and progress bar.

42. Page Printing Styles: Define CSS styles for printing a web page so that it looks well-formatted when printed on paper.

43. Implement a Photo Gallery: Create a photo gallery with albums, thumbnails, and the ability to view images in a larger size.

44. Web Audio Player: Build a web-based audio player with features like play, pause, volume control, and playlist support.

45. SVG Animation: Animate SVG graphics using CSS or JavaScript to create eye-catching visual effects.

46. Custom CSS Framework: Develop a custom CSS framework with pre-designed components and styles for rapid front-end development.

47. Web Animation Framework: Create a JavaScript animation framework that simplifies the process of animating elements on a webpage.

48. Augmented Reality Web App: Develop an augmented reality (AR) web application that overlays digital content on the user's real-world view using WebXR or similar technology.

49. Progressive Image Loading Placeholder: Implement a progressive image loading technique that displays a blurred or low-quality image as a placeholder while the high-quality image loads.

50. Automated Web Testing: Write automated tests for a web application using testing frameworks like Selenium or Cypress.

Expert Frontend Development (Part 1)

51. Custom Web Animation Library: Create a small JavaScript library for animating elements on a webpage, including support for various easing functions.

52. Custom UI Components: Create custom UI components, such as a modal dialog, date picker, or autocomplete, from scratch using HTML, CSS, and JavaScript.

53. Mobile-First Development: Develop a webpage following the mobile-first approach, ensuring it looks and functions well on mobile devices and scales up to larger screens.

54. Third-Party API Integration: Integrate with a third-party API (e.g., Google Maps, Twitter, YouTube) and display data or content from that API on your webpage.

55. Offline Support: Implement offline support for a web application, allowing users to access content even when they have no internet connection.

56. Browser History API: Use the Browser History API to implement client-side routing in a single-page application (SPA).

57. Infinite Scroll with Pagination: Combine infinite scrolling with pagination to load and display content efficiently while allowing users to navigate through pages of data.

58. Web Audio Player: Build a web-based audio player with features like play, pause, volume control, and playlist support.

59. WebGL Experiment: Develop an interactive WebGL project, such as a 3D visualization or animation, and embed it into a webpage.

60. Lazy-Loaded Modules: Implement lazy-loading for modules in a frontend framework (e.g., React, Angular, Vue.js) to reduce the initial bundle size.

61. SVG Icon Library: Create a reusable SVG icon library with a search and usage feature for easy integration into web projects.

62. WebGL 3D Scene: Develop a 3D scene using WebGL, including 3D models, textures, and interactive elements.

63. Lazy-Loaded Images: Implement lazy-loaded images that load only when they come into the user's viewport, improving page loading performance.

64. Web Performance Monitoring: Implement web performance monitoring and analytics to track and analyze website performance over time.

65. Web Security Audit: Perform a security audit on a web application and identify vulnerabilities like SQL injection, XSS, and CSRF. Suggest and implement fixes.

66. Server-Side Rendering (SSR) with React: Set up server-side rendering (SSR) for a React application.

67. WebGL Shader Effects: Build a WebGL-based shader effect, such as a water ripple effect or a dynamic particle system.

68. Lazy-Loaded Images: Implement lazy-loaded images that load only when they come into the user's viewport, improving page loading performance.

69. Web Performance Monitoring: Implement web performance monitoring and analytics to track and analyze website performance over time.

70. Web Security Audit: Perform a security audit on a web application and identify vulnerabilities like SQL injection, XSS, and CSRF. Suggest and implement fixes.

71. Server-Side Rendering (SSR): Implement server-side rendering for a frontend framework (e.g., React, Angular) to improve initial page load performance.

72. WebGL Shader Effects: Build a WebGL-based shader effect, such as a water ripple effect or a dynamic particle system.

73. Virtual DOM Implementation: Implement a simplified virtual DOM (similar to React's virtual DOM) in JavaScript.

74. Progressive Image Loading: Develop an image loading technique that progressively loads images, starting with low-quality placeholders and improving to high-quality images.

75. Touch and Gesture Events: Implement touch and gesture events in a web application to provide touch-based interactions on mobile devices.

76. Browser Storage Management: Build a utility for managing browser storage (localStorage, sessionStorage) and provide methods for setting, getting, and removing data.

77. Web Worker: Use a web worker to offload computationally intensive tasks from the main thread, improving performance.

78. Custom UI Components: Create custom UI components, such as a modal dialog, date picker, or autocomplete, from scratch using HTML, CSS, and JavaScript/jQuery.

79. Mobile-First Development: Develop a webpage following the mobile-first approach, ensuring it looks and functions well on mobile devices and scales up to larger screens.

80. Third-Party API Integration: Integrate with a third-party API (e.g., Google Maps, Twitter, YouTube) and display data or content from that API on your webpage.

81. Offline Support: Implement offline support for a web application, allowing users to access content even when they have no internet connection.

82. Browser Storage Encryption: Implement encryption for data stored in browser storage (e.g., localStorage) to enhance security.

83. WebGL Particle Animation: Create a particle animation using WebGL, simulating effects like fire, rain, or fireworks.

84. WebGL Data Visualization: Develop a data visualization using WebGL to represent complex datasets in an interactive 3D format.

85. Custom Drag and Drop: Create a custom drag-and-drop functionality for elements on a webpage without relying on external libraries.

86. Server-Side Rendering (SSR): Implement server-side rendering for a frontend framework (e.g., React, Angular) to improve initial page load performance.

87. WebGL Shader Effects: Build a WebGL-based shader effect, such as a water ripple effect or a dynamic particle system.

88. Virtual DOM Implementation: Implement a simplified virtual DOM (similar to React's virtual DOM) in JavaScript.

89. Progressive Image Loading: Develop an image loading technique that progressively loads images, starting with low-quality placeholders and improving to high-quality images.

90. Touch and Gesture Events: Implement touch and gesture events in a web application to provide touch-based interactions on mobile devices.

91. Browser Storage Management: Build a utility for managing browser storage (localStorage, sessionStorage) and provide methods for setting, getting, and removing data.

92. Web Worker: Use a web worker to offload computationally intensive tasks from the main thread, improving performance.

93. Browser Storage Encryption: Implement encryption for data stored in browser storage (e.g., localStorage) to enhance security.

94. WebGL Particle Animation: Create a particle animation using WebGL, simulating effects like fire, rain, or fireworks.

95. WebGL Data Visualization: Develop a data visualization using WebGL to represent complex datasets in an interactive 3D format.

96. Custom Drag and Drop: Create a custom drag-and-drop functionality for elements on a webpage without relying on external libraries.

React

97. React Component: Create a simple React component (e.g., a button or a card) and render it on a webpage.

98. State Management: Build a React component that manages and displays state, such as a counter that increments when a button is clicked.

99. Props and PropTypes: Create a React component that accepts props and uses PropTypes to define and validate the expected props.

100. Conditional Rendering: Implement conditional rendering in a React component based on a condition like user authentication.

101. Handling Events: Add event handlers to React components (e.g., onClick, onChange) to make them interactive.

102. Component Lifecycle: Utilize component lifecycle methods (e.g., componentDidMount, componentDidUpdate) in a React component.

103. Forms in React: Create a form in a React component and manage its state as users input data.

104. React Router: Set up routing in a React application using React Router, with multiple routes and navigation.

105. API Data Fetching: Fetch data from an API in a React component and display it.

106. Context API: Use React's Context API to manage and share state or data across multiple components.

107. Redux Setup: Set up a Redux store, actions, and reducers in a React application.

108. Redux State Management: Implement state management with Redux, connecting React components to the Redux store.

109. Redux Middleware: Use Redux middleware (e.g., Thunk) to handle asynchronous actions in a Redux-powered React application.

110. Authentication Flow: Implement user authentication and authorization in a React application, including login and protected routes.

111. React Hooks: Rewrite class-based React components into functional components using hooks like useState and useEffect.

112. Redux Saga: Integrate Redux Saga for handling side effects (e.g., API calls) in a Redux-based React application.

113. React Higher-Order Components (HOCs): Create a higher-order component (HOC) to add functionality to existing React components.

114. Error Handling: Implement error handling and display error messages in a React application.

115. Optimizing Performance: Optimize the performance of a React application by reducing unnecessary renders and using memoization.

116. Unit Testing with React Testing Library: Write unit tests for React components using React Testing Library and Jest.

117. Server-Side Rendering (SSR) with React: Set up server-side rendering (SSR) for a React application.

118. Progressive Web App (PWA) with React: Convert a React application into a Progressive Web App with offline support.

119. Internationalization (i18n): Implement internationalization and localization in a React application.

120. React Animation: Add animations and transitions to React components using libraries like React Spring or Framer Motion.

121. Data Pagination: Implement data pagination in a React application, fetching and displaying data in chunks.

122. Real-time Updates: Enable real-time updates in a React application using WebSocket or a similar technology.

123. Authentication with OAuth: Implement OAuth-based authentication (e.g., OAuth 2.0) in a React application.

124. Testing React Hooks: Write unit tests for custom React hooks using React Testing Library and Jest.

125. Custom React Router: Build a custom router using React Router's low-level APIs to gain a deeper understanding of routing.

Redux

126. Redux Store: Create a Redux store and define actions and reducers to manage state.

127. Redux Actions and Reducers: Implement Redux actions and reducers to handle specific features or data in a Redux store.

128. Redux Middleware: Add custom middleware to a Redux store to intercept and modify actions.

129. Redux Thunk: Use Redux Thunk middleware to handle asynchronous actions in a Redux store.

130. Redux Saga: Set up Redux Saga to manage side effects, such as API calls, in a Redux-powered application.

131. Redux State Normalization: Normalize the shape of the Redux store to efficiently manage relational data.

132. Redux Selector Functions: Create selector functions in a Redux application to efficiently retrieve and compute the derived state.

133. Redux Immutable State: Ensure that the Redux store's state remains immutable to prevent unintended mutations.

134. Redux Persistence: Implement state persistence in a Redux application, allowing the state to be saved and restored across sessions.

135. Redux Testing: Write unit tests for Redux actions, reducers, and selectors using testing libraries like Jest.

136. Redux Middleware Testing: Test Redux middleware, such as Thunk or Saga, to ensure correct behavior.

137. Redux DevTools: Integrate and use Redux DevTools to inspect and debug the Redux store.

138. Redux Integration with React: Connect a React application to a Redux store, dispatch actions, and map state to props.

139. Redux Integration with Angular: Integrate Redux with an Angular application using libraries like NgRx.

140. Redux Integration with Vue.js: Integrate Redux with a Vue.js application using libraries like Vuex.

Angular

141. Angular Component: Create a simple Angular component and display it in a template.

142. Angular Template Syntax: Use Angular's template syntax to render dynamic content and data.

143. Angular Two-Way Binding: Implement two-way data binding in Angular to synchronize data between a component and its template.

144. Angular Directives: Use built-in and custom Angular directives to manipulate the DOM and control rendering.

145. Angular Services: Create and use Angular services to share data and logic across components.

146. Angular Dependency Injection: Apply dependency injection in Angular to inject services into components.

147. Angular Routing: Set up routing in an Angular application with multiple views and navigation.

148. Angular Forms: Build forms in Angular, including template-driven and reactive forms.

149. HTTP Requests in Angular: Make HTTP requests to retrieve data from an API in an Angular application.

150. Angular Observables: Use observables and the RxJS library to work with asynchronous data in Angular.

151. Angular Pipes: Create custom pipes in Angular to transform and format data in templates.

152. Angular Directives: Develop custom Angular directives to add behavior and interactivity to elements.

153. Angular Modules: Organize an Angular application into feature modules to improve maintainability.

154. Angular Animation: Implement animations and transitions in Angular components using Angular's animation features.

155. Unit Testing in Angular: Write unit tests for Angular components, services, and pipes using testing frameworks like Jasmine and Karma.

156. End-to-End Testing in Angular: Perform end-to-end (E2E) testing of an Angular application using tools like Protractor.

157. Angular Routing Guards: Create routing guards in Angular to control access to routes based on conditions like authentication.

158. Angular Interceptors: Implement interceptors in Angular to add global error handling, logging, or authentication to HTTP requests.

159. Server-Side Rendering (SSR) with Angular: Set up server-side rendering (SSR) for an Angular application.

160. Angular Internationalization (i18n): Implement internationalization and localization in an Angular application.

161. Angular Lazy Loading: Optimize an Angular application by lazy-loading feature modules.

162. Angular Custom Forms: Create custom form controls and validators in Angular for complex form scenarios.

163. Angular Testing Best Practices: Apply best practices for testing Angular applications, including component testing and mocking dependencies.

164. Angular Material: Integrate and use Angular Material components and styles in an Angular application.

165. Angular State Management: Implement state management in an Angular application using libraries like NgRx.

Vue.js

166. Vue.js Instance: Create a Vue.js instance and render data in a template.

167. Vue.js Data Binding: Implement data binding in Vue.js to update the UI based on changes in data.

168. Vue.js Directives: Use Vue.js directives to manipulate the DOM and add behavior to templates.

169. Vue.js Components: Create Vue.js components and pass data between parent and child components.

170. Vue.js Event Handling: Handle user events in Vue.js components and trigger actions.

171. Vue.js Forms: Build forms in Vue.js and manage form data using directives and methods.

172. Vue.js Routing: Set up routing in a Vue.js application with multiple views and navigation.

173. Vue.js State Management: Manage application state in Vue.js using Vuex.

174. Vue.js HTTP Requests: Make HTTP requests to fetch data from an API in a Vue.js application.

175. Vue.js Lifecycle Hooks: Utilize Vue.js lifecycle hooks to perform actions at different stages of a component's lifecycle.

176. Vue.js Custom Directives: Create custom directives in Vue.js to extend functionality.

177. Vue.js Filters: Define and use custom filters in Vue.js to format and transform data in templates.

178. Vue.js Transitions and Animations: Add transitions and animations to Vue.js components for smooth UI effects.

179. Vue.js Unit Testing: Write unit tests for Vue.js components using testing libraries like Jest.

180. Vue.js End-to-End Testing: Perform end-to-end (E2E) testing of a Vue.js application using tools like Cypress.

181. Vue.js Routing Guards: Create routing guards in Vue.js to control access to routes based on conditions like authentication.

182. Vue.js Server-Side Rendering (SSR): Set up server-side rendering (SSR) for a Vue.js application.

183. Vue.js Internationalization (i18n): Implement internationalization and localization in a Vue.js application.

184. Vue.js Lazy Loading: Optimize a Vue.js application by lazy-loading components and routes.

185. Vue.js Composition API: Develop components using the Vue.js Composition API for more flexible and reusable code.

186. Vue.js Custom Directives: Create custom directives in Vue.js to extend functionality.

187. Vue.js Filters: Define and use custom filters in Vue.js to format and transform data in templates.

188. Vue.js Transitions and Animations: Add transitions and animations to Vue.js components for smooth UI effects.

189. Vue.js Unit Testing: Write unit tests for Vue.js components using testing libraries like Jest.

190. Vue.js End-to-End Testing: Perform end-to-end (E2E) testing of a Vue.js application using tools like Cypress.

191. Vue.js Routing Guards: Create routing guards in Vue.js to control access to routes based on conditions like authentication.

192. Vue.js Server-Side Rendering (SSR): Set up server-side rendering (SSR) for a Vue.js application.

193. Vue.js Internationalization (i18n): Implement internationalization and localization in a Vue.js application.

194. Vue.js Lazy Loading: Optimize a Vue.js application by lazy-loading components and routes.

195. Vue.js Composition API: Develop components using the Vue.js Composition API for more flexible and reusable code.