100+ Front end Developer Interview Questions and Answers for Freshers

Check if a given singly linked list of integers is a palindrome or not.

• Create a function to reverse the linked list.

• Use two pointers to find the middle of the linked list.

• Compare the first half of the linked list with the reversed second half to determine if it's a palindrome.

Allocate books to students in a way that minimizes the maximum number of pages assigned to a student.

• Iterate through possible allocations and calculate the maximum pages assigned to a student.

• Find the minimum of these maximums to get the optimal allocation.

• Return the minimum pages allocated in each test case, or -1 if not possible.

Rearrange a linked list such that odd numbers appear before even numbers while preserving the order.

• Create two separate linked lists for odd and even numbers

• Traverse the original list and append nodes to respective odd/even lists

• Combine the odd and even lists while maintaining the order

• Return the rearranged linked list

Find the magic index in a sorted array where A[i] = i.

• Iterate through the array and check if A[i] = i for each index i.

• Since the array is sorted, you can optimize the search using binary search.

• Return the index if found, else return -1.

Find the most frequent word in a paragraph that is not in a list of banned words.

• Split the paragraph into words and convert them to uppercase for case-insensitivity.

• Count the frequency of each word, excluding banned words.

• Return the word with the highest frequency in uppercase.

Given a sorted alien dictionary in an array of strings, determine the character order of the alien language.

• Iterate through the words in the dictionary to build a graph of character dependencies.

• Perform a topological sort on the graph to determine the character order.

• Return the character array representing the order of characters in the alien language.

Validate if a given string is a palindrome after removing special characters, spaces, and converting to lowercase.

• Remove special characters and spaces from the input string

• Convert the string to lowercase

• Check if the modified string is equal to its reverse to determine if it's a palindrome

Find the postorder successor of a node in a binary tree.

• Traverse the binary tree in postorder to get the sequence.

• Find the index of the node 'M' in the postorder sequence.

• Return the element at the next index as the postorder successor.

• If 'M' is the last element in the sequence, return -1 as there is no successor.

Find all Jumping Numbers smaller than or equal to a given positive integer N.

• Iterate through numbers from 0 to N and check if each number is a Jumping Number.

• For each number, check if the absolute difference between adjacent digits is 1.

• Include all single-digit numbers as Jumping Numbers.

• Output the list of Jumping Numbers that are smaller than or equal to N.

Javascript is single-threaded.

• Javascript runs on a single thread called the event loop.

• This means that it can only execute one task at a time.

• However, it can delegate tasks to other threads using web workers.

• This allows for parallel processing without blocking the main thread.

Functional components and class components are not the same in React. Functional components are simpler and more lightweight, while class components have additional features like state and lifecycle methods.

• Functional components are stateless and are just JavaScript functions that return JSX.

• Class components have access to state and lifecycle methods like componentDidMount and componentDidUpdate.

• Functional components are easier to read and test, while class components can be ...read more

The process of building a front-end project involves planning, designing, coding, testing, and deploying.

• Gather requirements and create a project plan

• Design the user interface using tools like Figma or Sketch

• Code the front-end using HTML, CSS, and JavaScript

• Test the project for bugs and usability

• Deploy the project to a web server or hosting platform

The 'this' operator refers to the object that is currently executing the code.

• The value of 'this' depends on how a function is called.

• In a method, 'this' refers to the object that owns the method.

• In a regular function, 'this' refers to the global object (window in a browser).

• In an event handler, 'this' refers to the element that received the event.

• The value of 'this' can be explicitly set using call(), apply(), or bind() methods.

To center 3 divs vertically and horizontally, use flexbox and align-items/justify-content properties.

• Wrap the 3 divs in a parent container

• Set the parent container's display property to flex

• Set the parent container's align-items and justify-content properties to center

React lifecycle methods are functions that are called at different stages of a component's life.

• Mounting: constructor(), render(), componentDidMount()

• Updating: render(), componentDidUpdate()

• Unmounting: componentWillUnmount()

• Error Handling: componentDidCatch()

Count the number of words in given strings of array using higher order function.

• Use the map function to transform each string into an array of words

• Use the reduce function to count the total number of words in all strings

• Handle edge cases such as empty strings or strings with leading/trailing spaces

I built a responsive web application for managing tasks and deadlines.

• Used HTML, CSS, and JavaScript to create the frontend

• Implemented drag and drop functionality for task organization

