Skip to content
Web Development
All coursesPlacement Report
‹ Back to previous sectionCourse homeAll page URLs

Web Development Technical Round Questions & Answers

40 questions for the technical round stage — 6 easy, 24 medium, 10 hard.

About the technical round round

The technical round is the core of a Web Development interview: concept questions with follow-ups, a live hands-on task and a deep dive into one of your projects. Interviewers check depth, not just definitions.

Tips for the technical round round

  • Say your approach out loud before you start writing.
  • After a correct answer, expect 'why?' and 'what if?' follow-ups; go one level deeper than the question.
  • Pick one project you can explain end to end, including what you would do differently.
  • If you get stuck, explain what you would try next instead of going silent.
Solved — technical roundStart 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?

DOM and Browser EventsEasy
Save to ▾
Show answer
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

When should you use section, article or div?

HTML FundamentalsMedium
Save to ▾
Show answer
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.
03

What is ARIA and when should you use it?

HTML FundamentalsMedium
Save to ▾
Show answer
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.
04

Why is the meta viewport tag needed for mobile pages?

HTML FundamentalsMedium
Save to ▾
Show answer
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.
05

How is the value of this decided in JavaScript?

JavaScript CoreMedium
Save to ▾
Show answer
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.
06

Database credentials were accidentally pushed to a public GitHub repository. What now?

Web SecurityMedium
Save to ▾
Show answer
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.
07

How do you lazy load images and iframes natively?

HTML FundamentalsMedium
Save to ▾
Show answer
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.
08

Insert a record into MySQL securely using PDO.

PHP ProgrammingEasy
Save to ▾
Show answer
Use prepared statements so input is never part of the SQL text: $pdo = new PDO('mysql:host=localhost;dbname=school;charset=utf8mb4', $user, $pass, [ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION ]); $stmt = $pdo->prepare('INSERT INTO students (name, email) VALUES (:name, :email)'); $stmt->execute([ ':name' => $_POST['name'], ':email' => $_POST['email'] ]); echo 'Saved with id ' . $pdo->lastInsertId(); The utf8mb4 charset supports all Unicode, including Hindi text and emoji.
09

Write a PHP login script using password_verify and sessions.

PHP ProgrammingMedium
Save to ▾
Show answer
Fetch the user, verify the hash and regenerate the session id: session_start(); $stmt = $pdo->prepare('SELECT id, password_hash FROM users WHERE email = ?'); $stmt->execute([$_POST['email']]); $user = $stmt->fetch(); if ($user && password_verify($_POST['password'], $user['password_hash'])) { session_regenerate_id(true); $_SESSION['user_id'] = $user['id']; header('Location: /dashboard.php'); exit; } $error = 'Invalid email or password'; Regenerating the id prevents session fixation attacks.
10

What is CSRF and how do you prevent it?

Web SecurityMedium
Save to ▾
Show answer
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.
11

Schedule a nightly database backup with cron.

Hosting and DeploymentMedium
Save to ▾
Show answer
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.
12

Explain the difference between async and defer on a script tag.

HTML FundamentalsMedium
Save to ▾
Show answer
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.
13

Use clamp() to create fluid typography.

CSS Layout and Responsive DesignHard
Save to ▾
Show answer
clamp(min, preferred, max) scales text smoothly between limits: h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); } p { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); } The heading never goes below 28 pixels on phones or above 56 pixels on large screens. Mixing rem with vw in the middle value keeps text zoomable for accessibility, unlike pure vw values.
14

Write a function that groups an array of students by city.

JavaScript CoreMedium
Save to ▾
Show answer
Object.groupBy is available in modern browsers and Node 21+, with reduce as a fallback: const students = [ { name: 'Asha', city: 'Delhi' }, { name: 'Ravi', city: 'Pune' }, { name: 'Neha', city: 'Delhi' } ]; const byCity = Object.groupBy(students, s => s.city); const byCity2 = students.reduce((acc, s) => { (acc[s.city] ||= []).push(s); return acc; }, {}); Both return { Delhi: [...], Pune: [...] }.
15

Explain transaction isolation levels in MySQL.

MySQL DatabaseHard
Save to ▾
Show answer
READ UNCOMMITTED allows dirty reads of uncommitted data. READ COMMITTED sees only committed data but the same query can return different results within a transaction. REPEATABLE READ, the InnoDB default, gives a consistent snapshot for the whole transaction and uses gap locks to prevent most phantom rows. SERIALIZABLE is the strictest and slowest. Higher isolation means fewer anomalies but more locking and contention.
16

What are transactions and ACID properties?

