Cognizant Web Development Interview Questions & Answers
Curated interview practice questions with answers. These are practice scenarios, not a verified list of past interview questions.
About Cognizant hiring for Web Development roles
Cognizant is a US-headquartered IT services and consulting company with most of its workforce based in India. It provides application development, testing, cloud, digital engineering and data analytics services, with strong practices in healthcare, insurance and banking. In India it hires for programmer analyst, quality engineer and data roles through campus and off-campus programmes such as GenC.
For Web Development roles, this Cognizant practice set focuses most on MySQL Database (6), PHP Programming (5), DOM and Browser Events (5), HTML Fundamentals (4). It has 17 easy, 12 medium, 1 hard questions, so you can start easy and work up to the harder ones.
Company type
IT services
Headquarters
Teaneck, New Jersey, USA
Main India offices
Chennai, Bengaluru, Pune, Hyderabad, Kolkata
Cognizant Web Development interview process
Online assessment (aptitude + reasoning)
Coding assessment
Technical interview
HR round
Typical pattern based on public candidate experiences. Rounds vary by role, team and year.
Solved for CognizantStart 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
Your code throws 'Unexpected token < in JSON' after an API call. What does it mean?
It means response.json() received HTML instead of JSON, usually an error page, a login redirect, or a 404 page from the server. I would check the response status and body in the Network tab, verify the endpoint URL and method, and confirm the server sets Content-Type: application/json. In code I would check response.ok before parsing so users see a clear error instead of a crash.
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.
03
Uploaded images overflow their containers and break the layout. What is the fix?
Images keep their natural size by default, so a 2000 pixel photo will overflow a 350 pixel card. A global rule img { max-width: 100%; height: auto; display: block; } makes them shrink to fit while keeping the aspect ratio. For fixed-size thumbnails I would add width, height and object-fit: cover so different photo shapes crop neatly without stretching.
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.
05
How do you test a website for cross-browser compatibility?
I check feature support on Can I Use before using new CSS, and use Autoprefixer through the build for vendor prefixes. I test on Chrome, Firefox, Safari and Edge, plus real Android and iPhone devices because Safari on iOS behaves differently. Cloud testing platforms help when devices are missing. I use @supports for progressive enhancement, so older browsers still get a working, simpler layout.
06
A PHP page shows a blank white screen. How do you debug it?
A white screen usually means a fatal error with display_errors turned off. I would check the PHP error log or server log first, for example the Apache or PHP-FPM log. On a local or staging machine I would enable error_reporting(E_ALL) and display_errors. Common causes are syntax errors, missing extensions like pdo_mysql, memory limit exhaustion, or a missing vendor folder. On production, errors should be logged, never displayed.
07
What are custom events and when would you use them?
Custom events let components communicate without knowing about each other. You create one with new CustomEvent('cart:updated', { detail: { count: 3 }, bubbles: true }) and fire it with element.dispatchEvent. Any part of the page can listen with addEventListener('cart:updated'). For example, a product card can announce an add-to-cart action, and the header badge updates itself, keeping code loosely coupled.
08
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.
The Document Object Model is a tree representation of an HTML page that the browser builds after parsing. Each element, attribute and piece of text becomes a node that JavaScript can read and change through APIs like document.querySelector, element.classList and element.append. When the DOM changes, the browser updates what users see. The DOM is not the HTML source itself; scripts can change it after the page loads.
When vertical margins of adjacent block elements touch, they merge into a single margin equal to the larger one instead of adding up. It also happens between a parent and its first or last child when no padding, border or block formatting context separates them. Margins do not collapse in flex or grid containers. Developers often avoid surprises by using padding, gap or margin in one direction only.
11
How do you make sure you do not break production data while working?
I always test queries on a local or staging copy first, run a SELECT with the same WHERE clause before any UPDATE or DELETE, and wrap risky changes in a transaction so I can roll back. I confirm a fresh backup exists before migrations. In one release, this habit caught a WHERE condition that would have updated every row, and we fixed it before it ever reached production.
12
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.
13
Create students, courses and enrollments tables with proper keys.
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)
);
14
Use the PHP 8 match expression instead of a switch.
match returns a value, uses strict comparison and needs no break:
$status = 'shipped';
$label = match ($status) {
'pending' => 'Order received',
'shipped', 'in_transit' => 'On the way',
'delivered' => 'Delivered',
default => 'Unknown status',
};
echo $label;
Unlike switch, match throws an UnhandledMatchError if no arm matches and there is no default, which surfaces missing cases early.
15
What is the difference between sessions and cookies in PHP?
A cookie stores data in the browser and is sent with every request, so users can see and edit it. A session stores data on the server and keeps only a session id in a cookie, usually PHPSESSID. Use $_SESSION for login state and cart data, after calling session_start(). Use cookies only for non-sensitive preferences, and mark session cookies HttpOnly, Secure and SameSite.
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.
17
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.
Cross-site request forgery tricks a logged-in user's browser into sending an unwanted request, such as changing their email, because cookies are attached automatically. Prevention includes a unique CSRF token in every state-changing form that the server verifies, SameSite=Lax or Strict cookies, and checking the Origin header. GET requests should never change data. Frameworks like Laravel add CSRF tokens to forms by default.
19
Validate and sanitise different types of input in PHP.
WHERE filters individual rows before grouping and cannot use aggregate functions. HAVING filters groups after GROUP BY and can use aggregates. For example, SELECT city, COUNT(*) FROM students WHERE status = 'active' GROUP BY city HAVING COUNT(*) > 50 first keeps only active students, then shows cities with more than 50 of them. Filtering in WHERE when possible is faster because fewer rows are grouped.
21
Build a todo list where items can be added and deleted using event delegation.
undefined means a variable was declared but not assigned, a missing function argument, or a property that does not exist. null is an intentional empty value set by the developer, like clearing a selected user. typeof undefined is 'undefined', while typeof null is 'object', a long-standing quirk. APIs often return null for 'no data', and optional chaining like user?.address handles both safely.
23
What is the difference between var, let and const?
var is function-scoped, is hoisted and initialised as undefined, and can be redeclared, which causes bugs in loops and blocks. let and const are block-scoped and sit in the temporal dead zone until their declaration line runs. let allows reassignment, while const does not, although objects declared with const can still have their properties changed. Modern code uses const by default and let only when the value must change.
24
Write a query to find duplicate email addresses in a users table.
Group by the column and keep groups with more than one row:
SELECT email, COUNT(*) AS total
FROM users
GROUP BY email
HAVING COUNT(*) > 1;
To delete duplicates but keep the lowest id:
DELETE u1 FROM users u1
JOIN users u2
ON u1.email = u2.email AND u1.id > u2.id;
Afterwards add a UNIQUE index on email so duplicates cannot come back.
25
What is PHP and how does a PHP page get processed?
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.
26
What is the difference between preventDefault and stopPropagation?
preventDefault stops the browser's default action for the event, such as a form submitting and reloading the page or a link navigating. stopPropagation stops the event from bubbling further to parent elements, but the default action still happens. They solve different problems and are sometimes used together. Overusing stopPropagation can break delegated listeners and analytics scripts that listen at the document level.
27
Why is the meta viewport tag needed for mobile pages?
Without a viewport meta tag, mobile browsers render the page at a virtual width of around 980 pixels and then zoom out, so text looks tiny. Adding <meta name='viewport' content='width=device-width, initial-scale=1'> tells the browser to use the real device width, which makes media queries work as expected. Avoid disabling user zoom with maximum-scale=1 because it hurts accessibility for users with low vision.
28
What are data-* attributes and when do you use them?
Custom data attributes such as data-product-id or data-price let you store extra information on an element without misusing class or id. JavaScript reads them through element.dataset, for example button.dataset.productId, and CSS can target them with attribute selectors. They are ideal for passing small values from server-rendered HTML to scripts, but sensitive data should never be stored there because anyone can read the page source.
Superglobals are built-in arrays available in every scope without the global keyword. Common ones are $_GET and $_POST for request data, $_REQUEST combining them, $_SESSION, $_COOKIE, $_FILES for uploads, $_SERVER for headers and paths, and $_ENV for environment variables. All user-supplied superglobals must be treated as untrusted input and validated, for example using filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL).
30
Find the top 3 highest-paid employees in each department.
Use a window function in MySQL 8:
WITH ranked AS (
SELECT name, department_id, salary,
DENSE_RANK() OVER (PARTITION BY department_id ORDER BY salary DESC) AS rnk
FROM employees
)
SELECT name, department_id, salary
FROM ranked
WHERE rnk <= 3;
PARTITION BY restarts ranking per department. DENSE_RANK keeps ties together, while ROW_NUMBER would return exactly three rows even if salaries tie.
Tips to crack the Cognizant Web Development interview
Understand the GenC, GenC Next and GenC Elevate tracks so you know which skills and coding level each role expects.
Revise SQL queries, OOP concepts and basic testing terminology since many freshers are placed in development or QA projects.
Read about Cognizant's healthcare and life sciences domain work, which is a large part of its client base.
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; Cognizant interviewers usually ask follow-ups on your first answer.
Frequently asked questions
How many rounds are there in the Cognizant Web Development interview?
Candidates usually go through 4 stages: Online assessment (aptitude + reasoning); Coding assessment; 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 Cognizant Web Development interview?
This practice set leans on MySQL Database (6), PHP Programming (5), DOM and Browser Events (5), HTML Fundamentals (4). Revise those first, then practise explaining one or two of your own projects end to end, because most Cognizant interviewers ask you to walk through real work.
Are these the exact questions asked at Cognizant?
No. These are curated practice questions that match the skills and difficulty usually tested in it services interviews like Cognizant's. They are not a leaked or verified list of past questions.
Where does Cognizant hire Web Development professionals in India?
Cognizant has large teams in Chennai, Bengaluru, Pune, Hyderabad, Kolkata. Openings and locations change often, so check the Cognizant careers page and filter by city and experience.