• Integrated a calendar API for deadline tracking

The style of the id will apply first before the style of the class.

• IDs have higher specificity than classes, so the style of the id will take precedence over the style of the class.

• If both id and class have conflicting styles, the style of the id will be applied.

• Example: <div id='uniqueId' class='commonClass'>...</div> - the style of 'uniqueId' will be applied.

Interceptors are middleware functions that can be used to intercept and modify HTTP requests and responses.

• Interceptors can be used in Angular to modify requests before they are sent to the server or responses before they are delivered to the application.

• To add an interceptor for only selected requests, you can create a custom interceptor class that implements the HttpInterceptor interface and then provide it in the HTTP_INTERCEPTORS multi-provider array.

• You can then use cond...read more

To fetch an API with proper error handling and async await, use try-catch block and await keyword.

• Use the fetch() function to make the API request.

• Wrap the fetch() call in a try-catch block to handle errors.

• Use the await keyword before the fetch() call to wait for the response.

• Check the response status code to handle different scenarios.

• Handle any errors or exceptions that may occur during the API request.

Yes, span is a tag in HTML used to apply styles to inline elements.

• Span is an inline element used to apply styles to a specific section of text or content.

• It does not add any extra space or line breaks.

• Example: <span style='color: red;'>This text will be red</span>

World Wide Web

• Stands for World Wide Web

• A system of interlinked hypertext documents accessed via the Internet

• Commonly used to browse websites and access information

Using flexible units like percentages and viewport units, along with fluid layouts and max-width properties.

• Use percentages for widths instead of fixed pixels

• Use viewport units like vw and vh for font sizes and container dimensions

• Implement fluid layouts that adjust based on screen size

• Set max-width properties to prevent content from becoming too wide on larger screens

Mobile numbers are typically 10 digits long to ensure uniqueness and standardization for easy identification and communication.

• Standardization: Having a fixed length of 10 digits makes it easier for systems to validate and process mobile numbers.

• Uniqueness: With 10 digits, there are a large number of possible combinations, reducing the likelihood of duplicate numbers.

• International compatibility: Many countries have adopted 10-digit mobile numbers as a standard format for easy...read more

Padding is the space inside an element, while spacing is the space around an element.

• Padding is the space inside an element, between the content and the border.

• Spacing refers to the space around an element, including margins and borders.

• Padding can be adjusted using CSS properties like padding-top, padding-bottom, etc.

• Spacing can be adjusted using CSS properties like margin-top, margin-bottom, etc.

Experienced front end developer with SQL skills. SQL query to list employees above age 23.

• Use SELECT statement to retrieve data from employees table

• Use WHERE clause to filter employees above age 23

• Example: SELECT * FROM employees WHERE age > 23;

Components in React are reusable, independent pieces of code that manage their own state and can be composed together to build complex user interfaces.

• Components are the building blocks of React applications

• They can be class components or functional components

• Components can have their own state and lifecycle methods

• Components can be reused throughout the application

• Example:

  , ,

React is reusable because it allows developers to create components that can be easily reused throughout an application.

• React components can be easily reused in different parts of an application, saving time and effort.

• Components can be composed together to build complex UIs, promoting reusability.

• React's virtual DOM efficiently updates only the components that have changed, improving performance and reusability.

To center an item without flex and grid, use text-align center for inline elements and margin auto for block elements.

• For inline elements, use text-align: center on the parent element

• For block elements, use margin: 0 auto on the element you want to center

• For inline-block elements, set text-align: center on the parent and display: inline-block on the child

The 'this' keyword refers to the current object and is used to access its properties and methods.

• Used to refer to the current object in a method or constructor

• Can be used to call another constructor in the same class

• Can be used to call a method of the same object

• Can be used to call a method of a parent object

• Can be used to bind a function to a specific object

Data can be passed between components in Angular using input properties, output properties, services, and state management libraries like NgRx.

• Use input properties to pass data from parent to child components

• Use output properties to emit events from child to parent components

• Use services to create a shared data service that can be injected into multiple components

• Use state management libraries like NgRx for managing application state and sharing data between components

You can make a button disabled on click by adding a click event listener and setting the 'disabled' attribute.

• Add a click event listener to the button element

• Inside the event listener function, set the 'disabled' attribute of the button to true

Background position in CSS is used to specify the starting position of a background image.

• Background position can be set using keywords like top, bottom, left, right, center, or using specific pixel or percentage values.

