Web Development Interview Questions in Bangalore

Show answer

HTML5 attributes validate input before any JavaScript runs: <input type='text' name='name' required minlength='3' maxlength='50'> <input type='email' name='email' required> <input type='tel' name='mobile' pattern='[6-9][0-9]{9}' title='10 digit mobile number'> <input type='number' name='age' min='18' max='60'> <input type='url' name='portfolio'> The browser blocks submission and shows a message when rules fail. Server-side validation is still mandatory because client checks can be bypassed.

Your frontend on one domain gets a CORS error calling your API on another. How do you resolve it?

Web SecurityMedium

Show answer

The fix belongs on the API server, not the frontend. I would configure it to return Access-Control-Allow-Origin with the exact frontend origin, handle OPTIONS preflight requests with the allowed methods and headers, and add Access-Control-Allow-Credentials: true if cookies are needed. Alternatively, serving the API under the same domain through a reverse proxy, like /api, removes cross-origin calls altogether.

The server's disk is full and the site has stopped saving data. What do you do?

Hosting and DeploymentMedium

Show answer

I would check usage with df -h and find large folders using du -sh /var/* | sort -h. Usual culprits are huge log files, old backups, cached uploads or MySQL binary logs. I would safely clear or compress logs, purge old binlogs with PURGE BINARY LOGS, and move backups off the server. To prevent repeats, set up logrotate, backup retention and disk usage alerts at about 80 percent.

Tell me about a time you disagreed with a designer about a layout.

Show answer

Situation: a designer wanted a five-column pricing table on mobile. Task: I had to deliver the design while keeping it usable on small screens. Action: I built a quick prototype on a real phone, showed that text became unreadable, and proposed a swipeable card version that kept the same visual style. Result: the designer agreed, we updated the Figma file together, and mobile conversions on that page improved after launch.

How would you explain a technical problem to a non-technical client?

DOM and Browser EventsEasy

Show answer

Situation: a client asked why their site was slow on mobile. Task: I needed approval to optimise images, which meant extra work. Action: I avoided jargon, showed a side-by-side video of load times, and compared large images to sending a heavy parcel by post. Result: the client approved the work, load time dropped from 7 to 2.5 seconds, and they trusted my later suggestions more.

Open and close an accessible modal using the native dialog element.

DOM and Browser EventsMedium

Show answer

The dialog element handles focus and the Escape key for you: <button id='open'>Enquire now</button> <dialog id='enquiry'> <form method='dialog'> <p>Thank you for your interest.</p> <button>Close</button> </form> </dialog> <script> const dlg = document.getElementById('enquiry'); document.getElementById('open').addEventListener('click', () => dlg.showModal()); </script> showModal places it in the top layer with a backdrop, and form method='dialog' closes it without a request.

Validate a signup form with JavaScript before submission.

DOM and Browser EventsMedium

Show answer

Check fields on submit and show inline messages: form.addEventListener('submit', (e) => { const errors = []; if (form.name.value.trim().length < 3) errors.push('Name too short'); if (!/^[6-9]\d{9}$/.test(form.mobile.value)) errors.push('Invalid mobile'); if (form.password.value !== form.confirm.value) errors.push('Passwords do not match'); if (errors.length) { e.preventDefault(); errorBox.textContent = errors.join('. '); } }); Client validation improves experience, but the server must validate again.

Why did you choose PHP for backend development?

PHP ProgrammingEasy

Show answer

I chose PHP because it powers a large share of websites, including WordPress, and many Indian agencies and product companies still hire PHP and Laravel developers. It is quick to deploy on almost any hosting. I started with plain PHP to understand requests, sessions and databases, then learned Laravel. In my project, a course enquiry portal, Laravel's validation and Eloquent let me deliver features in half the time.

How do you back up and restore a MySQL database from the command line?

MySQL DatabaseMedium

Show answer

mysqldump creates a logical SQL backup: mysqldump -u root -p --single-transaction --routines school > school_2026_11_12.sql mysql -u root -p school < school_2026_11_12.sql --single-transaction takes a consistent InnoDB snapshot without locking tables. For large databases, physical backup tools or managed cloud snapshots are faster. Backups should be automated, stored off-server, and restored on a test server regularly to prove they work.

Explain the types of cross-site scripting (XSS).

Web SecurityMedium

Show answer

XSS lets an attacker run their JavaScript in another user's browser. Stored XSS saves the payload in the database, such as a malicious comment shown to every visitor. Reflected XSS bounces a payload from a URL parameter straight into the response. DOM-based XSS happens entirely in client code, for example writing location.hash into innerHTML. Defences are context-aware output escaping, safe DOM APIs and a Content Security Policy.

What is a CDN and how does it improve a website?

Hosting and DeploymentMedium

Show answer

A content delivery network caches static files such as images, CSS and JavaScript on servers in many locations, so a user in Chennai is served from a nearby edge rather than a distant origin. This reduces latency, lowers load on your server and absorbs traffic spikes and some DDoS attacks. Cache-Control headers decide how long files stay cached, and versioned filenames let you deploy updates without stale content.

How do arrow functions differ from regular functions?

JavaScript CoreMedium

Show answer

Arrow functions have shorter syntax, an implicit return for single expressions, and no own this, arguments or super; they inherit these from the outer scope. They cannot be used as constructors with new and do not have a prototype property. This makes them ideal for callbacks like array.map, but unsuitable for object methods that need this to refer to the object, or for event handlers that rely on this as the element.

Build a simple PHP endpoint that returns JSON.

Show answer

Set the header, encode the data and use proper status codes: header('Content-Type: application/json'); $id = filter_input(INPUT_GET, 'id', FILTER_VALIDATE_INT); if (!$id) { http_response_code(400); echo json_encode(['error' => 'Invalid id']); exit; } $stmt = $pdo->prepare('SELECT id, name, price FROM courses WHERE id = ?'); $stmt->execute([$id]); $course = $stmt->fetch(PDO::FETCH_ASSOC); http_response_code($course ? 200 : 404); echo json_encode($course ?: ['error' => 'Not found']);

Add CSRF protection to a plain PHP form.

Web SecurityMedium

Show answer

Generate a token per session and compare it safely: session_start(); if (empty($_SESSION['csrf'])) { $_SESSION['csrf'] = bin2hex(random_bytes(32)); } // in the form echo "<input type='hidden' name='csrf' value='" . $_SESSION['csrf'] . "'>"; // on submit if (!hash_equals($_SESSION['csrf'], $_POST['csrf'] ?? '')) { http_response_code(403); exit('Invalid request'); } hash_equals compares in constant time, which avoids timing attacks.

A client wants better Google rankings. What HTML-level changes would you make?

Show answer

I would give every page a unique title and meta description, use exactly one clear h1 with a logical h2 and h3 structure, and add descriptive alt text. I would add canonical tags to avoid duplicate content, structured data such as JSON-LD for courses or FAQs, and internal links with meaningful anchor text. I would also improve Core Web Vitals, since page speed affects ranking.

Users get logged out immediately after login when redirected. What could be wrong?

Show answer

Likely causes are session_start() missing on the next page, output sent before session_start so headers fail, or the session cookie being dropped. Cookie issues include a Secure flag on an HTTP site, a domain mismatch between www and non-www, or SameSite settings during cross-site redirects. I would check the Set-Cookie header in DevTools, verify session.save_path is writable, and redirect to a single canonical domain.

What are CSS custom properties and how are they different from Sass variables?

Show answer

Custom properties like --brand: #2563eb are defined in CSS and read with var(--brand). They cascade, can be changed per element or media query, and can be updated at runtime with JavaScript, which makes themes and dark mode easy. Sass variables are replaced at compile time and do not exist in the browser. Many teams use both: Sass for build-time logic and custom properties for runtime theming.

Click handlers do not work on buttons added after the page loads. Why?

DOM and Browser EventsEasy

Show answer

The listeners were attached with querySelectorAll when the page loaded, so they exist only on the buttons that were present at that moment. New buttons have no listener. The clean fix is event delegation: attach one listener to a stable parent and check event.target.closest('.btn'). Alternatively, attach the listener when creating each new element, but delegation scales better for large lists.

How should passwords be stored in PHP?

Show answer

Never store plain text or use md5 or sha1, which are fast and easily cracked. Use password_hash($password, PASSWORD_DEFAULT), which currently uses bcrypt with an automatic random salt, or PASSWORD_ARGON2ID where available. At login use password_verify($input, $hash). password_needs_rehash lets you upgrade old hashes when the default algorithm or cost changes. The hash column should be VARCHAR(255) to allow future algorithms.

What is ARIA and when should you use it?

Show answer

ARIA (Accessible Rich Internet Applications) adds roles, states and properties like role='dialog', aria-expanded and aria-label so assistive technologies understand custom widgets. The first rule of ARIA is to prefer native HTML elements, because a real button already has keyboard support and the right role. Use ARIA only when building something HTML lacks, such as tabs or a combobox, and keep the states updated with JavaScript.

An attacker uploaded a PHP web shell through the profile picture feature. How did it happen and how do you prevent it?

Web SecurityHard

Show answer

The upload likely trusted the file extension or the browser-sent MIME type and saved files inside a web-accessible folder where PHP executes. To prevent it, verify the real type with finfo, re-encode images with GD or Imagick, rename files randomly with safe extensions, store uploads outside the web root or on object storage, and disable PHP execution in the uploads directory through server configuration.

After moving to HTTPS, browsers show mixed content warnings. How do you fix them?

Web SecurityEasy

Show answer

Mixed content means an HTTPS page still loads images, scripts or styles over plain HTTP, and browsers block or upgrade them. I would find them in the DevTools console, update hard-coded http:// URLs in templates and the database to https:// or relative paths, and fix third-party embeds. Adding the CSP directive upgrade-insecure-requests is a safety net, and HSTS ensures future visits always use HTTPS.

When would you choose Flexbox and when CSS Grid?

Show answer

Flexbox is one-dimensional: it arranges items in a row or a column and is great for navbars, button groups and centering. Grid is two-dimensional: it controls rows and columns together, which suits page layouts, dashboards and card galleries. A common pattern is Grid for the overall page structure and Flexbox inside each component. Both are fully supported in all modern browsers.

What are traits in PHP?

Show answer

Traits allow code reuse across unrelated classes, since PHP supports only single inheritance. You define a trait with methods, such as a Loggable trait with a log() method, and add it to any class using use Loggable;. Conflicts between traits are resolved with insteadof and as. Traits are handy for cross-cutting behaviour like timestamps or soft deletes, but overusing them hides dependencies and makes classes harder to understand.

Write a PHP login script using password_verify and sessions.

Show answer

Fetch the user, verify the hash and regenerate the session id: session_start(); $stmt = $pdo->prepare('SELECT id, password_hash FROM users WHERE email = ?'); $stmt->execute([$_POST['email']]); $user = $stmt->fetch(); if ($user && password_verify($_POST['password'], $user['password_hash'])) { session_regenerate_id(true); $_SESSION['user_id'] = $user['id']; header('Location: /dashboard.php'); exit; } $error = 'Invalid email or password'; Regenerating the id prevents session fixation attacks.

What is the difference between InnoDB and MyISAM?

MySQL DatabaseMedium

Show answer

InnoDB is the default MySQL storage engine. It supports transactions, row-level locking, foreign keys and crash recovery, making it suitable for almost all applications. MyISAM uses table-level locking, has no transactions or foreign keys, and can corrupt on crashes. MyISAM was once faster for read-only workloads, but modern InnoDB matches or beats it. Old tables still on MyISAM should usually be converted.

Write a function that groups an array of students by city.

JavaScript CoreMedium

Show answer

Object.groupBy is available in modern browsers and Node 21+, with reduce as a fallback: const students = [ { name: 'Asha', city: 'Delhi' }, { name: 'Ravi', city: 'Pune' }, { name: 'Neha', city: 'Delhi' } ]; const byCity = Object.groupBy(students, s => s.city); const byCity2 = students.reduce((acc, s) => { (acc[s.city] ||= []).push(s); return acc; }, {}); Both return { Delhi: [...], Pune: [...] }.

What are iterators and generators in JavaScript?

JavaScript CoreHard

Show answer

An iterator is an object with a next() method returning { value, done }, and any object with a Symbol.iterator method can be used in for...of loops and spread syntax. A generator function, written function*, creates iterators easily: each yield pauses execution and returns a value, resuming on the next call. Generators are useful for lazy sequences, such as paginated API results, without building huge arrays in memory.

Create students, courses and enrollments tables with proper keys.

MySQL DatabaseMedium

Show answer

A many-to-many relationship needs a junction table: CREATE TABLE students ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(100) NOT NULL, email VARCHAR(150) NOT NULL UNIQUE ); CREATE TABLE courses ( id INT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(150) NOT NULL ); CREATE TABLE enrollments ( student_id INT, course_id INT, enrolled_on DATE NOT NULL, PRIMARY KEY (student_id, course_id), FOREIGN KEY (student_id) REFERENCES students(id) ON DELETE CASCADE, FOREIGN KEY (course_id) REFERENCES courses(id) );

What is the difference between Promises and async/await?

JavaScript CoreMedium

Show answer

A Promise represents a value that will be available later, handled with then and catch chains. async/await is syntax built on promises: an async function always returns a promise, and await pauses that function until the promise settles, making code read top to bottom. Errors are handled with try and catch. For parallel work you still use Promise.all, because awaiting calls one by one runs them sequentially.

What does mobile-first CSS mean?

Show answer

Mobile-first means writing base styles for small screens and adding min-width media queries to enhance the layout for larger screens. Small devices then download and apply only simple rules, and the design is forced to prioritise essential content. For example, cards stack in one column by default, and @media (min-width: 768px) switches them to a two or three column grid.

Describe a time you improved the performance of a web page.

DOM and Browser EventsMedium

Show answer

Situation: our product listing page took over 6 seconds to become interactive. Task: I was asked to bring it under 3 seconds. Action: I profiled it in DevTools, found a large unused library and unoptimised images, replaced the library with native code, converted images to WebP with lazy loading, and deferred third-party scripts. Result: interaction time dropped to about 2.4 seconds and bounce rate fell noticeably.

Product images look blurry on high-resolution phone screens. How do you fix it?

Show answer

High-density screens have a device pixel ratio of 2 or 3, so a 300 pixel wide image displayed at 300 CSS pixels looks soft. I would export 2x and 3x versions and serve them through srcset with x descriptors or width descriptors plus sizes. For icons and logos I would switch to SVG, which stays sharp at any size and is usually smaller than multiple raster versions.

What is the difference between px, em and rem units?

Show answer

px is a fixed unit. em is relative to the font size of the current element, so nested em values compound and can grow unexpectedly. rem is relative to the root html font size, usually 16 pixels, so 1.5rem is always 24 pixels unless the user changes browser settings. Using rem for font sizes and spacing respects user preferences and keeps scaling consistent across the site.

Should you use PDO or mysqli to connect to MySQL?