Infosys Web Development Interview Questions & Answers
Curated interview practice questions with answers. These are practice scenarios, not a verified list of past interview questions.
About Infosys hiring for Web Development roles
Infosys is an Indian multinational IT services and consulting company offering digital transformation, cloud, application management, testing and data services to global clients. It is known for its Mysuru training campus where new hires go through foundation programmes. In India it recruits for roles such as systems engineer, test engineer, data analyst and data engineer, often through campus and off-campus drives.
For Web Development roles, this Infosys practice set focuses most on CSS Layout and Responsive Design (5), JavaScript Core (5), PHP Programming (5), DOM and Browser Events (5). It has 14 easy, 16 medium questions, so you can start easy and work up to the harder ones.
Typical pattern based on public candidate experiences. Rounds vary by role, team and year.
Solved for InfosysStart 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
A modal appears behind the header even with z-index 9999. What is wrong?
The modal is most likely inside a parent that creates its own stacking context, for example through transform, opacity, filter or a positioned element with a lower z-index. Inside that context the 9999 is compared only with siblings. I would inspect ancestors in DevTools, then either render the modal directly under body, which is what portals do, or remove the property creating the context. The native dialog element with showModal also places it in the top layer.
02
What is the difference between UNION and UNION ALL?
Both combine the results of two SELECT queries with the same number and type of columns. UNION removes duplicate rows, which requires extra sorting or hashing work. UNION ALL keeps all rows, including duplicates, and is therefore faster. Use UNION ALL when you know results cannot overlap or duplicates are acceptable, for example combining this year's and last year's order tables.
03
What is the difference between a shallow copy and a deep copy?
A shallow copy, made with spread syntax or Object.assign, copies only top-level properties, so nested objects are still shared references. Changing copy.address.city also changes the original. A deep copy duplicates every nested level. Modern browsers and Node provide structuredClone(obj), which handles dates, maps and circular references. JSON.parse(JSON.stringify(obj)) also works but drops functions, undefined and converts dates to strings.
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.
05
Show monthly revenue for the current year from an orders table.
Group by month and sum the amounts:
SELECT DATE_FORMAT(created_at, '%Y-%m') AS month,
COUNT(*) AS orders,
SUM(amount) AS revenue
FROM orders
WHERE created_at >= '2026-01-01'
AND created_at < '2027-01-01'
AND status = 'paid'
GROUP BY month
ORDER BY month;
Using a date range instead of YEAR(created_at) = 2026 lets MySQL use an index on created_at.
Use prepared statements so input is never part of the SQL text:
$pdo = new PDO('mysql:host=localhost;dbname=school;charset=utf8mb4', $user, $pass, [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
]);
$stmt = $pdo->prepare('INSERT INTO students (name, email) VALUES (:name, :email)');
$stmt->execute([
':name' => $_POST['name'],
':email' => $_POST['email']
]);
echo 'Saved with id ' . $pdo->lastInsertId();
The utf8mb4 charset supports all Unicode, including Hindi text and emoji.
07
Build a todo list where items can be added and deleted using event delegation.
PHP is a server-side scripting language widely used for websites, WordPress, Laravel apps and APIs. When a browser requests a .php file, the web server such as Apache or Nginx passes it to the PHP interpreter, usually through PHP-FPM. PHP runs the code, talks to databases if needed, and sends back plain HTML or JSON. The browser never sees the PHP source, only the generated output.
09
Why should external links opened with target='_blank' use rel='noopener'?
When a page opens a link in a new tab, the new page historically got access to window.opener and could redirect the original tab to a phishing page, an attack called reverse tabnabbing. Adding rel='noopener' removes that reference, and noreferrer also hides the referring URL. Modern browsers apply noopener by default for target='_blank', but adding it explicitly is still good practice for older browsers.
== compares values after type coercion, so 0 == '0' and null == undefined are both true, which can hide bugs. === is strict equality and returns true only when both type and value match, so 0 === '0' is false. Most style guides require === everywhere. One accepted exception is value == null, which conveniently checks for both null and undefined in one condition.
11
Click handlers do not work on buttons added after the page loads. Why?
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.
Specificity decides which rule wins when several match the same element. It is calculated as a score: inline styles highest, then id selectors, then classes, attributes and pseudo-classes, then element and pseudo-element selectors. For example, #menu a beats .nav a. When specificity is equal, the rule written later wins. !important overrides normal rules, but overusing it creates maintenance problems, so keeping selectors flat with classes is preferred.
Every element is a rectangular box made of content, padding, border and margin from inside to outside. With the default box-sizing: content-box, the width you set applies only to the content, so padding and border increase the final size. Setting box-sizing: border-box makes width include padding and border, which makes layouts predictable. Most projects apply border-box to all elements in a global reset.
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.
Both support prepared statements and are secure when used correctly. PDO supports around a dozen databases with the same API, has named placeholders like :email, and throws exceptions cleanly, so switching from MySQL to PostgreSQL is easier. mysqli works only with MySQL but exposes some MySQL-specific features. Most modern codebases and frameworks like Laravel use PDO under the hood, so it is the usual recommendation.
Shared hosting puts many sites on one server with a control panel like cPanel; it is cheap and easy but offers limited resources and control. A VPS gives you a virtual machine with root access, dedicated RAM and CPU, so you install and secure the stack yourself. Cloud platforms like AWS, Azure and Google Cloud add auto-scaling, managed databases and pay-per-use pricing, suited to growing applications.
17
Open and close an accessible modal using the native dialog element.
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.
18
What are CSS custom properties and how are they different from Sass variables?
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.
19
What is the difference between block-level and inline elements?
Block-level elements such as div, p, h1 and section start on a new line and take the full available width by default. Inline elements such as span, a, strong and img sit inside a line of text and only take as much width as their content. Inline elements ignore vertical width and height settings, which is why developers often switch them to inline-block or block when they need sizing.
20
What is CORS and why does the browser block some API calls?
The same-origin policy stops scripts on one origin from reading responses from another origin. CORS is how a server opts in: it returns headers like Access-Control-Allow-Origin naming allowed origins. For non-simple requests, such as JSON with custom headers, the browser first sends an OPTIONS preflight. CORS is enforced only by browsers, so it is not a security control for the server itself, and Allow-Origin * should never be combined with credentials.
21
Tell me about a time a website went down and how you handled it.
Situation: our e-commerce site went down at 11 PM during a sale. Task: as the on-call developer, I had to restore it fast. Action: I checked logs, found PHP-FPM workers exhausted by a slow query, restarted the service, added an index to fix the query, and kept the team updated every 15 minutes. Result: the site was back in 20 minutes, and I wrote a postmortem with monitoring alerts to catch it earlier.
AJAX means updating parts of a page by exchanging data with the server in the background, without a full page reload. Originally it used XMLHttpRequest and XML, but today it is done with the fetch API and JSON. Examples include live search suggestions, adding to cart without reload, and infinite scroll. The server returns data, and JavaScript updates the DOM with the result.
23
Show HTML5 built-in validation for a registration form.
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.
24
What are the differences between Apache and Nginx?
Apache uses a process or thread based model and supports per-directory .htaccess files, which is convenient on shared hosting. Nginx uses an event-driven model that handles many concurrent connections with low memory, making it excellent for static files and as a reverse proxy. Nginx runs PHP through PHP-FPM and has no .htaccess, so rules go in central config. Many setups put Nginx in front of Apache or application servers.
25
What is Composer and how does PSR-4 autoloading work?
Composer is PHP's dependency manager. composer.json lists packages, composer.lock pins exact versions, and the vendor folder holds installed code. PSR-4 maps a namespace prefix to a folder, for example App\ to src/, so App\Models\User loads from src/Models/User.php automatically after you require vendor/autoload.php. This removes manual require statements. composer.lock should be committed so every environment installs identical versions.
Both use three dots but do opposite jobs. Spread expands an iterable or object into individual elements, for example [...a, ...b] to merge arrays or {...user, city: 'Pune'} to copy and update an object. Rest collects multiple values into one, for example function sum(...nums) gathers all arguments into an array, or const { id, ...others } = user separates one property from the rest.
27
Validate a signup form with JavaScript before submission.
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.
PHP 8.0 added the JIT compiler, named arguments, union types, the match expression, the nullsafe operator ?-> and constructor property promotion. PHP 8.1 added enums, readonly properties, fibers and never return type. PHP 8.2 added readonly classes, 8.3 added typed class constants and json_validate, and 8.4 added property hooks and asymmetric visibility. Together they make PHP code safer, shorter and more strongly typed.
29
How do arrow functions differ from regular functions?
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.
30
Use map, filter and reduce to calculate the total price of in-stock items.
Chain the methods so each does one job:
const cart = [
{ name: 'Mouse', price: 499, qty: 2, inStock: true },
{ name: 'Keyboard', price: 1299, qty: 1, inStock: false }
];
const total = cart
.filter(item => item.inStock)
.map(item => item.price * item.qty)
.reduce((sum, value) => sum + value, 0);
console.log(total); // 998
Always pass an initial value to reduce so empty arrays return 0 instead of throwing.
Tips to crack the Infosys Web Development interview
Practise pseudocode output questions and puzzle-style reasoning, which commonly appear in Infosys online tests and HackWithInfy style contests.
Revise SQL joins, normalisation and one programming language well enough to write and explain simple programs on paper.
Mention willingness to learn new technologies and relocate, since Infosys emphasises its training programme and flexible project allocation.
Keep a one-minute story ready for every project on your CV: problem, your part, tools, result.
Practise the hard questions on this page aloud; Infosys interviewers usually ask follow-ups on your first answer.
Frequently asked questions
How many rounds are there in the Infosys Web Development interview?
Candidates usually go through 4 stages: Online assessment (aptitude, reasoning + pseudocode); Coding test; Technical interview; HR round. The exact rounds change with the role, team, location and your experience, so confirm the process with the recruiter.
Which topics should I prepare for the Infosys Web Development interview?
This practice set leans on CSS Layout and Responsive Design (5), JavaScript Core (5), PHP Programming (5), DOM and Browser Events (5). Revise those first, then practise explaining one or two of your own projects end to end, because most Infosys interviewers ask you to walk through real work.
Are these the exact questions asked at Infosys?
No. These are curated practice questions that match the skills and difficulty usually tested in it services interviews like Infosys's. They are not a leaked or verified list of past questions.
Where does Infosys hire Web Development professionals in India?
Infosys has large teams in Bengaluru, Mysuru, Pune, Hyderabad, Chennai. Openings and locations change often, so check the Infosys careers page and filter by city and experience.