Skip to content
Frontend Development
All coursesPlacement Report
‹ Back to previous sectionCourse homeAll page URLs

Frontend Development Interview Questions in Bangalore

36 practice questions with answers for Frontend Development interviews in Bangalore.

Frontend Development jobs in Bangalore

Bangalore (Bengaluru) is India's largest technology hub, with global product companies, engineering centres, unicorn start-ups and big IT-services campuses. Product-company interviews here are usually deeper, with more scenario, design and hands-on rounds.

Below are 36 questions that match the mix of service, product and domain employers hiring frontend developers in Bangalore.

Solved for BangaloreStart practicing
3 QUESTIONS FREESign up to unlock the full question bank and track your progress.Unlock every question and answer, then continue practising company-wise and package-wise.
3 questions free Unlock the rest in seconds
01

What are design tokens?

CSS Architecture and AccessibilityMedium
Save to ▾
Show answer
Design tokens are named values for design decisions, such as color-primary, space-4 or radius-md, stored in one place and shared by designers and developers. They are often kept in JSON and converted into CSS custom properties, Tailwind theme values or mobile platform formats. Changing a token updates every component consistently, which makes rebranding or dark mode much easier than hunting hard-coded values.
02

What is Interaction to Next Paint and what usually makes it poor?

Web PerformanceMedium
Save to ▾
Show answer
INP replaced First Input Delay in 2024. It measures the delay from a click, tap or key press until the next frame is painted, across all interactions on the page, reporting roughly the worst one. Poor INP usually comes from long JavaScript tasks blocking the main thread, heavy event handlers, large re-renders and expensive layout work after interaction. Breaking up tasks and showing immediate visual feedback improves it.
03

Move a heavy calculation into a Web Worker.

Browser APIsMedium
Save to ▾
Show answer
The worker runs on its own thread and talks through messages: // worker.js self.onmessage = (e) => { const total = e.data.reduce((sum, row) => sum + row.amount, 0); self.postMessage(total); }; // main.js const worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' }); worker.postMessage(bigArrayOfRows); worker.onmessage = (e) => showTotal(e.data); The UI stays responsive. Data is copied between threads, so for huge binary data use transferable objects like ArrayBuffer.
04

In a single-page app, the back button takes users out of the site instead of to the previous filter. Why?

Browser APIsMedium
Save to ▾
Show answer
The app changes the view without adding history entries, so the browser has nothing to go back to within the site. Each meaningful navigation, like changing a category or opening a product, should call pushState or the router's navigate function, while minor changes such as typing in search can use replaceState. The app must also listen to popstate and restore the view and scroll position from the URL.
05

What are Core Web Vitals and their good thresholds?

Web PerformanceEasy
Save to ▾
Show answer
Core Web Vitals are Google's user experience metrics measured from real users. Largest Contentful Paint measures loading and should be 2.5 seconds or less. Interaction to Next Paint measures responsiveness and should be 200 milliseconds or less. Cumulative Layout Shift measures visual stability and should be 0.1 or less. A page passes when at least 75 percent of visits meet each threshold, and they influence search ranking.
06

What is the difference between a Web Worker and a Service Worker?

Browser APIsMedium
Save to ▾
Show answer
A Web Worker runs JavaScript on a background thread for a single page, used for heavy computations like parsing files or image processing without freezing the UI. A Service Worker sits between the page and the network for an entire origin, intercepting requests to enable offline support, caching and push notifications. It has a lifecycle of install, activate and fetch, and it works only over HTTPS.
07

How have you built a testing culture in a frontend team?

Frontend TestingHard
Save to ▾
Show answer
Situation: my team had almost no automated tests and frequent regressions. Task: as tech lead, I wanted testing to become a habit, not a mandate. Action: I set up Vitest and Playwright with examples, ran two short workshops, required tests only for bug fixes at first, and celebrated bugs caught in CI. Result: within six months, most pull requests included tests and production regressions dropped significantly.
08

Set up ESLint with the flat config for a TypeScript project.

