Question 1

How would you create a sticky footer that stays at the bottom of the viewport when content is short, but moves down when content is long? Explain multiple approaches.

Accepted Answer

The sticky footer problem is a classic CSS challenge. The footer should stick to the bottom of the viewport when there is not enough content to push it down, but should move below the content when there is more content than fits on the screen.

The Flexbox approach is the most common modern solution. The structure has a wrapper containing a main content area and a footer. Set the wrapper to display flex with flex-direction column and min-height of one hundred viewport height. Set the main content area to flex-grow one, which makes it expand to fill available space. The footer stays at its na

Question 2

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 3

What is Flexbox, and when would you use it?

Accepted Answer

Flexbox, or the Flexible Box Layout, is a CSS layout model designed for arranging items in one dimension, either as a row or a column.

To use Flexbox, set display: flex on a container element. The direct children become flex items that you can align, distribute, and size flexibly.

Key properties on the container include flex-direction to set the main axis, justify-content to align items along the main axis, align-items to align items along the cross axis, and gap to add spacing between items.

Key properties on items include flex-grow to control how items expand, flex-shrink to control

Question 4

What is CSS Grid, and how does it differ from Flexbox?

Accepted Answer

CSS Grid is a two-dimensional layout system that lets you control both rows and columns simultaneously. It excels at creating complex page layouts.

To use Grid, set display: grid on a container and define the grid structure with grid-template-columns and grid-template-rows:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

The fr unit represents a fraction of available space. In the example, the middle column takes twice the space of the side columns.

You can place items explicitly using grid-column and grid

Question 5

What are the different types of tests in frontend development? Explain the difference between unit tests, integration tests, and end-to-end tests.

Accepted Answer

In frontend development, there are three main levels of tests, often represented as a pyramid.

Unit tests verify the behavior of an isolated unit of code, usually a function or component. They are fast, numerous, and form the base of the pyramid.

function formatPrice(price) {
  return price.toFixed(2) + ' dollars';
}

test('formats price with two decimals', () => {
  expect(formatPrice(19.5)).toBe('19.50 dollars');
});

For React components, you test a component alone, without its real dependencies.

Integration tests verify that multiple units work correctly together. They are

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 is the JavaScript event loop, and how does it handle asynchronous operations?

Accepted Answer

The event loop is the mechanism that allows JavaScript to perform non-blocking operations despite being single-threaded. It continuously checks if the call stack is empty, and if so, moves callbacks from the task queues to the stack.

Here is how it works. JavaScript has a call stack where function executions are tracked. When you call a function, it goes on the stack. When it returns, it comes off.

For asynchronous operations like setTimeout, fetch, or event listeners, JavaScript delegates these to the browser's Web APIs. The main thread continues executing other code. When the async ope

Question 8

Explain prototypal inheritance in JavaScript. How does it differ from classical inheritance?

Accepted Answer

Prototypal inheritance is JavaScript's mechanism for objects to inherit properties and methods from other objects. Every object has an internal link to another object called its prototype.

When you access a property on an object, JavaScript first looks at the object itself. If the property is not found, it looks at the object's prototype. This continues up the prototype chain until the property is found or the chain ends at null.

Here is a simple example. When you create an array with const arr = [1, 2, 3], the array object inherits methods like map, filter, and forEach from Array.protot

Question 9

What is the useEffect hook, and how do you control when it runs?

Accepted Answer

The useEffect hook lets you perform side effects in function components. Side effects include data fetching, subscriptions, manually changing the DOM, and timers.

useEffect takes two arguments: a function containing the effect, and an optional dependency array.

The dependency array controls when the effect runs. If you pass an empty array, the effect runs only once after the initial render, similar to componentDidMount. If you pass an array with values, the effect runs whenever any of those values change. If you omit the array entirely, the effect runs after every render.

Here is a ba

Question 10

When would you choose useReducer over useState?

Accepted Answer

Both useState and useReducer manage state in React components, but they suit different scenarios.

useState is simpler and works well for independent pieces of state with straightforward updates. Use it for toggles, form inputs, counters, and simple values.

useReducer is better when state logic is complex, when the next state depends on the previous state, or when you have multiple sub-values that update together.

Consider useReducer when you have related state transitions. For example, a form with loading, error, and data states benefits from a reducer:

const reducer = (state, acti

Frontend Developer

Topics

HTML/CSS Fundamentals

CSS & Responsive Design

Testing Basics

JavaScript Fundamentals

React & Hooks

Mock Interview

Quick Stats