36 practice questions with answers for Web Development interviews in Kochi.
Web Development jobs in Kochi
Kochi's Infopark and SmartCity host IT-services firms, product companies and start-ups, making it Kerala's largest tech job market along with Thiruvananthapuram. Testing and data roles are common in its service and product teams.
Below are 36 questions that match the mix of service, product and domain employers hiring junior web developers in Kochi.
Solved for KochiStart 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.
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.
== 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.
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.
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.
05
You changed DNS to a new server but some users still see the old site. Why?
DNS resolvers and browsers cache records for the TTL period, so changes propagate gradually; with a high TTL like 24 hours, some users keep the old IP for a day. I would check with dig or an online DNS checker from several locations. Best practice is lowering the TTL to 300 seconds a day before migration, keeping the old server running until traffic drains, and then raising the TTL again.
06
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.
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 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.
09
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.
Add loading='lazy' so the browser fetches them only when they come near the viewport:
<img src='gallery-1.jpg' alt='Campus' width='600' height='400' loading='lazy'>
<iframe src='https://www.youtube.com/embed/xyz' loading='lazy' title='Demo video'></iframe>
Do not lazy load the main hero or above-the-fold image, because that delays Largest Contentful Paint. For the hero use fetchpriority='high' instead, and always set width and height to avoid layout shift.
11
Center a div horizontally and vertically using Flexbox and Grid.
Both methods work on the parent container:
.parent-flex {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.parent-grid {
display: grid;
place-items: center;
min-height: 100vh;
}
place-items is shorthand for align-items and justify-items. Using min-height instead of height lets content grow without overflowing on small screens.
12
A user can view another user's invoice by changing the id in the URL. What is this and how do you fix it?
This is an Insecure Direct Object Reference, a form of broken access control, the top OWASP risk. The fix is an authorisation check on every request: fetch the invoice with WHERE id = ? AND user_id = ? using the logged-in user's id from the session, and return 404 if not found. Using random UUIDs makes guessing harder but is not a replacement for authorisation checks.
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.
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.
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.
16
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.
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.
19
Use the picture element to serve WebP or AVIF with a JPEG fallback.
The browser picks the first source format it supports and falls back to img:
<picture>
<source srcset='hero.avif' type='image/avif'>
<source srcset='hero.webp' type='image/webp'>
<img src='hero.jpg' alt='Students in a coding lab' width='1200' height='600'>
</picture>
The img element still carries alt, width and height, so accessibility and layout stability are preserved. Modern formats are often 30 to 50 percent smaller than JPEG.
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.
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).
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.
23
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.
24
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.
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.
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.
27
Write a function that groups an array of students by city.
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.
29
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.
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.
31
Your page has a high Cumulative Layout Shift because of fonts and ads. How do you reduce it?
For fonts I would preload the main font file, use font-display: swap or optional, and tune fallback fonts with size-adjust so the swap does not move text. For ads and embeds I would reserve space with a fixed min-height or aspect-ratio box before they load. I would also set width and height on all images and avoid inserting banners above existing content after load.
32
Fetch a list of products and render them safely into the page.
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.
35
The page stutters while scrolling because of a scroll event handler. How do you fix it?
Scroll events fire many times per second, so heavy work in the handler blocks the main thread. I would throttle the handler or batch DOM writes inside requestAnimationFrame, mark listeners as { passive: true }, and avoid reading layout properties like offsetTop after writing styles. For tasks like lazy loading, sticky effects or reveal animations, I would replace the handler with IntersectionObserver or CSS position: sticky.
36
The site's main CSS file is 400 KB and first paint is slow. How do you optimise it?
I would run the Coverage tab in DevTools to measure unused CSS, then remove dead rules with a tool like PurgeCSS. I would extract critical above-the-fold CSS and inline it, loading the rest asynchronously. Splitting styles per page or route, minifying, enabling Brotli compression and caching with long expiry headers also help. Finally I would replace heavy frameworks where only a few components are used.
Few big employers listed in Kochi?
Many Kochi candidates also apply to teams in Bangalore and to remote or hybrid roles. Practise the Bangalore set as well.
Which companies hire Web Development professionals in Kochi?
Companies with large offices in Kochi include many IT services and product firms. Use their company pages below to practise employer-specific sets.
Are Web Development interviews in Kochi different from other cities?
The questions depend more on the company than the city. Kochi's mix of employers decides the style: Testing and data roles are common in its service and product teams
How do I find Web Development jobs in Kochi?
Shortlist companies with Kochi offices, keep your CV focused on Web Development projects, apply on company career pages and job portals with the Kochi filter, and practise the questions on this page before each interview.