Question 1

A CSS style is not applying as expected. Walk me through your debugging process. What are common reasons why styles might not apply, and how do you identify the issue?

Accepted Answer

CSS debugging is a critical skill. When styles do not apply as expected, there is always a logical reason. Here is my systematic approach to finding and fixing the issue.

First, I open browser developer tools and inspect the element. The Styles panel shows which rules are applied and which are overridden. Rules that are struck through have been overridden by something with higher specificity.

The most common causes of unexpected styling are specificity conflicts. Another rule with higher specificity is winning. Look for ID selectors, inline styles, or important declarations that might be

Question 2

Explain the CSS box model. What are its components, and how does the box-sizing property affect how element dimensions are calculated?

Accepted Answer

The CSS box model describes how every HTML element is represented as a rectangular box. Understanding it is fundamental to controlling layout and spacing in CSS.

The box model has four components, from inside to outside. First is the content area, which is where your actual content like text or images appears. The width and height properties control this area by default. Second is the padding, which is the space between the content and the border. Padding is transparent and takes on the element's background color. Third is the border, which surrounds the padding. It can have its own width,

Question 3

What are the different CSS units, and when should you use each?

Accepted Answer

CSS offers many units for sizing elements. Choosing the right unit affects responsiveness and accessibility.

Absolute units have fixed sizes. Pixels, or px, are the most common. One pixel is one device pixel, though high-density screens scale them. Use pixels for borders, shadows, and fixed-size elements.

Relative units scale based on other values.

em is relative to the element's font size. If font-size is 16px, 1em equals 16px. For nested elements, em compounds, which can be confusing.

rem is relative to the root element's font size. 1rem always equals the html font size, typicall

Question 4

What is the difference between pseudo-classes and pseudo-elements in CSS?

Accepted Answer

Pseudo-classes and pseudo-elements extend CSS selectors but serve different purposes.

Pseudo-classes select elements based on state or position. They use a single colon. Common examples include :hover for mouse over, :focus for focused inputs, :first-child and :last-child for position in parent, :nth-child() for patterns, and :disabled for form states.

a:hover { color: blue; }
input:focus { border-color: green; }
li:first-child { font-weight: bold; }

Pseudo-elements select parts of an element or create virtual elements. They use double colons, though single colon works for legacy su

Question 5

Why are automated tests important in frontend development? What are the benefits of testing your code?

Accepted Answer

Automated tests are essential in modern development. They help ensure code quality and prevent regressions.

The main benefits are as follows.

First, early bug detection. Tests catch errors before they reach production. A bug found early costs much less to fix than one discovered by users.

Second, confidence when refactoring. With good test coverage, you can modify code without fear of breaking something. Tests alert you immediately if a change has unexpected effects.

Third, living documentation. Tests describe the expected behavior of your code. A new developer can read tests to un

Question 6

What is Jest and how does it work? Explain the basic syntax for writing a test with Jest.

Accepted Answer

Jest is a JavaScript testing framework developed by Meta, formerly Facebook. It is designed to be simple to configure and use, with a zero configuration philosophy for most projects.

Main characteristics include the following. Jest includes everything you need. A test runner to execute tests, an assertion library to verify results, mocking tools to simulate dependencies, and a code coverage system.

Basic syntax looks like this.

// math.js
function add(a, b) {
  return a + b;
}

// math.test.js
describe('add function', () => {
  test('adds two positive numbers', () => {
    exp

Question 7

What are the differences between var, let, and const in JavaScript, and when should you use each?

Accepted Answer

The three keywords differ along three axes: scope, reassignment, and redeclaration.

Scope is the most consequential. var is function-scoped, meaning it is visible throughout the entire function that contains it regardless of which block it was declared in. Declare it inside an if statement or a for loop and it leaks to the whole function. let and const are block-scoped: they exist only between the nearest pair of braces. Block scoping is what most developers coming from other languages expect, and it prevents a category of accidental collisions.

Reassignment is the difference between let and

Question 8

What is a closure in JavaScript, and can you give a practical example of using one?

Accepted Answer

A closure is a function that remembers the variables from the scope where it was created, and keeps access to them even after that outer function has finished running.

The mechanism is simpler than the definition sounds. When you declare a function inside another function, the inner function keeps a reference to its outer scope. Normally, when a function returns, its local variables become eligible for garbage collection. But if an inner function still references them, they stay alive. That surviving link is the closure.

A small example makes it concrete. A counter function declares a local

Question 9

What problems can arise with useEffect dependencies? How do you avoid infinite loops and missing dependencies?

Accepted Answer

The dependency array tells React when to re-run an effect. It compares each entry to the previous render's value using reference equality, and re-runs if any differ. Almost every useEffect bug comes from that array being wrong in one of two directions.

Missing dependencies produce stale values. If an effect reads a prop or a state value that is not listed, it keeps using whatever that value was when the effect last ran. A search effect that omits the query term keeps searching for the original term. Nothing errors; the feature is just quietly wrong. This is the same stale closure problem that

Question 10

Explain how the useState hook works in React. Why should you never modify state directly?

Accepted Answer

useState adds local state to a function component. You call it with an initial value and it returns a pair: the current value and a setter function. Calling the setter tells React the component needs to re-render, and on that next render useState returns the updated value.

React keeps state outside the component, associated with the component's position in the tree, which is why the value survives re-renders even though the function body runs again from the top every time.

The reason you must never modify state directly is that React decides whether to re-render by comparing the new value to

Frontend Developer

Topics

HTML/CSS Fundamentals

CSS & Responsive Design

Testing Basics

JavaScript Fundamentals

React & Hooks

Mock Interview

Quick Stats