Easy Web Development Interview Questions

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.

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

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.

What does the DOCTYPE declaration do in an HTML page?

Show answer

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.

What is the difference between id and class attributes?

Show answer

An id must be unique within a page and identifies one element, so it is used for anchor links, label for attributes and getElementById. A class can be reused on many elements and is the normal hook for CSS styling and grouping in JavaScript. Ids also have much higher CSS specificity, so styling with ids makes overrides harder; most teams style only with classes.

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

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.

Write an accessible login form with proper labels.

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.

Write the basic SEO meta tags for a course landing page.

Show answer

Key tags go in the head: <title>Full Stack Web Development Course in Noida</title> <meta name='description' content='Learn HTML, CSS, JavaScript, PHP and MySQL with live projects.'> <link rel='canonical' href='https://example.com/web-development'> <meta property='og:title' content='Web Development Course'> <meta property='og:image' content='https://example.com/og.jpg'> <meta name='robots' content='index, follow'> Keep titles under about 60 characters and descriptions near 150 to 160 characters.

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

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.

Tell me about a website you built from scratch.

Show answer

Situation: during my final year, a local coaching institute needed a website. Task: I had to build a responsive site with course pages and an enquiry form in three weeks. Action: I designed the layout in Figma, built it with semantic HTML, CSS Grid and JavaScript, stored enquiries in MySQL through PHP and deployed it on shared hosting. Result: it scored above 90 in Lighthouse and brought enquiries within the first month.

Explain the CSS box model.

Show answer

Every element is a rectangular box made of content, padding, border and margin from inside to outside. With the default box-sizing: content-box, the width you set applies only to the content, so padding and border increase the final size. Setting box-sizing: border-box makes width include padding and border, which makes layouts predictable. Most projects apply border-box to all elements in a global reset.

How does CSS specificity work?

Show answer

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.

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

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.

Center a div horizontally and vertically using Flexbox and Grid.

Show answer

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.

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

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.

Uploaded images overflow their containers and break the layout. What is the fix?

Show answer

Images keep their natural size by default, so a 2000 pixel photo will overflow a 350 pixel card. A global rule img { max-width: 100%; height: auto; display: block; } makes them shrink to fit while keeping the aspect ratio. For fixed-size thumbnails I would add width, height and object-fit: cover so different photo shapes crop neatly without stretching.

How do you handle a very tight deadline for a landing page?

Show answer

Situation: a marketing team needed a campaign landing page in two days. Task: I had to ship a responsive, fast page with a lead form. Action: I confirmed the must-have sections first, reused existing components and a CSS grid template, and tested on three devices while building instead of at the end. Result: the page went live on time with a Lighthouse score above 90, and I added animations in a later update.

What is the difference between var, let and const?

Show answer

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.

What is hoisting in JavaScript?

Show answer

Hoisting means declarations are processed before code runs, so they behave as if moved to the top of their scope. Function declarations are hoisted completely and can be called before they appear. var variables are hoisted but set to undefined until assignment. let, const and class are hoisted too, but accessing them before declaration throws a ReferenceError because of the temporal dead zone.

What is the difference between == and ===?

Show answer

== 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.

What are truthy and falsy values?

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.

What is the difference between null and undefined?

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.

What are the spread and rest operators?

Show answer

Both use three dots but do opposite jobs. Spread expands an iterable or object into individual elements, for example [...a, ...b] to merge arrays or {...user, city: 'Pune'} to copy and update an object. Rest collects multiple values into one, for example function sum(...nums) gathers all arguments into an array, or const { id, ...others } = user separates one property from the rest.

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

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.

Use map, filter and reduce to calculate the total price of in-stock items.

Show answer

Chain the methods so each does one job: const cart = [ { name: 'Mouse', price: 499, qty: 2, inStock: true }, { name: 'Keyboard', price: 1299, qty: 1, inStock: false } ]; const total = cart .filter(item => item.inStock) .map(item => item.price * item.qty) .reduce((sum, value) => sum + value, 0); console.log(total); // 998 Always pass an initial value to reduce so empty arrays return 0 instead of throwing.

Your code throws 'Unexpected token < in JSON' after an API call. What does it mean?

Show answer

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.

How do you learn a new JavaScript concept you do not understand?

Show answer

I start with MDN for the precise definition, then write tiny experiments in the browser console to see the behaviour myself. If it is still unclear, I watch a short explanation and try to explain it in my own words in notes. For example, I learned the event loop by predicting the output of mixed setTimeout and promise code, checking it, and repeating until my predictions were right.

What is the DOM?

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.

What is the difference between preventDefault and stopPropagation?

Show answer

preventDefault stops the browser's default action for the event, such as a form submitting and reloading the page or a link navigating. stopPropagation stops the event from bubbling further to parent elements, but the default action still happens. They solve different problems and are sometimes used together. Overusing stopPropagation can break delegated listeners and analytics scripts that listen at the document level.

