‹ Back to previous section Course home All page URLs

Top 50 Most Asked Web Development Interview Questions

The questions that appear most often across company-wise sets — master these first.

Why start here

We count how often each question appears across the 20 company-wise Web Development practice sets on this site and show the 50 most common. They are the safest questions to master first.

Solved — top 50Start 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

What is margin collapsing?

CSS Layout and Responsive DesignIn 8 company setsMedium

Show answer

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.

What is the difference between pseudo-classes and pseudo-elements?

CSS Layout and Responsive DesignIn 8 company setsEasy

Show answer

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.

What is the difference between UNION and UNION ALL?

MySQL DatabaseIn 8 company setsEasy

Show answer

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.

How do you test a website for cross-browser compatibility?

CSS Layout and Responsive DesignIn 7 company setsMedium

Show answer

I check feature support on Can I Use before using new CSS, and use Autoprefixer through the build for vendor prefixes. I test on Chrome, Firefox, Safari and Edge, plus real Android and iPhone devices because Safari on iOS behaves differently. Cloud testing platforms help when devices are missing. I use @supports for progressive enhancement, so older browsers still get a working, simpler layout.

Validate and sanitise different types of input in PHP.

Web SecurityIn 7 company setsMedium

Show answer

Use filter functions and allow-lists: $email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL); $age = filter_input(INPUT_POST, 'age', FILTER_VALIDATE_INT, ['options' => ['min_range' => 18, 'max_range' => 60]]); $sort = in_array($_GET['sort'] ?? '', ['name', 'price'], true) ? $_GET['sort'] : 'name'; if ($email === false || $age === false) { $errors[] = 'Please enter a valid email and age.'; } Allow-lists are essential for values like column names that cannot be bound as prepared statement parameters.

What is the difference between block-level and inline elements?

HTML FundamentalsIn 6 company setsEasy

Show answer

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.

How do srcset and sizes help with responsive images?

HTML FundamentalsIn 6 company setsMedium

Show answer

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.

Explain the values of the CSS position property.

CSS Layout and Responsive DesignIn 6 company setsMedium

Show answer

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.

When would you choose Flexbox and when CSS Grid?

CSS Layout and Responsive DesignIn 6 company setsMedium

Show answer

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.

Tell me about a time you disagreed with a designer about a layout.

CSS Layout and Responsive DesignIn 6 company setsMedium

Show answer

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.

What is the difference between a shallow copy and a deep copy?

JavaScript CoreIn 6 company setsMedium

Show answer

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.

What is the difference between null and undefined?

JavaScript CoreIn 6 company setsEasy

Show answer

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.

Remove duplicates from an array of numbers and from an array of objects.

JavaScript CoreIn 6 company setsEasy

Show answer

For primitives, a Set is simplest; for objects, use a Map keyed by id: const nums = [1, 2, 2, 3, 3]; const unique = [...new Set(nums)]; const users = [{ id: 1 }, { id: 2 }, { id: 1 }]; const uniqueUsers = [ ...new Map(users.map(u => [u.id, u])).values() ]; Both are O(n). A Set compares objects by reference, so it cannot remove two different objects with the same id.

Fetch a list of products and render them safely into the page.

DOM and Browser EventsIn 6 company setsMedium

Show answer

Build elements with textContent instead of string HTML: async function loadProducts() { const res = await fetch('/api/products'); const products = await res.json(); const frag = document.createDocumentFragment(); products.forEach(p => { const card = document.createElement('article'); const h3 = document.createElement('h3'); h3.textContent = p.name; const price = document.createElement('p'); price.textContent = 'Rs ' + p.price; card.append(h3, price); frag.append(card); }); grid.append(frag); } The fragment inserts everything in one DOM update.

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

DOM and Browser EventsIn 6 company setsMedium

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.

Should you use PDO or mysqli to connect to MySQL?

PHP ProgrammingIn 6 company setsMedium

Show answer

