Frontend Developer Intern

100+ Frontend Developer Intern Interview Questions and Answers

Updated 4 Feb 2025

Q51. What is the Redux Toolkit?

Ans.

Redux Toolkit is an official, opinionated, batteries-included toolset for efficient Redux development.

  • Official toolset for Redux

  • Opinionated and batteries-included

  • Helps with common Redux tasks like store setup, reducer logic, and actions

Q52. Why is React Query used?

Ans.

React Query is used for managing server state and caching data in React applications.

  • Provides a powerful and flexible way to fetch, cache, and update data from APIs

  • Automatically handles caching, background refetching, and stale data management

  • Improves performance by reducing unnecessary network requests

  • Simplifies data fetching and updating logic in React components

Q53. what is react js and how to use redux in react js

Ans.

React JS is a JavaScript library for building user interfaces, while Redux is a predictable state container for managing application state.

  • React JS is a declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Redux is a predictable state container for JavaScript apps, which helps in managing application state.

  • To use Redux in React JS, you need to install the Redux library, create a Redux store, define reducers to specify how the state changes in r...read more

Q54. What is Node Js and Discuss abourt your project?

Ans.

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.

  • Node.js allows developers to run JavaScript on the server-side.

  • It provides an event-driven, non-blocking I/O model that makes it lightweight and efficient.

  • Node.js is commonly used for building scalable network applications, real-time applications, and APIs.

  • My project involved building a RESTful API using Node.js and Express framework.

Are these interview questions helpful?

Q55. Which tag is used to break the paragraph?

Ans.

The tag is used to break the paragraph.

  • The
    tag is a self-closing tag.

  • It is used to insert a line break within a paragraph.

  • It does not require a closing tag.

Q56. different between grid and flex box

Ans.

Grid is a 2D layout system while Flexbox is a 1D layout system.

  • Grid is used for complex layouts while Flexbox is used for simpler layouts.

  • Grid allows for precise placement of elements while Flexbox is more flexible.

  • Grid is better for aligning items in both rows and columns while Flexbox is better for aligning items in a single row or column.

  • Grid is supported in modern browsers while Flexbox has wider browser support.

Share interview questions and help millions of jobseekers 🌟

man-with-laptop

Q57. What are CSS selectors

Ans.

CSS selectors are patterns used to select and style HTML elements.

  • Selectors can target elements by tag name, class, ID, attribute, and more.

  • Selectors can be combined to create complex rules.

  • Examples: 'p' selects all

    elements, '.class' selects all elements with class 'class', '#id' selects the element with ID 'id'.

Q58. Explain about react hooks and why you use it ?

Ans.

React hooks are functions that let you use state and other React features without writing a class.

  • Hooks are introduced in React 16.8 to allow developers to use state and other React features in functional components.

  • They make it easier to reuse stateful logic, separate concerns, and write cleaner code.

  • Examples of hooks include useState for managing state in functional components and useEffect for handling side effects.

Frontend Developer Intern Jobs

Frontend Developer Intern 0-2 years
NoMadsLab
5.0
Pune
Frontend Developer Intern 0-3 years
AegisCovenant
3.0
Gurgaon / Gurugram
Frontend Developer Internship 0-1 years
Acowale Technologies Private Limited
3.5
Bangalore / Bengaluru

Q59. Explain call(), apply () and bind() method?

Ans.

call(), apply() and bind() are methods used to manipulate the 'this' keyword in JavaScript.

  • call() and apply() are used to invoke a function with a specific 'this' context and arguments.

  • call() accepts arguments as a comma-separated list, while apply() accepts arguments as an array.

  • bind() returns a new function with a specific 'this' context, which can be invoked later with arguments.

  • bind() is useful for creating a new function with a fixed 'this' context, such as event handler...read more

Q60. The flex property defines the ability of a flex item to grow ,shrink,,,,etc

Ans.

