Broadridge Frontend Developer Interview Experience (Part 1 — Easy)

Overview

This document outlines a candidate's experience during a frontend developer interview at Broadridge. The interview process consisted of four distinct rounds designed to evaluate the candidate's technical proficiency and behavioral attributes.

Interview Rounds

The interview process was structured as follows:

1. Screening
2. Technical Interview
3. Technical Interview - 2
4. Behavioral Round

Screening Round

The candidate received an initial screening call from a recruiting agency. This round focused on gathering information about the candidate's:

• Background and career journey
• Technical skills and experience

Following the screening, the candidate advanced to the first technical round.

Technical Interview

This round commenced with the candidate providing a self-introduction. The interviewer then proceeded with technical questions pertaining to HTML, CSS, React, and JavaScript. Key questions included:

CSS Questions

• What is the difference between static, relative, and absolute positioning in CSS?
• What is the difference between none, block, inline-block, flex, and grid in the CSS display property?
• How does CSS overriding work, and what are the different ways to override styles in CSS?
• What is !important in CSS, and how does it affect style overriding?
• If a parent <div> has a white background and a child <div> has a black background, which background color will be applied to the child, and why?
• If a parent <div> has a text color of white and the child <div> has a text color of black, which text color will be applied to the child, and why?
• If a <div> has two classes, one specifying black text color and the other specifying red text color, which text color will be applied, and why?
• If a <div> has two classes, one specifying black text color with !important and the other specifying red text color without !important, which text color will be applied, and why?
• What is Responsive Web Design (RWD), and what are some techniques used to achieve it?
• How can you optimize CSS for better performance, and what best practices should be followed?
• Has the candidate worked with any CSS preprocessors like SASS or LESS? What are their advantages?
• What is the difference between SCSS and SASS, and when would the candidate use one over the other?
• What is the float property in CSS, and how does it affect the layout of elements?

JavaScript Questions

• What are some of the latest features introduced in JavaScript, and how do they improve the language?
• What are map(), reduce(), and filter() in JavaScript? What is their syntax, and what do they return?
• What is JavaScript, and how does it relate to ECMAScript?
• What are arrow functions in JavaScript, and how do they differ from regular functions?
• What is the this keyword in JavaScript, and how does its behavior vary in different contexts?

React Questions

• What is the difference between class components and functional components in React, and when should the candidate use each?
• What are useState and useEffect hooks in React, and how are they used?
• What are React lifecycle methods, and how do they differ between class components and functional components?
• What is the useRef hook in React, and how can it be used?
• If a parent component sends a function as a prop to a child component, but state changes in the parent do not trigger a re-render in the child, why does this happen? How can it be resolved?
• How can the candidate optimize performance in React.js, and what best practices should be followed to prevent unnecessary re-renders?

Build Tools & Optimization Questions

• What are Webpack and Parcel, and how do they compare in terms of performance and ease of use?
• What is bundle size in web development, and how can the candidate optimize it for better performance?

Other Frontend Concepts Questions

• What is an <iframe> in HTML, and how is it used? What are the security concerns associated with iframes?
• What are mapStateToProps and mapDispatchToProps in Redux, and how do they work in connecting a React component to the Redux store?
• Where does the candidate typically deploy their React applications, and what hosting services have they used?

Key Takeaways

The first technical round covered a broad range of frontend topics, requiring the candidate to demonstrate both knowledge and problem-solving skills. This interview served as a thorough assessment of the candidate's fundamental understanding of core frontend technologies.