Both support prepared statements and are secure when used correctly. PDO supports around a dozen databases with the same API, has named placeholders like :email, and throws exceptions cleanly, so switching from MySQL to PostgreSQL is easier. mysqli works only with MySQL but exposes some MySQL-specific features. Most modern codebases and frameworks like Laravel use PDO under the hood, so it is the usual recommendation.

What is MVC and how does Laravel follow it?

PHP ProgrammingIn 6 company setsMedium

Show answer

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.

Tell me about a time you had to work with messy legacy code.

PHP ProgrammingIn 6 company setsMedium

Show answer

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.

What is the difference between a primary key and a foreign key?

MySQL DatabaseIn 6 company setsEasy

Show answer

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.

Explain database normalization up to third normal form.

MySQL DatabaseIn 6 company setsMedium

Show answer

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.

What is the difference between DELETE, TRUNCATE and DROP?

MySQL DatabaseIn 6 company setsEasy

Show answer

DELETE removes selected rows using a WHERE clause, can be rolled back inside a transaction and fires triggers, but is slow on large tables. TRUNCATE removes all rows quickly by recreating the table, resets AUTO_INCREMENT and cannot be rolled back in MySQL. DROP removes the table structure and data completely. Always take a backup and double-check the WHERE clause before running DELETE on production.

Write a query to find duplicate email addresses in a users table.

MySQL DatabaseIn 6 company setsMedium

Show answer

Group by the column and keep groups with more than one row: SELECT email, COUNT(*) AS total FROM users GROUP BY email HAVING COUNT(*) > 1; To delete duplicates but keep the lowest id: DELETE u1 FROM users u1 JOIN users u2 ON u1.email = u2.email AND u1.id > u2.id; Afterwards add a UNIQUE index on email so duplicates cannot come back.

The database server is overloaded by read traffic. What architecture changes would you suggest?

MySQL DatabaseIn 6 company setsMedium

Show answer

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.

What is CSRF and how do you prevent it?

Web SecurityIn 6 company setsMedium

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.

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

Web SecurityIn 6 company setsMedium

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.

Compare shared hosting, VPS and cloud hosting.

Hosting and DeploymentIn 6 company setsEasy

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.

Explain the common DNS record types.

Hosting and DeploymentIn 6 company setsEasy

Show answer

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.

Schedule a nightly database backup with cron.

Hosting and DeploymentIn 6 company setsMedium

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.

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

HTML FundamentalsIn 5 company setsMedium

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.

What is the difference between GET and POST methods in an HTML form?

HTML FundamentalsIn 5 company setsEasy

Show answer

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.

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

HTML FundamentalsIn 5 company setsMedium

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.

A client wants better Google rankings. What HTML-level changes would you make?

HTML FundamentalsIn 5 company setsMedium

Show answer

I would give every page a unique title and meta description, use exactly one clear h1 with a logical h2 and h3 structure, and add descriptive alt text. I would add canonical tags to avoid duplicate content, structured data such as JSON-LD for courses or FAQs, and internal links with meaningful anchor text. I would also improve Core Web Vitals, since page speed affects ranking.

What are truthy and falsy values?

JavaScript CoreIn 5 company setsEasy

Show answer

In a boolean context, JavaScript converts values to true or false. The falsy values are false, 0, -0, 0n, empty string, null, undefined and NaN; everything else is truthy, including '0', empty arrays and empty objects. This matters in conditions: if (items.length) works, but if (count) fails when count is legitimately 0. The nullish coalescing operator ?? helps by only falling back for null or undefined.

An API is being called twice when the page loads. How do you debug it?

JavaScript CoreIn 5 company setsMedium

Show answer

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.

What is the DOM?

DOM and Browser EventsIn 5 company setsEasy

Show answer

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.

Compare localStorage, sessionStorage and cookies.

DOM and Browser EventsIn 5 company setsMedium

Show answer

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.

Validate a signup form with JavaScript before submission.

DOM and Browser EventsIn 5 company setsMedium

Show answer

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.

What is PHP and how does a PHP page get processed?

PHP ProgrammingIn 5 company setsEasy

Show answer

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.

Users get logged out immediately after login when redirected. What could be wrong?