Build Tools and ToolingMedium
Save to ▾
Show answer
Install packages and create eslint.config.js: // npm i -D eslint @eslint/js typescript-eslint import js from '@eslint/js'; import tseslint from 'typescript-eslint'; export default tseslint.config( js.configs.recommended, ...tseslint.configs.recommended, { rules: { '@typescript-eslint/no-explicit-any': 'warn', 'no-console': ['warn', { allow: ['error'] }] } }, { ignores: ['dist/'] } ); Run npx eslint . locally and in CI. Leave formatting to Prettier so the two tools do not conflict.
09

What are declaration files (.d.ts) and when do you write them?

TypeScriptMedium
Save to ▾
Show answer
Declaration files describe the types of JavaScript code without containing implementation. Libraries ship them so TypeScript users get type checking, and many come from DefinitelyTyped as @types packages. You write your own when using an untyped library, declaring global variables injected by scripts, or typing non-code imports like declare module '*.svg'. Generating them with declaration: true is standard when publishing a TypeScript library.
10

Explain optional chaining and the nullish coalescing operator.

Modern JavaScriptEasy
Save to ▾
Show answer
Optional chaining ?. stops evaluation and returns undefined if the value before it is null or undefined, so user?.address?.pincode never throws. Nullish coalescing ?? returns the right side only when the left is null or undefined, unlike || which also replaces 0, false and empty strings. For example, const qty = input ?? 1 keeps a valid 0, while input || 1 would wrongly change 0 into 1.
11

Tailwind classes built dynamically like 'bg-' + colour work locally but are missing in production. Why?

CSS Architecture and AccessibilityMedium
Save to ▾
Show answer
Tailwind finds classes by scanning source files for complete strings, so a class assembled at runtime never appears in the code and its CSS is not generated. The fix is to map values to full class names, such as const colours = { success: 'bg-green-600', error: 'bg-red-600' }. If truly dynamic values are needed, use inline styles with CSS variables or explicitly safelist those classes.
12

How does type narrowing work in TypeScript?

TypeScriptMedium
Save to ▾
Show answer
Narrowing is how TypeScript refines a broad type to a specific one inside a code branch. It understands typeof checks, instanceof, the in operator, equality checks, truthiness and discriminant properties. For example, inside if (typeof value === 'string') you can call value.toUpperCase(). Custom type guard functions returning value is User extend this to your own checks, and assertion functions narrow after they run.
13

The bundle analyser shows two copies of the same library. How do you fix it?

Build Tools and ToolingHard
Save to ▾
Show answer
Duplicates happen when different packages depend on incompatible versions, so the package manager installs both. I would run npm ls library-name or pnpm why to see who requires which version, then update dependents to a common version, use overrides or resolutions to force one compatible version, or configure resolve.dedupe in Vite. Duplicate framework copies are especially harmful because they can break shared state and context.
14

How would you choose a frontend framework for a new project?

Frontend ArchitectureMedium
Save to ▾
Show answer
I would base it on project needs and team context rather than trends: team experience, hiring market in India, SEO and rendering requirements, ecosystem maturity, long-term support and performance on target devices. React has the largest ecosystem and talent pool, Angular suits large enterprise teams wanting an opinionated structure, Vue is approachable, and Svelte or Astro produce less JavaScript. A small proof of concept helps confirm the choice.
15

Write a fetch wrapper that retries with exponential backoff.

Modern JavaScriptMedium
Save to ▾
Show answer
Retry on network errors and 5xx responses, doubling the delay each time: async function fetchWithRetry(url, options = {}, retries = 3, delay = 500) { try { const res = await fetch(url, options); if (res.status >= 500 && retries > 0) throw new Error('Server ' + res.status); return res; } catch (err) { if (retries === 0) throw err; await new Promise(r => setTimeout(r, delay)); return fetchWithRetry(url, options, retries - 1, delay * 2); } } Do not retry 4xx errors, and only retry idempotent requests.
16

Write a type-safe getProperty function using generics and keyof.

TypeScriptMedium
Save to ▾
Show answer
Constrain the key to the object's own keys: function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] { return obj[key]; } const course = { title: 'Frontend', weeks: 14 }; const weeks = getProperty(course, 'weeks'); // number // getProperty(course, 'price'); // compile error T[K] is an indexed access type, so the return type matches the chosen property. Typos in key names are caught at compile time.
17

Where do you see yourself in five years as a frontend developer?