MySQL DatabaseMedium
Save to ▾
Show answer
A transaction groups several SQL statements so they succeed or fail together. ACID means Atomicity, all or nothing; Consistency, rules and constraints stay valid; Isolation, concurrent transactions do not see each other's partial changes; and Durability, committed data survives crashes. For example, transferring wallet balance debits one row and credits another inside START TRANSACTION and COMMIT, with ROLLBACK if anything fails.
17

A cart total shows 0.30000000000000004 instead of 0.3. Why, and how do you fix it?

JavaScript CoreMedium
Save to ▾
Show answer
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.
18

Make a header that sticks to the top while scrolling.

CSS Layout and Responsive DesignMedium
Save to ▾
Show answer
position: sticky keeps the header in normal flow until it reaches the top: .site-header { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.08); } Sticky fails if any ancestor has overflow: hidden or overflow: auto, so check parents when it does not work. Setting a background prevents content showing through while scrolling.
19

How do SSL/TLS certificates work, and what is Let's Encrypt?

Hosting and DeploymentMedium
Save to ▾
Show answer
A TLS certificate proves a server owns a domain and enables encrypted HTTPS connections. During the handshake, the browser verifies the certificate chain against trusted authorities, and both sides agree on session keys. Let's Encrypt is a free, automated certificate authority; tools like Certbot request and renew its certificates, which are valid for about 90 days. Automatic renewal through cron or systemd timers prevents expiry outages.
20

Write .htaccess rules to force HTTPS and the non-www domain.

Hosting and DeploymentMedium
Save to ▾
Show answer
On Apache with mod_rewrite enabled: RewriteEngine On RewriteCond %{HTTPS} off [OR] RewriteCond %{HTTP_HOST} ^www\. [NC] RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC] RewriteRule ^ https://%1%{REQUEST_URI} [L,R=301] A 301 redirect tells search engines the change is permanent, so ranking signals move to one canonical URL. Test carefully, because a wrong rule can cause a redirect loop behind a proxy or load balancer.
21

A third-party widget's CSS keeps overriding your button styles. How do you handle it?

CSS Layout and Responsive DesignHard
Save to ▾
Show answer
First I would check which selector wins in DevTools and why. Options include scoping my styles with a more specific component class, using CSS cascade layers so third-party CSS sits in a lower layer, or loading the widget inside an iframe or Shadow DOM so its styles are isolated. I would avoid adding !important everywhere, because it starts an override war that becomes impossible to maintain.
22

Your application logs show frequent deadlock errors. What do you do?

MySQL DatabaseHard
Save to ▾
Show answer
A deadlock happens when two transactions each hold a lock the other needs; InnoDB kills one. I would read SHOW ENGINE INNODB STATUS to see the conflicting queries. Fixes include accessing tables and rows in a consistent order, keeping transactions short, adding indexes so updates lock fewer rows, and avoiding user interaction inside a transaction. The application should also retry the failed transaction once or twice.
23

Write CSS for a simple responsive navigation that becomes a column on mobile.

CSS Layout and Responsive DesignEasy
Save to ▾
Show answer
Mobile-first, then switch to a row on wider screens: .nav { display: flex; flex-direction: column; gap: 0.5rem; } @media (min-width: 768px) { .nav { flex-direction: row; justify-content: space-between; align-items: center; } } On phones the links stack for easy tapping. Add a toggle button with aria-expanded if the menu should collapse behind a hamburger icon.
24

What are traits in PHP?

PHP ProgrammingMedium
Save to ▾
Show answer
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.
25

Open and close an accessible modal using the native dialog element.

DOM and Browser EventsMedium
Save to ▾
Show answer
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.
26

Use the picture element to serve WebP or AVIF with a JPEG fallback.

HTML FundamentalsMedium
Save to ▾
Show answer
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.
27

What is CORS and why does the browser block some API calls?

Web SecurityMedium
Save to ▾
Show answer
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.
28

Explain the JavaScript event loop.

JavaScript CoreHard
Save to ▾
Show answer
JavaScript runs on a single main thread with a call stack. Asynchronous work like timers, network requests and events is handled by browser APIs, and their callbacks are queued. After the stack is empty, the event loop first runs all microtasks, such as promise callbacks and queueMicrotask, then takes the next macrotask, such as a setTimeout callback. That is why a resolved promise logs before a setTimeout of 0.
29

What does declare(strict_types=1) do?

