Wipro Web Development Interview Questions & Answers
Curated interview practice questions with answers. These are practice scenarios, not a verified list of past interview questions.
About Wipro hiring for Web Development roles
Wipro is an Indian multinational technology services and consulting company providing IT, cloud, cybersecurity, engineering and data analytics services to enterprises worldwide. Its delivery teams work on application development, quality engineering and data platforms for clients in sectors like banking, healthcare and energy. In India it hires for testing, data analysis, support and development roles through programmes such as Wipro Elite NTH.
For Web Development roles, this Wipro practice set focuses most on DOM and Browser Events (6), PHP Programming (6), CSS Layout and Responsive Design (4), HTML Fundamentals (4). It has 12 easy, 18 medium questions, so you can start easy and work up to the harder ones.
Company type
IT services
Headquarters
Bengaluru, India
Main India offices
Bengaluru, Hyderabad, Pune, Chennai, Kolkata
Wipro Web Development interview process
Online assessment (aptitude + written communication)
Coding test
Technical interview
HR round
Typical pattern based on public candidate experiences. Rounds vary by role, team and year.
Solved for WiproStart 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.
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.
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.
When an event fires, it travels in three phases: capturing from window down to the target, the target phase, and bubbling back up through ancestors. By default, addEventListener handles the bubbling phase, so a click on a button also triggers click handlers on its parent div and body. Passing { capture: true } runs the handler during the capturing phase. Some events like focus do not bubble, but focusin does.
Define colour tokens and override them for dark preference:
:root {
--bg: #ffffff;
--text: #1f2937;
}
@media (prefers-color-scheme: dark) {
:root { --bg: #111827; --text: #f3f4f6; }
}
[data-theme='dark'] { --bg: #111827; --text: #f3f4f6; }
body { background: var(--bg); color: var(--text); }
The media query follows the system setting, and the data-theme attribute lets a toggle button override it with JavaScript.
05
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.
06
What is the difference between DOMContentLoaded and the load event?
DOMContentLoaded fires when the HTML has been fully parsed and the DOM is built, without waiting for images, stylesheets or iframes. load fires on window only after every resource, including images, has finished loading. Most scripts that attach listeners should run on DOMContentLoaded, or simply use defer. load is useful when you need image dimensions or must start something after everything is ready.
07
Write a function that groups an array of students by city.
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.
== 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.
10
What is the difference between a primary key and a foreign key?
A primary key uniquely identifies each row in a table and cannot be NULL, for example students.id. A foreign key is a column in another table that refers to that primary key, such as enrollments.student_id, and enforces referential integrity so you cannot add an enrollment for a student who does not exist. Foreign keys can define ON DELETE CASCADE or RESTRICT behaviour. InnoDB supports foreign keys.
11
What is a mistake you made in web development and what did you learn?
Situation: in my first project, I stored user passwords using md5. Task: when a mentor reviewed my code, I had to fix it before launch. Action: I learned why fast hashes are unsafe, switched to password_hash and password_verify, and added rehashing on login for existing users. Result: the system became secure, and since then I always research security best practices before building authentication.
12
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.
13
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.
14
Users get logged out immediately after login when redirected. What could be wrong?
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.
15
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.
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.
17
Build a todo list where items can be added and deleted using event delegation.
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.
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.
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.
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.
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.
MVC separates an application into Models for data and business rules, Views for presentation, and Controllers that handle requests and connect the two. In Laravel, routes send a request to a controller, the controller uses Eloquent models to query the database, and returns a Blade view or JSON. This separation makes code testable and lets frontend and backend developers work on different layers without conflicts.
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.
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.
26
Write a PHP login script using password_verify and sessions.
The DOCTYPE tells the browser which rendering mode to use. Writing <!DOCTYPE html> at the very top puts the browser in standards mode, so CSS box model and layout rules follow the modern specification. Without it, browsers fall back to quirks mode, which imitates old browser bugs and can make widths, margins and table layouts behave inconsistently across browsers.
28
Tell me about a time you had to work with messy legacy code.
Situation: I joined a project with a 10-year-old PHP codebase full of mixed HTML and SQL. Task: I needed to add online payments without breaking existing features. Action: I wrote tests around the checkout flow first, extracted database code into a small class using PDO, and added the payment module separately. Result: payments launched with no regressions, and the team adopted the same approach for later changes.
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.
30
How do srcset and sizes help with responsive images?
srcset lists several versions of the same image with their widths, for example hero-480.jpg 480w and hero-1200.jpg 1200w. sizes tells the browser how wide the image will be shown at different viewport widths. The browser then picks the smallest file that still looks sharp for that screen and pixel density. This saves a lot of mobile data compared to sending one large image to every device.
Tips to crack the Wipro Web Development interview
Prepare for the essay writing section in the online test by practising short, clear, grammatically correct essays on general topics.
Revise basic coding problems on strings and arrays plus fundamentals of DBMS, operating systems and computer networks.
Learn about Wipro's values, known as the Spirit of Wipro, and its focus areas such as cloud and cybersecurity.
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; Wipro interviewers usually ask follow-ups on your first answer.
Frequently asked questions
How many rounds are there in the Wipro Web Development interview?
Candidates usually go through 4 stages: Online assessment (aptitude + written communication); 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 Wipro Web Development interview?
This practice set leans on DOM and Browser Events (6), PHP Programming (6), CSS Layout and Responsive Design (4), HTML Fundamentals (4). Revise those first, then practise explaining one or two of your own projects end to end, because most Wipro interviewers ask you to walk through real work.
Are these the exact questions asked at Wipro?
No. These are curated practice questions that match the skills and difficulty usually tested in it services interviews like Wipro's. They are not a leaked or verified list of past questions.
Where does Wipro hire Web Development professionals in India?
Wipro has large teams in Bengaluru, Hyderabad, Pune, Chennai, Kolkata. Openings and locations change often, so check the Wipro careers page and filter by city and experience.