Frontend ArchitectureEasy
Save to ▾
Show answer
In five years, I want to be a senior frontend engineer who owns complex features end to end and helps shape architecture decisions. I plan to deepen my skills in performance, accessibility and TypeScript, and contribute to a design system. I also want to mentor juniors, because teaching others is how I learned best. I hope to grow within a team where I can take on that responsibility.
18

What is prefers-reduced-motion and why should you respect it?

CSS Architecture and AccessibilityEasy
Save to ▾
Show answer
prefers-reduced-motion is a media query that detects when users have asked their operating system to minimise animation, often because motion causes dizziness or nausea. Inside @media (prefers-reduced-motion: reduce), you should remove or tone down parallax, large transitions and auto-playing animations, while keeping essential feedback such as simple fades. It is a small change that makes interfaces accessible to people with vestibular disorders.
19

What are code splitting and lazy loading?

Web PerformanceEasy
Save to ▾
Show answer
Code splitting breaks a large JavaScript bundle into smaller chunks so the browser downloads only what the current page needs. Lazy loading defers loading code or assets until they are required, using dynamic import() for components like a chart or a rich text editor. Route-based splitting is the most common starting point. It reduces initial download and parse time, which improves LCP and INP on slower devices.
20

After a deployment, some users keep seeing the old version of your PWA. Why?

Browser APIsHard
Save to ▾
Show answer
The old service worker is still controlling the page and serving cached files; a new worker waits until all tabs using the old one are closed. I would version the cache, delete old caches in the activate event, and show an 'Update available' prompt that calls skipWaiting and reloads. The sw.js file itself must be served with no-cache headers so browsers check for updates promptly.
21

What is the difference between lab data and field data in performance?

Web PerformanceMedium
Save to ▾
Show answer
Lab data comes from controlled tests like Lighthouse or WebPageTest on a fixed device and network, which is great for debugging and comparing changes. Field data, or real user monitoring, comes from actual visitors through the Chrome UX Report or your own analytics, capturing real devices, networks and behaviour. Google ranks on field data. A page can score well in the lab but fail in the field on low-end phones.
22

Tell me about a time you pushed back on releasing code without tests.

Frontend TestingMedium
Save to ▾
Show answer
Situation: near a release deadline, a teammate suggested skipping tests for a new checkout coupon feature. Task: I felt the risk to payments was too high. Action: I proposed covering only the critical paths, valid, expired and invalid coupons, and wrote those tests myself in two hours. Result: one test caught a discount rounding bug before release, and the feature shipped on time.
23

What is TypeScript and why do teams adopt it?

TypeScriptEasy
Save to ▾
Show answer
TypeScript is a superset of JavaScript that adds static types and compiles to plain JavaScript. It catches errors such as wrong property names, missing arguments and null access while you type, before the code runs. It also improves editor autocomplete and makes refactoring large codebases safer. Types are erased at runtime, so TypeScript adds no performance cost but needs a build or type-stripping step.
24

Register a service worker that caches static assets with a cache-first strategy.

Browser APIsHard
Save to ▾
Show answer
Register from the page, then handle install and fetch in sw.js: // main.js if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js'); // sw.js const CACHE = 'static-v3'; self.addEventListener('install', e => { e.waitUntil(caches.open(CACHE).then(c => c.addAll(['/', '/app.css', '/app.js']))); }); self.addEventListener('fetch', e => { e.respondWith(caches.match(e.request).then(hit => hit || fetch(e.request))); }); Changing the cache name on each release lets the activate step delete old caches.
25

Keep product filters in sync with the URL query string.

Browser APIsEasy
Save to ▾
Show answer
Read params on load and update them without reload: const params = new URLSearchParams(location.search); const category = params.get('category') ?? 'all'; applyFilters({ category }); function updateFilter(key, value) { const p = new URLSearchParams(location.search); value ? p.set(key, value) : p.delete(key); history.pushState(null, '', '?' + p.toString()); applyFilters(Object.fromEntries(p)); } window.addEventListener('popstate', () => applyFilters(Object.fromEntries(new URLSearchParams(location.search)))); Users can now share and bookmark filtered views.
26

Create a simple custom element with Shadow DOM.

