https://github.com/narendrakoya999/frontend-machine-coding-interview-questions

This Repository contains List of Frontend Development Interview Questions
https://github.com/narendrakoya999/frontend-machine-coding-interview-questions

ajax angularjs api css3 es6 frontend-development html5 interview-questions javascript json machine-coding nodejs reactjs redux rest-api sass-framework state-management vuejs

Last synced: 5 days ago
JSON representation

This Repository contains List of Frontend Development Interview Questions

• Host: GitHub
• URL: https://github.com/narendrakoya999/frontend-machine-coding-interview-questions
• Owner: NarendraKoya999
• Created: 2023-09-29T05:19:03.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-07T03:21:40.000Z (almost 1 year ago)
• Last Synced: 2024-10-16T16:59:48.826Z (21 days ago)
• Topics: ajax, angularjs, api, css3, es6, frontend-development, html5, interview-questions, javascript, json, machine-coding, nodejs, reactjs, redux, rest-api, sass-framework, state-management, vuejs
• Homepage:
• Size: 61.5 KB
• Stars: 170
• Watchers: 4
• Forks: 33
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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.