The flex property defines the ability of a flex item to grow, shrink, or stay the same size.

  • The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis properties.

  • It allows a flex item to grow or shrink to fill the available space.

  • Values for flex property include a unitless number for flex-grow, a unitless number for flex-shrink, and a length or percentage for flex-basis.

  • Example: flex: 1 1 50%;

Q61. What is HTML meta tag?

Ans.

HTML meta tag is used to provide metadata about the HTML document.

  • Meta tags are placed in the head section of an HTML document.

  • They provide information such as character set, viewport settings, keywords, description, etc.

  • Example: <meta charset='UTF-8'>

Q62. Mention some factors that slow downs a Website.

Ans.

Factors that slow down a website include large images, excessive HTTP requests, outdated plugins, and poor server performance.

  • Large images and videos

  • Excessive HTTP requests

  • Outdated plugins and scripts

  • Poor server performance

  • Unoptimized code

  • External embedded media

  • Too many ads or pop-ups

Q63. What is createSlice?

Ans.

createSlice is a function in Redux Toolkit that simplifies the process of creating Redux slices.

  • createSlice is a function provided by Redux Toolkit for creating Redux slices with less boilerplate code.

  • It allows developers to define a slice of the Redux state, including initial state, reducers, and action creators.

  • createSlice automatically generates action types and action creators based on the defined reducers.

  • It is commonly used in React applications to manage state using Re...read more

Q64. What Is ReactJs?

Ans.

ReactJs is a JavaScript library for building user interfaces.

  • ReactJs is developed and maintained by Facebook.

  • It uses a component-based architecture for building reusable UI components.

  • ReactJs uses a virtual DOM for efficient rendering of components.

  • It allows developers to create interactive and dynamic web applications.

  • ReactJs can be used with other libraries and frameworks like Redux for state management.

Frequently asked in,

Q65. What is Reducer?

Ans.

Reducer is a function in Redux that specifies how the application's state changes in response to actions.

  • Reducer functions take the current state and an action as arguments, and return the new state.

  • Reducers are pure functions, meaning they do not modify the current state, but return a new state object.

  • Redux uses reducers to manage the state of the application in a predictable way.

Q66. Find same type of element in array!

Ans.

Find same type of element in array of strings.

  • Use a loop to iterate through the array.

  • Compare each element with the rest of the elements using nested loops.

  • Return the first matching element.

Q67. difference between let and var?

Ans.

let and var are both used to declare variables in JavaScript, but they have some key differences.

  • let is block-scoped, while var is function-scoped

  • let variables are not hoisted, while var variables are hoisted

  • let variables can be reassigned, while var variables can be redeclared

  • let variables have temporal dead zone, while var variables do not

Q68. How can you improve the website's frontend.

Ans.

To improve the website's frontend, I would focus on optimizing performance, enhancing user experience, and ensuring responsiveness.

  • Optimize images and videos to reduce loading times

  • Implement lazy loading for faster initial page load

  • Enhance UI/UX design for better user engagement

  • Utilize responsive design to ensure compatibility across devices

  • Implement accessibility features for users with disabilities

Q69. What is html more about css and react too

Ans.

HTML is the structure of a webpage, CSS is for styling, and React is a JavaScript library for building user interfaces.

  • HTML is used for creating the structure of a webpage by using elements like <div>, <p>, <h1>, etc.

  • CSS is used for styling the webpage by changing colors, fonts, layout, etc. using selectors and properties.

  • React is a JavaScript library for building user interfaces, allowing for reusable components and efficient updates.

Q70. What is SPA and how is react SPA?

Ans.

SPA stands for Single Page Application. React is a popular JavaScript library for building SPAs.

  • SPA is a web application that loads a single HTML page and dynamically updates the page as the user interacts with it.

  • React is a JavaScript library for building user interfaces, including SPAs.

  • React uses a virtual DOM to efficiently update the UI without reloading the entire page.

  • React Router is commonly used with React to handle routing in SPAs.

Q71. Diff between controlled and uncontrolled components!

Ans.