Browser APIsMedium
Save to ▾
Show answer
Extend HTMLElement and register a tag name containing a hyphen: class RatingStars extends HTMLElement { connectedCallback() { const value = Number(this.getAttribute('value') || 0); const root = this.attachShadow({ mode: 'open' }); root.innerHTML = `<style>span { color: var(--star-color, orange); }</style> <span role='img' aria-label='${value} out of 5'>${'*'.repeat(value)}</span>`; } } customElements.define('rating-stars', RatingStars); // usage: <rating-stars value='4'></rating-stars> The custom property lets the page theme it despite Shadow DOM isolation.
27

Add automated accessibility checks to Playwright tests.

Frontend TestingHard
Save to ▾
Show answer
Use the axe-core integration: import { test, expect } from '@playwright/test'; import AxeBuilder from '@axe-core/playwright'; test('home page has no serious accessibility violations', async ({ page }) => { await page.goto('/'); const results = await new AxeBuilder({ page }) .withTags(['wcag2a', 'wcag2aa']) .analyze(); const serious = results.violations.filter(v => ['serious', 'critical'].includes(v.impact)); expect(serious).toEqual([]); }); Automated tools catch only part of accessibility issues, so keyboard and screen reader checks are still needed.
28

What is Hot Module Replacement?

Build Tools and ToolingEasy
Save to ▾
Show answer
Hot Module Replacement updates changed modules in the running app without a full page reload, so you keep current state such as an open modal or form input while editing code. The dev server watches files, sends the update over a WebSocket, and the framework plugin swaps the module. CSS updates apply instantly. If a change cannot be applied safely, the dev server falls back to a full reload.
29

Make an embedded video keep a 16:9 ratio at any width.

CSS Architecture and AccessibilityEasy
Save to ▾
Show answer
The aspect-ratio property replaces the old padding-top hack: .video-embed { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; } .avatar { width: 64px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; } The browser reserves the correct height before the iframe loads, preventing layout shift, and object-fit keeps images from stretching inside fixed ratios.
30

How do you work with QA engineers as a frontend developer?

Frontend TestingEasy
Save to ▾
Show answer
I treat QA as partners rather than gatekeepers. I share feature details and edge cases early, give them testable builds on staging, and add stable test ids or accessible labels that help automation. When bugs come in, I ask for clear steps and environment details instead of arguing. In my last project, this collaboration cut bug reopen rates because we agreed on acceptance criteria before development.
31

Write a Playwright end-to-end test for a login flow.

Frontend TestingMedium
Save to ▾
Show answer
Use role-based locators and web-first assertions: import { test, expect } from '@playwright/test'; test('user can log in and see dashboard', async ({ page }) => { await page.goto('/login'); await page.getByLabel('Email').fill('student@example.com'); await page.getByLabel('Password').fill('Secret@123'); await page.getByRole('button', { name: 'Log in' }).click(); await expect(page).toHaveURL(/dashboard/); await expect(page.getByRole('heading', { name: 'My courses' })).toBeVisible(); }); Assertions auto-wait, so no manual sleeps are needed. Save login state with storageState to reuse in other tests.
32

What is visual regression testing?

Frontend TestingMedium
Save to ▾
Show answer
Visual regression testing captures screenshots of pages or components and compares them pixel by pixel with approved baselines, flagging unexpected visual changes such as broken spacing or wrong colours. Tools include Playwright's toHaveScreenshot, Chromatic with Storybook and Percy. To avoid false failures, run in consistent containers, disable animations, and mask dynamic content like dates. It catches CSS bugs that functional tests miss.
33

State is passed through many component layers and global state has become chaotic. How do you restructure it?

Frontend ArchitectureMedium
Save to ▾
Show answer
I would first classify state: server data moves to a data-fetching cache like TanStack Query, URL-worthy state such as filters moves to query parameters, and truly local state moves back into components. What remains global, like user session and theme, goes into a small, well-defined store or context split by concern. Composition patterns, passing components as children, also remove much prop drilling.
34

Your app must now support an Arabic right-to-left version. What changes are needed in CSS?

CSS Architecture and AccessibilityMedium
Save to ▾
Show answer
I would set dir='rtl' on the html element for that locale and replace physical properties like margin-left, padding-right and left with logical ones such as margin-inline-start and inset-inline-start. Flexbox and Grid follow direction automatically. Directional icons like arrows need flipping with a transform in RTL, while logos and media do not. I would test layouts with real Arabic text, which has different line heights.
35