• Example: background-position: top right;

• Example: background-position: 50% 50%;

Event bubbling is the process in which an event triggered on a nested element is also triggered on its parent elements.

• Events in JavaScript propagate from the innermost element to the outermost element.

• During event bubbling, the event is first handled by the innermost element and then propagated to its parent elements.

• This allows for event delegation, where a single event handler can be used to handle events on multiple elements.

• Event.stopPropagation() can be used to stop the...read more

Web development is like building a house on the internet where people can visit and do things.

• Web development is creating websites and web applications using programming languages like HTML, CSS, and JavaScript.

• It involves designing how the website looks and works, and making sure it works well on different devices like computers and phones.

• Examples of web development include creating a website for a business, an online store, or a social media platform.

The typeof() method in JavaScript returns the data type of a variable or expression.

• typeof() returns a string indicating the type of the operand.

• It can be used with variables, literals, or expressions.

• Common return values include 'number', 'string', 'boolean', 'object', 'function', and 'undefined'.

HTML has versions like HTML4, HTML5, XHTML. CSS has versions like CSS1, CSS2, CSS3.

• HTML versions include HTML4, HTML5, and XHTML

• CSS versions include CSS1, CSS2, and CSS3

• HTML5 is the latest version with new features like semantic elements and multimedia support

• CSS3 introduced new features like animations, transitions, and media queries

Angular is a full-fledged framework while React is a library for building UI components.

• Angular is a complete solution for building web applications while React is focused on building UI components.

• Angular uses two-way data binding while React uses one-way data flow.

• Angular has a steeper learning curve while React is easier to learn.

• Angular has a larger file size while React has a smaller file size.

• Angular has a more opinionated approach while React is more flexible.

• Angular h...read more

Block elements take up the full width available, while inline-block elements only take up as much width as necessary.

• Block elements start on a new line and take up the full width available (e.g. <div>).

• Inline-block elements do not start on a new line and only take up as much width as necessary (e.g. <span>).

• Block elements can have margins and padding applied to all four sides, while inline-block elements only have horizontal margins and padding.

Props are used to pass data from a parent component to a child component, while state is used to manage data within a component.

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

• State is mutable and can be updated using setState()

• Props are passed down from parent to child components

• State is managed within a component and can be changed based on user interactions or other events

useMemo is a hook in React that memoizes the result of a function and returns the cached value when the inputs don't change.

• useMemo is used to optimize performance by avoiding unnecessary re-renders.

• It takes two arguments: a function that returns a value and an array of dependencies.

• If any of the dependencies change, the function is re-executed and the new value is cached.

• Example: useMemo(() => expensiveFunction(a, b), [a, b])

• Useful for expensive calculations or when passing ...read more

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

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

• The content area is where the actual content of the element is displayed.

• Padding is the space between the content and the border.

• Border is a line that surrounds the padding and content.

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

• The box model allows for precise control over the layout...read more

Fallback in lazy loading is important for optimizing API calls to ensure a smooth user experience.

• Implementing a loading spinner or placeholder while content is being loaded asynchronously

• Using a default value or cached data if the API call fails

• Implementing error handling to gracefully handle any issues with the API call

I manage work load pressure by prioritizing tasks, setting realistic deadlines, and taking breaks to avoid burnout.

• Prioritize tasks based on deadlines and importance

• Break down tasks into smaller, manageable chunks

• Set realistic deadlines and communicate with team members if needed

• Take short breaks to avoid burnout and maintain productivity

Async await is used for handling asynchronous operations in JavaScript. Promises are used for handling asynchronous tasks and managing their results.

• Async await is used to handle asynchronous operations in JavaScript by allowing code to wait until a promise is resolved.

• Promises are used to handle asynchronous tasks and manage their results by providing a way to handle success and failure.

• Async await can be used with promises to make asynchronous code more readable and easier ...read more

Use CSS and JavaScript to create hide and show functionality on elements.

• Use CSS display property to hide and show elements

• Toggle classes with JavaScript to control visibility

• Utilize event listeners to trigger hide and show actions

A promise in JavaScript represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

• Promises are objects that represent the eventual completion (or failure) of an asynchronous operation.

• They can be in one of three states: pending, fulfilled, or rejected.

• Promises can be chained using .then() to handle success and failure.

• Example: new Promise((resolve, reject) => { ... }).then(result => { ... }).catch(error => { ... });