PHP ProgrammingHard
Save to ▾
Show answer
By default PHP coerces scalar types, so passing '5' to a function expecting int silently works. With declare(strict_types=1) at the top of a file, calls made from that file must pass exactly the declared types, or a TypeError is thrown. It catches bugs early, especially in APIs where values arrive as strings. It applies per file, to calls made from the file, not to the whole project.
30

What are custom events and when would you use them?

DOM and Browser EventsMedium
Save to ▾
Show answer
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.
31

An attacker uploaded a PHP web shell through the profile picture feature. How did it happen and how do you prevent it?

Web SecurityHard
Save to ▾
Show answer
The upload likely trusted the file extension or the browser-sent MIME type and saved files inside a web-accessible folder where PHP executes. To prevent it, verify the real type with finfo, re-encode images with GD or Imagick, rename files randomly with safe extensions, store uploads outside the web root or on object storage, and disable PHP execution in the uploads directory through server configuration.
32

What are the differences between Apache and Nginx?

Hosting and DeploymentMedium
Save to ▾
Show answer
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.
33

Compare shared hosting, VPS and cloud hosting.

Hosting and DeploymentEasy
Save to ▾
Show answer
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.
34

How is querySelector different from getElementById and getElementsByClassName?

DOM and Browser EventsEasy
Save to ▾
Show answer
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.
35

What is the difference between an abstract class and an interface in PHP?

PHP ProgrammingMedium
Save to ▾
Show answer
An interface defines only method signatures and constants, and a class can implement many interfaces. An abstract class can contain properties, constructors and implemented methods along with abstract ones, but a class can extend only one. Use an interface to define a contract like PaymentGateway, and an abstract class to share common code among closely related classes, such as a base Controller.
36

Implement infinite scroll using IntersectionObserver.

DOM and Browser EventsHard
Save to ▾
Show answer
Observe a sentinel element at the bottom of the list: const sentinel = document.querySelector('#sentinel'); let page = 1, loading = false; const observer = new IntersectionObserver(async ([entry]) => { if (!entry.isIntersecting || loading) return; loading = true; const res = await fetch('/api/posts?page=' + (++page)); const posts = await res.json(); if (!posts.length) observer.disconnect(); posts.forEach(renderPost); loading = false; }, { rootMargin: '200px' }); observer.observe(sentinel); It is far cheaper than listening to every scroll event.
37

A user can view another user's invoice by changing the id in the URL. What is this and how do you fix it?

Web SecurityHard
Save to ▾
Show answer
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.
38

Write an accessible login form with proper labels.

HTML FundamentalsEasy
Save to ▾
Show answer
Every input needs a label linked through for and id, the right input type and autocomplete hints: <form action='/login' method='post'> <label for='email'>Email</label> <input id='email' name='email' type='email' autocomplete='email' required> <label for='pwd'>Password</label> <input id='pwd' name='password' type='password' autocomplete='current-password' required minlength='8'> <button type='submit'>Log in</button> </form> Clicking a label focuses its input and screen readers read the label aloud.
39

How do indexes work and when can they hurt performance?

MySQL DatabaseHard
Save to ▾
Show answer
InnoDB indexes are B+ trees that let MySQL find rows without scanning the whole table, which speeds up WHERE, JOIN and ORDER BY on indexed columns. A composite index follows the leftmost prefix rule. Indexes cost extra disk space and slow down INSERT, UPDATE and DELETE because each index must be updated. Low-selectivity columns like gender rarely benefit, and functions on columns in WHERE can stop index use.
40

What are data-* attributes and when do you use them?

HTML FundamentalsMedium
Save to ▾
Show answer
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.

Frequently asked questions

What happens in the Web Development technical round round?

The technical round is the core of a Web Development interview: concept questions with follow-ups, a live hands-on task and a deep dive into one of your projects. Interviewers check depth, not just definitions.

How do I clear the technical round round?

Say your approach out loud before you start writing. After a correct answer, expect 'why?' and 'what if?' follow-ups; go one level deeper than the question. Pick one project you can explain end to end, including what you would do differently.

Which round comes next?

A typical order is online assessment, telephonic screening, one or two technical rounds, a managerial round and HR. Use the other round pages to practise each stage.

Practise every interview round

Online Assessment questionsTelephonic Interview questionsManagerial Round questionsRapid-Fire questionsHR & behavioural questionsFull mock interview

More ways to practise

Company-wise Web Development questionsExperience-wise Web Development questionsRole-wise Web Development questionsCity-wise Web Development questionsMost asked Web Development questionsScenario-based questionsPractical / hands-on questionsHR & behavioural questionsWeb Development mock interviewOnline assessment questionsTechnical round questionsManagerial round questionsWeb Development topic sheets