Controlled components are controlled by React state, while uncontrolled components manage their own state internally.

  • Controlled components are controlled by React state

  • Uncontrolled components manage their own state internally

  • Controlled components are typically used for forms with dynamic input fields

  • Uncontrolled components are useful for simple forms with static input fields

Q72. What is box model?

Ans.

The box model is a concept in CSS that describes how elements are rendered on a web page.

  • The box model consists of four components: content, padding, border, and margin.

  • The content refers to the actual content of the element, such as text or images.

  • The padding is the space between the content and the border.

  • The border is a line that surrounds the content and padding.

  • The margin is the space outside the border, separating the element from other elements.

  • The box model allows dev...read more

Q73. Tell eveything you know about node js.

Ans.

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.

  • Node.js allows developers to run JavaScript on the server-side.

  • It uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.

  • Node.js has a large and active community with a vast number of open-source packages available through npm.

  • It is commonly used for building scalable network applications, real-time applications, and APIs.

  • Some popular frameworks built on Node.js include Expres...read more

Q74. Why JavaScript is being used?

Ans.

JavaScript is used for creating interactive and dynamic web pages.

  • JavaScript allows for client-side scripting, reducing server load and improving user experience.

  • It is versatile and can be used for both front-end and back-end development.

  • JavaScript frameworks like React and Angular make it easier to build complex web applications.

  • It is constantly evolving with new features and updates.

  • JavaScript is supported by all major browsers and has a large developer community.

Q75. Write a program for sum of n numbers through recursion.

Ans.

Program to calculate sum of n numbers using recursion

  • Define a recursive function that takes an array of numbers and an index as parameters

  • Base case: if index is equal to the length of the array, return 0

  • Recursive case: return the current number plus the result of the function with index + 1

  • Call the function with the array of numbers and index 0 to start the recursion

Q76. Difference in CSS Selectors like class, id

Ans.