What is the difference between DOMContentLoaded and the load event?

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.

How is querySelector different from getElementById and getElementsByClassName?

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.

What is AJAX and how is it done today?

Show answer

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.

Build a todo list where items can be added and deleted using event delegation.

Show answer

One listener on the list handles all delete buttons: const form = document.querySelector('#todo-form'); const list = document.querySelector('#todo-list'); form.addEventListener('submit', (e) => { e.preventDefault(); const li = document.createElement('li'); li.textContent = form.task.value; const btn = document.createElement('button'); btn.textContent = 'Delete'; btn.className = 'delete'; li.append(btn); list.append(li); form.reset(); }); list.addEventListener('click', (e) => { if (e.target.matches('.delete')) e.target.closest('li').remove(); });

Click handlers do not work on buttons added after the page loads. Why?

Show answer

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.

How would you explain a technical problem to a non-technical client?

Show answer

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.

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

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.

What is the difference between echo and print in PHP?

Show answer

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).

What is the difference between sessions and cookies in PHP?

Show answer

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.

Explain include, require, include_once and require_once.

Show answer

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.

What are PHP superglobals?

Show answer

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).

Insert a record into MySQL securely using PDO.

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.

Use the PHP 8 match expression instead of a switch.

Show answer

match returns a value, uses strict comparison and needs no break: $status = 'shipped'; $label = match ($status) { 'pending' => 'Order received', 'shipped', 'in_transit' => 'On the way', 'delivered' => 'Delivered', default => 'Unknown status', }; echo $label; Unlike switch, match throws an UnhandledMatchError if no arm matches and there is no default, which surfaces missing cases early.

A PHP page shows a blank white screen. How do you debug it?

Show answer

A white screen usually means a fatal error with display_errors turned off. I would check the PHP error log or server log first, for example the Apache or PHP-FPM log. On a local or staging machine I would enable error_reporting(E_ALL) and display_errors. Common causes are syntax errors, missing extensions like pdo_mysql, memory limit exhaustion, or a missing vendor folder. On production, errors should be logged, never displayed.

You see 'Headers already sent' warnings. What causes it and how do you fix it?

Show answer

header(), setcookie() and session_start() must run before any output reaches the browser. The warning appears when something was printed earlier, such as an echo, HTML outside PHP tags, whitespace after a closing ?> tag, or a UTF-8 BOM at the start of a file. The message names the file and line that produced output. Removing closing ?> tags in pure PHP files prevents most cases.

Why did you choose PHP for backend development?

Show answer

I chose PHP because it powers a large share of websites, including WordPress, and many Indian agencies and product companies still hire PHP and Laravel developers. It is quick to deploy on almost any hosting. I started with plain PHP to understand requests, sessions and databases, then learned Laravel. In my project, a course enquiry portal, Laravel's validation and Eloquent let me deliver features in half the time.

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

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 INNER JOIN, LEFT JOIN and RIGHT JOIN.

Show answer

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.

What is the difference between WHERE and HAVING?

Show answer

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.

What is the difference between DELETE, TRUNCATE and DROP?

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.

When should you use CHAR, VARCHAR and TEXT?

Show answer

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.

What is the difference between UNION and UNION ALL?

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.

Write a query to find the second highest salary.

Show answer

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.

How do you make sure you do not break production data while working?

Show answer

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.

What is SQL injection and how do prepared statements stop it?

Show answer

SQL injection happens when user input is concatenated into a query, so input like ' OR '1'='1 changes the query's logic and can dump or delete data. Prepared statements send the SQL structure and the data separately, so the database always treats input as a value, never as code. Escaping functions are not a full substitute. Least-privilege database users limit the damage if a flaw slips through.

Escape user data correctly when printing it in PHP templates.

Show answer

Escape at output time for the right context: function e(string $value): string { return htmlspecialchars($value, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8'); } echo '<p>' . e($comment) . '</p>'; echo "<input value='" . e($name) . "'>"; $url = urlencode($search); echo '<a href="/search?q=' . $url . '">Search</a>'; ENT_QUOTES escapes both quote types so attributes are safe. JavaScript and URL contexts need their own encoding; Blade's double braces do this automatically.

After moving to HTTPS, browsers show mixed content warnings. How do you fix them?

Show answer

Mixed content means an HTTPS page still loads images, scripts or styles over plain HTTP, and browsers block or upgrade them. I would find them in the DevTools console, update hard-coded http:// URLs in templates and the database to https:// or relative paths, and fix third-party embeds. Adding the CSP directive upgrade-insecure-requests is a safety net, and HSTS ensures future visits always use HTTPS.

What is a mistake you made in web development and what did you learn?

Show answer

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.

Compare shared hosting, VPS and cloud hosting.

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.

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.

You changed DNS to a new server but some users still see the old site. Why?

Show answer

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.

Why do you want to work as a web developer?