36 practice questions with answers for Web Development interviews in Lucknow.
Web Development jobs in Lucknow
Lucknow's tech job market is smaller but growing, led by IT-services delivery centres, government-tech projects and start-ups. Many Lucknow candidates target Noida and Gurgaon roles or remote jobs, so interviews follow the NCR pattern.
Below are 36 questions that match the mix of service, product and domain employers hiring junior web developers in Lucknow.
Solved for LucknowStart 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 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.
02
What is the difference between Promises and async/await?
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.
03
Create a responsive card grid that needs no media queries.
auto-fit with minmax lets the grid decide how many columns fit:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
Each card is at least 250 pixels wide and the extra space is shared equally. On a phone it shows one column, on a tablet two and on a desktop three or four, all from three lines of CSS.
04
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.
05
Database credentials were accidentally pushed to a public GitHub repository. What now?
Deleting the commit is not enough, because bots scan GitHub within minutes. I would immediately rotate the password and any other exposed keys, check database logs for suspicious access, and then purge the secret from history using git filter-repo. Going forward, secrets belong in environment variables or a secrets manager, .env files go in .gitignore, and secret-scanning tools run in CI.
A closure is a function that remembers variables from the scope where it was created, even after that outer function has finished. For example, function counter() { let count = 0; return () => ++count; } returns a function that keeps its own private count. Closures are used for data privacy, function factories, debounce helpers and event handlers. Their trade-off is that captured variables stay in memory as long as the function exists.
07
Users report being redirected to a gambling site from your pages. What do you check?
This often comes from injected JavaScript or a compromised third-party script. I would check the page source and Network tab for unfamiliar scripts, inspect .htaccess for malicious rewrite rules, search the database and theme files for obfuscated code like base64_decode or eval, and review recently changed files on the server. A strict CSP and Subresource Integrity on CDN scripts help prevent repeat incidents.
08
What is the difference between px, em and rem units?
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.
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.
10
A comment section displays user input using innerHTML. What is the risk and fix?
It allows stored cross-site scripting: a user can post <img src=x onerror=...> and the script runs for every visitor, stealing sessions or defacing the page. I would switch to textContent or createElement for rendering, escape output on the server, and if rich text is needed, sanitise with a library like DOMPurify. A strict Content Security Policy adds another layer by blocking inline scripts.
11
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.
12
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.
13
Write a function that groups an array of students by city.
All four insert another PHP file. If the file is missing, include gives a warning and continues, while require throws a fatal error and stops the script. The _once versions skip the file if it was already loaded, which prevents 'cannot redeclare function' errors. Use require_once for essential files like config and database connection. Modern projects rely on Composer autoloading instead of manual includes for classes.
this depends on how a function is called, not where it is written. In a method call like user.greet(), this is user. In a plain function call it is undefined in strict mode. With new it is the new object, and call, apply or bind set it explicitly. Arrow functions do not have their own this; they take it from the surrounding scope, which is why they are handy inside callbacks.
16
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.
17
The database server is overloaded by read traffic. What architecture changes would you suggest?
I would first add caching for frequent reads with Redis or application-level caching. Then I would set up one or more read replicas and route SELECT queries to them while writes go to the primary, keeping replication lag in mind for read-after-write cases. Optimising slow queries and indexes often gives the cheapest wins. Managed services like Amazon RDS make adding replicas straightforward.
18
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.
19
How would you explain a technical problem to a non-technical client?
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.
20
Someone accidentally ran DELETE without a WHERE clause on production. How do you recover?
First I would stop writes to that table to avoid further damage and inform the team. Then I would restore the latest backup to a separate server and, if binary logging is enabled, replay binlog events up to just before the bad statement using mysqlbinlog for point-in-time recovery. Finally I would copy the recovered rows back. Afterwards I would enable safe-updates mode and restrict production access.
21
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.
22
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.
23
What is the difference between GET and POST methods in an HTML form?
GET sends form data in the URL query string, so it is visible, bookmarkable, cached and limited in length; it suits search and filter forms. POST sends data in the request body, so it is not shown in the URL and can carry large or binary content such as file uploads. Any action that changes data on the server, like login, registration or payment, should use POST.
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.
Situation: in my internship, a training institute tracked batches, students and fees in spreadsheets. Task: I had to design a MySQL schema for a web portal. Action: I normalised data into students, batches, enrollments and payments tables, added foreign keys and indexes on common filters, and wrote views for monthly reports. Result: reports that took a day manually now loaded in seconds, and data errors dropped sharply.
CHAR(n) stores a fixed length and pads shorter values, which suits fixed codes like a 6-digit PIN code or two-letter state code. VARCHAR(n) stores variable length up to n characters with a small length prefix, ideal for names and emails. TEXT is for long content like blog bodies but cannot have a default value and is indexed only by prefix. Using right-sized types saves memory and improves index efficiency.
27
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.
28
A client's WordPress site has been hacked and shows spam links. What steps do you take?
I would take a full backup for evidence, put the site in maintenance mode and change all passwords, including hosting, database, FTP and admin users. Then I would compare core files with fresh copies, scan themes, plugins and uploads for injected PHP, remove unknown admin users and check the database for spam content. After cleaning I would update everything, remove unused plugins, add a firewall and request a Google review.
29
Write a PHP login script using password_verify and sessions.
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.
31
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.
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.
33
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.
34
What is the difference between echo and print in PHP?
Both output strings. echo is a language construct with no return value and can take multiple comma-separated arguments, like echo $a, $b. print also is a construct but takes only one argument and returns 1, so it can be used inside expressions. echo is marginally faster and far more common. For formatted output, printf or sprintf are used, for example printf('%.2f', $price).
35
Explain the difference between async and defer on a script tag.
Both download the script in parallel without blocking HTML parsing. An async script executes as soon as it finishes downloading, in no fixed order, so it suits independent scripts like analytics. A defer script waits until the HTML is fully parsed and runs in document order, so it suits application code that depends on the DOM or on other scripts. A plain script tag blocks parsing completely.
36
How is querySelector different from getElementById and getElementsByClassName?
querySelector and querySelectorAll accept any CSS selector and return the first match or a static NodeList. getElementById accepts only an id and is slightly faster. getElementsByClassName returns a live HTMLCollection that updates automatically when the DOM changes, which can cause surprises inside loops. In practice querySelector is used for flexibility, and the speed difference rarely matters.
Which companies hire Web Development professionals in Lucknow?
Companies with large offices in Lucknow include HCLTech. Use their company pages below to practise employer-specific sets.
Are Web Development interviews in Lucknow different from other cities?
The questions depend more on the company than the city. Lucknow's mix of employers decides the style: Many Lucknow candidates target Noida and Gurgaon roles or remote jobs, so interviews follow the NCR pattern
How do I find Web Development jobs in Lucknow?
Shortlist companies with Lucknow offices, keep your CV focused on Web Development projects, apply on company career pages and job portals with the Lucknow filter, and practise the questions on this page before each interview.