A third-party library you need has no TypeScript types. What do you do?

TypeScriptMedium
Save to ▾
Show answer
First I check if types exist on DefinitelyTyped by installing @types/library-name. If not, I write a minimal declaration file, for example declare module 'old-chart-lib' with only the functions I use, in a types folder included by tsconfig. This is better than a blanket any import. If the library is important to the community, contributing those types upstream helps everyone.
36

What are CSS logical properties?

CSS Architecture and AccessibilityMedium
Save to ▾
Show answer
Logical properties describe layout relative to the writing direction instead of physical sides. margin-inline-start means left in English but right in Arabic or Urdu, and padding-block maps to top and bottom in horizontal text. Using them, with the dir attribute on html, lets one stylesheet support both left-to-right and right-to-left languages without overrides. Sizes like inline-size replace width in the same way.

Companies with offices in Bangalore (18)

E-commerce & consumer tech

Flipkart

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Bengaluru, Hyderabad

View questions
E-commerce & consumer tech

Swiggy

Frontend Development interview questions

  • 30 questions
  • 4 rounds

Bengaluru, Hyderabad

View questions
Fintech

Razorpay

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Bengaluru, Mumbai

View questions
Fintech

CRED

Frontend Development interview questions

  • 30 questions
  • 4 rounds

Bengaluru

View questions
E-commerce & consumer tech

Meesho

Frontend Development interview questions

  • 30 questions
  • 4 rounds

Bengaluru

View questions
Fintech

PhonePe

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Bengaluru, Pune

View questions
Fintech

Paytm

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Noida, Bengaluru, Mumbai

View questions
E-commerce & consumer tech

Myntra

Frontend Development interview questions

  • 30 questions
  • 4 rounds

Bengaluru

View questions
E-commerce & consumer tech

MakeMyTrip

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Gurugram, Bengaluru

View questions
Product

Freshworks

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Chennai, Bengaluru, Hyderabad

View questions
Product

Atlassian

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Bengaluru

View questions
Product

Microsoft

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Hyderabad, Bengaluru, Noida +2

View questions
Product

Google

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Bengaluru, Hyderabad, Gurugram +2

View questions
Product

Amazon

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Bengaluru, Hyderabad, Chennai +2

View questions
Product

Adobe

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Noida, Bengaluru, Gurugram

View questions
Consulting

Thoughtworks

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Pune, Bengaluru, Chennai +2

View questions
Consulting

Publicis Sapient

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Gurugram, Noida, Bengaluru

View questions
Product

BrowserStack

Frontend Development interview questions

  • 30 questions
  • 5 rounds

Mumbai, Bengaluru

View questions

Frequently asked questions

Which companies hire Frontend Development professionals in Bangalore?

Companies with large offices in Bangalore include Flipkart, Swiggy, Razorpay, CRED, Meesho, PhonePe, Paytm, Myntra, MakeMyTrip, Freshworks. Use their company pages below to practise employer-specific sets.

Are Frontend Development interviews in Bangalore different from other cities?

The questions depend more on the company than the city. Bangalore's mix of employers decides the style: Product-company interviews here are usually deeper, with more scenario, design and hands-on rounds

How do I find Frontend Development jobs in Bangalore?

Shortlist companies with Bangalore offices, keep your CV focused on Frontend Development projects, apply on company career pages and job portals with the Bangalore filter, and practise the questions on this page before each interview.

Other cities

DelhiNoidaGurgaonHyderabadPuneChennaiMumbaiKolkataAhmedabadJaipurLucknowChandigarhIndoreKochiCoimbatoreBhubaneswarNagpurVisakhapatnamThiruvananthapuram

More ways to practise

Company-wise Frontend Development questionsExperience-wise Frontend Development questionsRole-wise Frontend Development questionsCity-wise Frontend Development questionsMost asked Frontend Development questionsScenario-based questionsPractical / hands-on questionsHR & behavioural questionsFrontend Development mock interviewOnline assessment questionsTechnical round questionsManagerial round questionsFrontend Development topic sheets