Classes can be used multiple times, IDs are unique. Classes are denoted by a dot, IDs by a hash.

  • Classes can be used multiple times in a document, IDs can only be used once

  • Classes are denoted by a dot (.), IDs are denoted by a hash (#)

  • Example: .class1 { color: red; } #id1 { font-size: 16px; }

Q77. What is oops what is class

Ans.

OOPs stands for Object-Oriented Programming. A class is a blueprint for creating objects in OOP.

  • OOPs is a programming paradigm that uses objects and classes to design and build applications.

  • A class is a template or blueprint for creating objects in OOP.

  • Classes define the properties (attributes) and behaviors (methods) of objects.

  • Objects are instances of classes, representing real-world entities.

  • Encapsulation, inheritance, and polymorphism are key principles of OOPs.

Q78. difference between useState and useEffect in react

Ans.

useState is used to manage state in functional components, while useEffect is used to perform side effects in functional components.

  • useState is used to declare state variables in functional components.

  • useEffect is used to perform side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM.

  • useState does not trigger re-renders, while useEffect can be used to trigger re-renders based on dependencies.

Q79. polyfill for map and reduce

Ans.

Polyfill for map and reduce functions in JavaScript.

  • Create a function that takes an array and a callback function as arguments.

  • Loop through the array and apply the callback function to each element.

  • Return a new array with the modified elements.

  • For reduce, create a function that takes an array, a callback function, and an initial value as arguments.

  • Loop through the array and apply the callback function to each element and the accumulator.

  • Return the final value of the accumulat...read more

Q80. ==compare values with type coerion=== is that

Ans.

Yes, the question is asking about comparing values with type coercion in JavaScript.

  • In JavaScript, the == operator compares values with type coercion, meaning it will convert the operands to the same type before making the comparison.

  • For example, 1 == '1' will return true because the string '1' is converted to a number before comparison.

  • However, 1 === '1' will return false because the strict equality operator (===) does not perform type coercion.

Q81. Why you want to join xircls?

Ans.

I want to join xircls because of their innovative projects and collaborative team environment.

  • Exciting projects that push boundaries

  • Collaborative team environment

  • Opportunity for growth and learning

Q82. Which is props in React?

Ans.

Props in React are used to pass data from a parent component to a child component.

  • Props are read-only and cannot be modified by the child component.

  • Props are passed down the component tree.

  • Props can be any type of data, such as strings, numbers, arrays, or objects.

  • Example:

Q83. What are hooks in React?

Ans.

Hooks in React are functions that let you use state and other React features without writing a class.

  • Hooks were introduced in React 16.8 to allow developers to use state and other React features in functional components.

  • Some commonly used hooks are useState, useEffect, useContext, and useReducer.

  • Hooks are used to manage state, perform side effects, and access context in functional components.

  • Example: const [count, setCount] = useState(0);

Q84. Explain about searching algorithms

Ans.

Searching algorithms are used to find a specific item or value in a collection of data.

  • Linear search checks each item in the collection until the target value is found.

  • Binary search divides the collection in half and checks if the target value is in the lower or upper half.

  • Hash tables use a hash function to map the target value to an index in an array.

  • Depth-first search and breadth-first search are used to traverse graphs and trees to find a specific node or path.

Q85. Implement a game with vanilla js

Ans.

Implement a game using vanilla js

  • Use HTML, CSS, and JavaScript to create the game

  • Implement game logic such as player movement, scoring, and win conditions

  • Utilize event listeners and DOM manipulation for interactivity

Q86. Implement a login page with vanilla js

Ans.

Implementing a login page using vanilla JavaScript

  • Create HTML form with input fields for username and password

  • Use JavaScript to validate user input and handle form submission

  • Implement logic to check if username and password are correct

  • Display appropriate messages for successful or failed login attempts

Q87. Difference between java and c++

Ans.

Java is an object-oriented programming language while C++ is a general-purpose programming language.

  • Java is platform-independent while C++ is platform-dependent.

  • Java has automatic garbage collection while C++ requires manual memory management.

  • Java has a simpler syntax compared to C++.

  • Java has built-in support for multithreading while C++ requires external libraries.

  • C++ allows for low-level memory manipulation while Java does not.

Q88. What are Angular Pipes?

Ans.

Angular Pipes are used to transform data in Angular templates.

  • Angular Pipes are used to format data before displaying it in the view.

  • They can be used to transform strings, numbers, dates, and other types of data.

  • Common built-in pipes include DatePipe, UpperCasePipe, LowerCasePipe, and CurrencyPipe.

  • Custom pipes can also be created to suit specific formatting needs.

Q89. Explain Lifecycle components in React?

Ans.

Lifecycle components in React are methods that are automatically called at specific points in a component's life cycle.

  • Lifecycle methods include componentDidMount, componentDidUpdate, componentWillUnmount, etc.

  • componentDidMount is called after the component is rendered for the first time.

  • componentDidUpdate is called after the component's state or props change.

  • componentWillUnmount is called before the component is removed from the DOM.

Q90. The angle between hands of the clock

Ans.

The angle between the hands of a clock can be calculated using the formula |30H - 11/2M| where H is the hour and M is the minute.

  • Calculate the angle using the formula |30H - 11/2M|

  • Consider the smaller angle between the hands

  • For example, at 3:15, the angle would be |30*3 - 11/2*15| = 7.5 degrees

Q91. what is sql and its uses.

Ans.

SQL is a programming language used for managing and manipulating relational databases.

  • SQL stands for Structured Query Language

  • It is used to retrieve and manipulate data in relational databases

  • Common SQL commands include SELECT, INSERT, UPDATE, DELETE

  • Examples of SQL database systems include MySQL, PostgreSQL, Oracle

Q92. Dom manipulation in js

Ans.

DOM manipulation in JavaScript involves accessing and modifying elements on a webpage.

  • Use document.getElementById() to access an element by its id

  • Use document.querySelector() to access an element using CSS selectors

  • Use element.innerHTML to change the content of an element

  • Use element.style to change the styling of an element

Q93. What is IIFE in Javascript

Ans.

IIFE stands for Immediately Invoked Function Expression. It is a JavaScript function that is executed as soon as it is defined.

  • IIFE is a way to create a self-contained scope in JavaScript.

  • It helps in avoiding naming conflicts and polluting the global namespace.

  • IIFE is defined and invoked at the same time using parentheses.

  • It is commonly used to encapsulate code and create modules in JavaScript.

Q94. Please tell me about the PWAs?

Ans.

PWAs are web applications that use modern web capabilities to provide a user experience similar to that of mobile apps.

  • PWAs can work offline or on low-quality networks

  • They can be installed on a user's device like a native app

  • PWAs are responsive and provide a seamless user experience

  • They are built using web technologies like HTML, CSS, and JavaScript

  • Examples of PWAs include Twitter Lite, Pinterest, and Starbucks

Q95. How many tag in html

Ans.

There are around 140 HTML tags available for use in web development.

  • There are basic tags like <html>, <head>, <body>, <title>, <p>, <div>, <span>, <img>, <a>, <ul>, <ol>, <li>, <table>, <tr>, <td>, <th>, <form>, <input>, <button>, <label>, <select>, <option>, <textarea>, <br>, <hr>, <strong>, <em>, <h1> to <h6>, <blockquote>, <cite>, <code>, <pre>, <abbr>, <address>, <b>, <i>, <small>, <sub>, <sup>, <del>, <ins>, <kbd>, <samp>, <var>, <mark>, <time>, <q>, <dfn>, <u>, <s>, <st...read more

Q96. What is set in js

Ans.

Set in JavaScript is a collection of unique values, similar to an array but with no duplicate elements.

  • Sets are used to store unique values of any type

  • Elements in a set can be added, removed, and checked for existence

  • Example: let mySet = new Set([1, 2, 3, 4, 5])

Q97. What is event bubbling

Ans.

Event bubbling is the process where an event triggered on a child element is propagated up to its parent elements.

  • Events triggered on child elements will also trigger the same event on parent elements

  • Event bubbling allows for delegation of event handling to a parent element

  • Can be controlled using event.stopPropagation() method

Q98. What is react dom?

Ans.

React DOM is a package that provides DOM-specific methods that can be used to render React components.

  • React DOM is used to render React components in the DOM.

  • It provides methods like ReactDOM.render() to render components.

  • React DOM takes care of updating the DOM to match the React components.

Q99. Convert roman to int number

Ans.

Convert roman to int number

  • Create a dictionary of roman numerals and their integer values

  • Iterate through the roman numeral string and add corresponding integer values

  • Subtract twice the value of previous numeral if it is smaller than current numeral

Q100. Reverse an array in JS ?

Ans.

Use the reverse() method to reverse an array in JavaScript.

  • Use the reverse() method on the array to reverse its elements in place.

  • Example: const arr = ['apple', 'banana', 'cherry']; arr.reverse(); // ['cherry', 'banana', 'apple']

Previous
1
2
3
Next
Interview Tips & Stories
Ace your next interview with expert advice and inspiring stories

Interview experiences of popular companies

3.7
 • 10.4k Interviews
3.7
 • 5.6k Interviews
3.5
 • 3.8k Interviews
3.9
 • 545 Interviews
3.8
 • 12 Interviews
2.7
 • 7 Interviews
View all

Calculate your in-hand salary

Confused about how your in-hand salary is calculated? Enter your annual salary (CTC) and get your in-hand salary

Frontend Developer Intern Interview Questions
Share an Interview
Stay ahead in your career. Get AmbitionBox app
qr-code
Helping over 1 Crore job seekers every month in choosing their right fit company
65 L+

Reviews

4 L+

Interviews

4 Cr+

Salaries

1 Cr+

Users/Month

Contribute to help millions

Made with ❤️ in India. Trademarks belong to their respective owners. All rights reserved © 2024 Info Edge (India) Ltd.

Follow us
  • Youtube
  • Instagram
  • LinkedIn
  • Facebook
  • Twitter