PHP ProgrammingIn 5 company setsMedium

Show answer

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.

Show monthly revenue for the current year from an orders table.

MySQL DatabaseIn 5 company setsMedium

Show answer

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.

Add CSRF protection to a plain PHP form.

Web SecurityIn 5 company setsMedium

Show answer

Generate a token per session and compare it safely: session_start(); if (empty($_SESSION['csrf'])) { $_SESSION['csrf'] = bin2hex(random_bytes(32)); } // in the form echo "<input type='hidden' name='csrf' value='" . $_SESSION['csrf'] . "'>"; // on submit if (!hash_equals($_SESSION['csrf'], $_POST['csrf'] ?? '')) { http_response_code(403); exit('Invalid request'); } hash_equals compares in constant time, which avoids timing attacks.

Limit failed login attempts to stop brute-force attacks.

Web SecurityIn 5 company setsMedium

Show answer

Track failures per account and IP, then block temporarily: $stmt = $pdo->prepare('SELECT COUNT(*) FROM login_attempts WHERE ip = ? AND attempted_at > NOW() - INTERVAL 15 MINUTE'); $stmt->execute([$_SERVER['REMOTE_ADDR']]); if ($stmt->fetchColumn() >= 5) { http_response_code(429); exit('Too many attempts. Try again in 15 minutes.'); } // on failure $pdo->prepare('INSERT INTO login_attempts (ip, attempted_at) VALUES (?, NOW())') ->execute([$_SERVER['REMOTE_ADDR']]); Add CAPTCHA after a few failures and offer two-factor authentication.

A client's WordPress site has been hacked and shows spam links. What steps do you take?

Web SecurityIn 5 company setsMedium

Show answer

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.

What are the differences between Apache and Nginx?

Hosting and DeploymentIn 5 company setsMedium

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.

Emails sent from your website contact form land in spam. How do you fix it?

Hosting and DeploymentIn 5 company setsMedium

Show answer

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.

What is semantic HTML and why does it matter?

HTML FundamentalsIn 4 company setsEasy

Show answer

Semantic HTML uses elements that describe meaning, such as header, nav, main, article, section, aside and footer, instead of generic div tags everywhere. It helps screen readers announce page structure, helps search engines understand which content is primary, and makes code easier to maintain. For example, wrapping the site menu in nav lets assistive technology users jump straight to navigation, which a plain div cannot offer.

When should you use section, article or div?

HTML FundamentalsIn 4 company setsMedium

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.

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

HTML FundamentalsIn 4 company setsMedium

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.

Lighthouse shows a poor Largest Contentful Paint caused by the hero image. What steps do you take?

HTML FundamentalsIn 4 company setsHard

Show answer

First I would compress the image and serve it in AVIF or WebP at the correct size using srcset. I would remove loading='lazy' from it, add fetchpriority='high' and a preload link in the head, and make sure it is in the initial HTML rather than injected by JavaScript. I would also serve it from a CDN and check that render-blocking CSS is not delaying the paint.

Why should external links opened with target='_blank' use rel='noopener'?

HTML FundamentalsIn 4 company setsEasy

Show answer

When a page opens a link in a new tab, the new page historically got access to window.opener and could redirect the original tab to a phishing page, an attack called reverse tabnabbing. Adding rel='noopener' removes that reference, and noreferrer also hides the referring URL. Modern browsers apply noopener by default for target='_blank', but adding it explicitly is still good practice for older browsers.

Frequently asked questions

How is this list made?

We count how often each question appears across the 20 company-wise Web Development practice sets on this site and show the 50 most common. They are the safest questions to master first.

Is this enough to clear an interview?

It is the best starting point, not the finish line. After these, practise the company pages for your target employers and the sheets for your weaker topics.

More ways to practise

Company-wise Web Development questions Experience-wise Web Development questions Role-wise Web Development questions City-wise Web Development questions Scenario-based questions Practical / hands-on questions HR & behavioural questions Web Development mock interview Online assessment questions Technical round questions Managerial round questions Web Development topic sheets