Nagarro Web Development Interview Questions & Answers
Curated interview practice questions with answers. These are practice scenarios, not a verified list of past interview questions.
About Nagarro hiring for Web Development roles
Nagarro is a digital engineering and technology consulting company with a large workforce in India. It works on custom software, digital product engineering, testing, cloud and data projects for clients in Europe, North America and other regions. In India it hires for software engineers, test engineers and data professionals.
For Web Development roles, this Nagarro practice set focuses most on JavaScript Core (7), CSS Layout and Responsive Design (5), MySQL Database (4), DOM and Browser Events (4). It has 10 easy, 20 medium questions, so you can start easy and work up to the harder ones.
Company type
IT services
Headquarters
Munich, Germany
Main India offices
Gurugram, Jaipur
Nagarro Web Development interview process
Online assessment (aptitude + reasoning)
Coding test
Technical interview
Managerial or HR round
Typical pattern based on public candidate experiences. Rounds vary by role, team and year.
Solved for NagarroStart 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 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.
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.
INNER JOIN returns only rows with matching values in both tables, such as students who have enrolled. LEFT JOIN returns all rows from the left table and matching rows from the right, filling NULL where there is no match, which is useful to find students with no enrollment. RIGHT JOIN is the mirror of LEFT JOIN. MySQL has no FULL OUTER JOIN, but you can simulate it with a UNION of LEFT and RIGHT joins.
04
Fetch a list of products and render them safely into the page.
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.
06
Tell me about a time you disagreed with a designer about a layout.
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.
07
How do you handle pressure to skip security work to meet a deadline?
Situation: a manager wanted to launch a form without server-side validation to save a day. Task: I needed to protect the product without blocking the launch. Action: I explained the risk in business terms, data leaks and spam, and proposed shipping core validation and rate limiting now, with less critical hardening in the next sprint. Result: we launched on time with essential protections and completed the rest within a week.
Edit the crontab with crontab -e and add:
30 2 * * * mysqldump --single-transaction -u backup school | gzip > /backups/school_$(date +\%F).sql.gz
0 3 * * * find /backups -name '*.sql.gz' -mtime +14 -delete
The first line runs at 2:30 AM daily; the second removes backups older than 14 days. Keep credentials in ~/.my.cnf with restricted permissions instead of the command, escape % in crontab, and copy backups to off-server storage.
09
Your frontend on one domain gets a CORS error calling your API on another. How do you resolve it?
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.
10
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.
11
What is the difference between null and undefined?
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.
12
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.
Use article for self-contained content that makes sense on its own, such as a blog post, product card or comment. Use section for a thematic group of content that normally has its own heading, like a Features block on a landing page. Use div only when you need a wrapper purely for styling or scripting with no meaning. Choosing correctly improves the document outline and accessibility.
localStorage stores about 5 MB per origin and persists until cleared. sessionStorage has similar size but is cleared when the tab closes and is separate per tab. Cookies are small, around 4 KB, are sent to the server with every request, and can be HttpOnly, Secure and SameSite. Use cookies for session identifiers, and storage for UI preferences. Never store tokens or passwords in localStorage, since any XSS can read it.
15
An API is being called twice when the page loads. How do you debug it?
I would open the Network tab and check the Initiator column to see which code triggered each request. Common causes are the script being included twice, an event listener attached twice, a function called on both DOMContentLoaded and load, or a framework's development mode running effects twice. I would add a breakpoint or console.trace inside the fetch function, fix the root cause, and add a guard flag only if truly needed.
Hoisting means declarations are processed before code runs, so they behave as if moved to the top of their scope. Function declarations are hoisted completely and can be called before they appear. var variables are hoisted but set to undefined until assignment. let, const and class are hoisted too, but accessing them before declaration throws a ReferenceError because of the temporal dead zone.
17
The server's disk is full and the site has stopped saving data. What do you do?
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.
18
A cart total shows 0.30000000000000004 instead of 0.3. Why, and how do you fix it?
JavaScript numbers are IEEE 754 floating point, so decimals like 0.1 and 0.2 cannot be stored exactly. For money, I would store and calculate amounts in the smallest unit, such as paise as integers, and convert only for display using Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }). The server should always recalculate the final amount, because client-side totals cannot be trusted for payment.
static is the default and follows normal flow. relative keeps the element in flow but lets you offset it, and makes it a reference for absolute children. absolute removes the element from flow and positions it against the nearest positioned ancestor. fixed positions against the viewport and stays during scroll. sticky behaves like relative until a scroll threshold, then sticks like fixed within its parent, which is ideal for table headers.
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
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.
22
Fetch data from an API with async/await and handle errors properly.
fetch only rejects on network failure, so check response.ok yourself:
async function getCourses() {
try {
const res = await fetch('/api/courses');
if (!res.ok) throw new Error('HTTP ' + res.status);
const data = await res.json();
renderCourses(data);
} catch (err) {
console.error(err);
showMessage('Could not load courses. Please retry.');
}
}
A 404 or 500 response would otherwise be treated as success.
An A record maps a domain to an IPv4 address and AAAA to IPv6. CNAME points one name to another, such as www to example.com, but cannot sit on the root domain. MX records route email to mail servers. TXT records hold verification and email security data like SPF, DKIM and DMARC. NS records name the authoritative nameservers. TTL controls how long resolvers cache each record.
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.
25
What is the difference between pseudo-classes and pseudo-elements?
A pseudo-class selects an element in a particular state, such as :hover, :focus, :nth-child(2) or :checked, and uses a single colon. A pseudo-element styles a specific part of an element or inserts generated content, such as ::before, ::after, ::first-line or ::placeholder, and uses a double colon. For example, a::after can add an arrow icon after links without extra HTML.
26
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.
Two common approaches:
SELECT MAX(salary) AS second_highest
FROM employees
WHERE salary < (SELECT MAX(salary) FROM employees);
SELECT DISTINCT salary
FROM employees
ORDER BY salary DESC
LIMIT 1 OFFSET 1;
The first returns NULL when there is no second value. With MySQL 8 you can also use DENSE_RANK() OVER (ORDER BY salary DESC) and filter rank = 2, which generalises to the Nth highest.
28
What is the difference between innerHTML, textContent and innerText?
innerHTML reads or writes HTML markup, so inserting user input through it can run malicious scripts and cause XSS. textContent reads or writes raw text, including hidden elements, and is fast because it does not trigger layout. innerText returns only visible text as rendered, respects CSS, and triggers a reflow, so it is slower. For displaying user data, textContent is the safe default.
29
Explain database normalization up to third normal form.
Normalization reduces duplicate data and update problems. 1NF requires atomic values, no repeating groups like phone1, phone2. 2NF requires every non-key column to depend on the whole primary key, not part of a composite key. 3NF removes transitive dependencies, so a column depends only on the key, for example moving city details out of an orders table. Read-heavy reports sometimes denormalise deliberately for speed.
30
Emails sent from your website contact form land in spam. How do you fix it?
I would stop sending through PHP mail() from the web server and use an authenticated SMTP or transactional email service. Then I would publish SPF to authorise the sender, DKIM to sign messages, and a DMARC policy in DNS. The From address should belong to the verified domain, while the visitor's email goes in Reply-To. Mail testing tools show the spam score and missing records.
Tips to crack the Nagarro Web Development interview
Practise coding questions along with logical reasoning, as Nagarro assessments usually combine both.
Learn about Nagarro's flat, entrepreneurial culture and its CARING values for behavioural answers.
Be ready to explain testing approaches and agile practices, since many projects follow agile delivery with distributed teams.
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; Nagarro interviewers usually ask follow-ups on your first answer.
Frequently asked questions
How many rounds are there in the Nagarro Web Development interview?
Candidates usually go through 4 stages: Online assessment (aptitude + reasoning); Coding test; Technical interview; Managerial or 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 Nagarro Web Development interview?
This practice set leans on JavaScript Core (7), CSS Layout and Responsive Design (5), MySQL Database (4), DOM and Browser Events (4). Revise those first, then practise explaining one or two of your own projects end to end, because most Nagarro interviewers ask you to walk through real work.
Are these the exact questions asked at Nagarro?
No. These are curated practice questions that match the skills and difficulty usually tested in it services interviews like Nagarro's. They are not a leaked or verified list of past questions.
Where does Nagarro hire Web Development professionals in India?
Nagarro has large teams in Gurugram, Jaipur. Openings and locations change often, so check the Nagarro careers page and filter by city and experience.