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

Web Development Interview Questions & Answers

All 200 unique questions in one place — 60 easy, 94 medium, 46 hard — grouped by topic.

Practise by topic

HTML Fundamentals · 25CSS Layout and Responsive Design · 27JavaScript Core · 25DOM and Browser Events · 25PHP Programming · 26MySQL Database · 25Web Security · 24Hosting and Deployment · 23

Practise the way your interview works

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
Solved overallStart 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 semantic HTML and why does it matter?

HTML FundamentalsEasy
Save to ▾
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.
02

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

HTML FundamentalsEasy
Save to ▾
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.
03

What does the DOCTYPE declaration do in an HTML page?

HTML FundamentalsEasy
Save to ▾
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.
04

What is the difference between id and class attributes?

HTML FundamentalsEasy
Save to ▾
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.
05

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

HTML FundamentalsEasy
Save to ▾
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.
06

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

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

HTML FundamentalsEasy
Save to ▾
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.
08

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

HTML FundamentalsEasy
Save to ▾
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.
09

Tell me about a website you built from scratch.

HTML FundamentalsEasy
Save to ▾
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.
10

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

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

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

How do srcset and sizes help with responsive images?

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

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

Show HTML5 built-in validation for a registration form.

HTML FundamentalsMedium
Save to ▾
Show answer
HTML5 attributes validate input before any JavaScript runs: <input type='text' name='name' required minlength='3' maxlength='50'> <input type='email' name='email' required> <input type='tel' name='mobile' pattern='[6-9][0-9]{9}' title='10 digit mobile number'> <input type='number' name='age' min='18' max='60'> <input type='url' name='portfolio'> The browser blocks submission and shows a message when rules fail. Server-side validation is still mandatory because client checks can be bypassed.
17

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

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

An accessibility audit gives your site a low score. What would you fix first?

HTML FundamentalsMedium
Save to ▾
Show answer
I would start with issues that block users completely: missing alt text on meaningful images, form inputs without labels, poor colour contrast, and controls that cannot be reached by keyboard. Then I would fix heading order, add a skip link, use semantic landmarks and make focus outlines visible. I would test with Lighthouse or axe, then manually with Tab key navigation and a screen reader like NVDA.
20

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

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

Product images look blurry on high-resolution phone screens. How do you fix it?

HTML FundamentalsMedium
Save to ▾
Show answer
High-density screens have a device pixel ratio of 2 or 3, so a 300 pixel wide image displayed at 300 CSS pixels looks soft. I would export 2x and 3x versions and serve them through srcset with x descriptors or width descriptors plus sizes. For icons and logos I would switch to SVG, which stays sharp at any size and is usually smaller than multiple raster versions.
22

How do you keep yourself updated with changes in web standards?

HTML FundamentalsMedium
Save to ▾
Show answer
I follow MDN Web Docs, web.dev and the release notes of Chrome and Firefox, and I check Can I Use before adopting a new feature. Every few weeks I build a small demo with something new, such as container queries or the popover attribute, and push it to GitHub. For example, after reading about native lazy loading, I replaced a JavaScript library in my project and reduced the bundle size.
23

Explain the critical rendering path and how HTML structure affects it.

HTML FundamentalsHard
Save to ▾
Show answer
The browser parses HTML into the DOM, CSS into the CSSOM, combines them into a render tree, then calculates layout and paints pixels. CSS in the head is render-blocking and synchronous scripts block parsing, so their placement decides how fast the first paint appears. Good practice is to inline small critical CSS, defer non-essential scripts, preload key fonts and hero images, and keep the initial HTML lean.
24

A contact form is receiving hundreds of spam submissions daily. What do you do?

HTML FundamentalsHard
Save to ▾
Show answer
I would layer defences rather than rely on one trick. On the front end, add a hidden honeypot field that bots fill and humans do not, and add an invisible CAPTCHA such as reCAPTCHA v3 or Turnstile. On the server, validate every field, apply rate limiting per IP, reject submissions that arrive too fast after page load, and log patterns. Real protection must be server side because bots skip JavaScript.
25

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

HTML FundamentalsHard
Save to ▾
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.
26

Explain the CSS box model.

CSS Layout and Responsive DesignEasy
Save to ▾
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.
27

How does CSS specificity work?

CSS Layout and Responsive DesignEasy
Save to ▾
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.
28

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

CSS Layout and Responsive DesignEasy
Save to ▾
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.
29

Center a div horizontally and vertically using Flexbox and Grid.

CSS Layout and Responsive DesignEasy
Save to ▾
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.
30

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

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

CSS Layout and Responsive DesignEasy
Save to ▾
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.
32

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

CSS Layout and Responsive DesignEasy
Save to ▾
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.
33

Explain the values of the CSS position property.

CSS Layout and Responsive DesignMedium
Save to ▾
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.
34

When would you choose Flexbox and when CSS Grid?

CSS Layout and Responsive DesignMedium
Save to ▾
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.
35

What is the difference between px, em and rem units?

CSS Layout and Responsive DesignMedium
Save to ▾
Show answer
px is a fixed unit. em is relative to the font size of the current element, so nested em values compound and can grow unexpectedly. rem is relative to the root html font size, usually 16 pixels, so 1.5rem is always 24 pixels unless the user changes browser settings. Using rem for font sizes and spacing respects user preferences and keeps scaling consistent across the site.
36

What are CSS custom properties and how are they different from Sass variables?

CSS Layout and Responsive DesignMedium
Save to ▾
Show answer
Custom properties like --brand: #2563eb are defined in CSS and read with var(--brand). They cascade, can be changed per element or media query, and can be updated at runtime with JavaScript, which makes themes and dark mode easy. Sass variables are replaced at compile time and do not exist in the browser. Many teams use both: Sass for build-time logic and custom properties for runtime theming.
37

What does mobile-first CSS mean?

CSS Layout and Responsive DesignMedium
Save to ▾
Show answer
Mobile-first means writing base styles for small screens and adding min-width media queries to enhance the layout for larger screens. Small devices then download and apply only simple rules, and the design is forced to prioritise essential content. For example, cards stack in one column by default, and @media (min-width: 768px) switches them to a two or three column grid.
38

What is margin collapsing?

CSS Layout and Responsive DesignMedium
Save to ▾
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.
39

Create a responsive card grid that needs no media queries.

CSS Layout and Responsive DesignMedium
Save to ▾
Show answer
auto-fit with minmax lets the grid decide how many columns fit: .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } Each card is at least 250 pixels wide and the extra space is shared equally. On a phone it shows one column, on a tablet two and on a desktop three or four, all from three lines of CSS.
40

Implement dark mode using CSS custom properties.

CSS Layout and Responsive DesignMedium
Save to ▾
Show answer
Define colour tokens and override them for dark preference: :root { --bg: #ffffff; --text: #1f2937; } @media (prefers-color-scheme: dark) { :root { --bg: #111827; --text: #f3f4f6; } } [data-theme='dark'] { --bg: #111827; --text: #f3f4f6; } body { background: var(--bg); color: var(--text); } The media query follows the system setting, and the data-theme attribute lets a toggle button override it with JavaScript.
41

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

Your page shows a horizontal scrollbar on mobile. How do you find and fix the cause?

CSS Layout and Responsive DesignMedium
Save to ▾
Show answer
Horizontal scroll means some element is wider than the viewport. I would open Chrome DevTools device mode and use a temporary rule like * { outline: 1px solid red } to spot the culprit. Common causes are fixed pixel widths, images without max-width: 100%, long unbroken URLs, and 100vw combined with padding. Fixes include max-width, overflow-wrap: anywhere and box-sizing: border-box. I avoid hiding it with overflow-x: hidden without fixing the root cause.
43

A modal appears behind the header even with z-index 9999. What is wrong?

CSS Layout and Responsive DesignMedium
Save to ▾
Show answer
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.
44

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

CSS Layout and Responsive DesignMedium
Save to ▾
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.
45

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

CSS Layout and Responsive DesignMedium
Save to ▾
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.
46

What is a stacking context and why does z-index sometimes not work?

CSS Layout and Responsive DesignHard
Save to ▾
Show answer
A stacking context is an independent layer group in which z-index values are compared. It is created by the root, positioned elements with a z-index, and properties like opacity below 1, transform, filter and isolation: isolate. A child can never appear above something outside its parent's stacking context, no matter how high its z-index is. Fixing it usually means moving the element or removing the property that created the context.
47

What are container queries and how do they differ from media queries?

CSS Layout and Responsive DesignHard
Save to ▾
Show answer
Media queries respond to the viewport size, while container queries respond to the size of a parent element. You mark a parent with container-type: inline-size and then write @container (min-width: 400px) rules for its children. This lets a card component change layout depending on whether it sits in a narrow sidebar or a wide main area, making components truly reusable. They are supported in all modern browsers.
48

Compare BEM and utility-first approaches to CSS architecture.

CSS Layout and Responsive DesignHard
Save to ▾
Show answer
BEM names classes as block__element--modifier, such as card__title--large, which keeps styles scoped and readable in large codebases. Utility-first frameworks like Tailwind CSS compose small single-purpose classes in the markup, which speeds up development and avoids growing stylesheets. BEM gives cleaner HTML, utilities give consistency and smaller final CSS after purging. The right choice depends on team size, design system and tooling.
49

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

The site's main CSS file is 400 KB and first paint is slow. How do you optimise it?

CSS Layout and Responsive DesignHard
Save to ▾
Show answer
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.
51

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

Your page has a high Cumulative Layout Shift because of fonts and ads. How do you reduce it?

CSS Layout and Responsive DesignHard
Save to ▾
Show answer
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.
53

What is the difference between var, let and const?

JavaScript CoreEasy
Save to ▾
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.
54

What is hoisting in JavaScript?

JavaScript CoreEasy
Save to ▾
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.
55

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

JavaScript CoreEasy
Save to ▾
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.
56

What are truthy and falsy values?

JavaScript CoreEasy
Save to ▾
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.
57

What is the difference between null and undefined?

JavaScript CoreEasy
Save to ▾
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.
58

What are the spread and rest operators?

JavaScript CoreEasy
Save to ▾
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.
59

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

JavaScript CoreEasy
Save to ▾
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.
60

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

JavaScript CoreEasy
Save to ▾
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.
61

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

JavaScript CoreEasy
Save to ▾
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.
62

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

JavaScript CoreEasy
Save to ▾
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.
63

Explain closures with an example.

JavaScript CoreMedium
Save to ▾
Show answer
A closure is a function that remembers variables from the scope where it was created, even after that outer function has finished. For example, function counter() { let count = 0; return () => ++count; } returns a function that keeps its own private count. Closures are used for data privacy, function factories, debounce helpers and event handlers. Their trade-off is that captured variables stay in memory as long as the function exists.
64

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

What is the difference between Promises and async/await?

JavaScript CoreMedium
Save to ▾
Show answer
A Promise represents a value that will be available later, handled with then and catch chains. async/await is syntax built on promises: an async function always returns a promise, and await pauses that function until the promise settles, making code read top to bottom. Errors are handled with try and catch. For parallel work you still use Promise.all, because awaiting calls one by one runs them sequentially.
66

How do arrow functions differ from regular functions?

JavaScript CoreMedium
Save to ▾
Show answer
Arrow functions have shorter syntax, an implicit return for single expressions, and no own this, arguments or super; they inherit these from the outer scope. They cannot be used as constructors with new and do not have a prototype property. This makes them ideal for callbacks like array.map, but unsuitable for object methods that need this to refer to the object, or for event handlers that rely on this as the element.
67

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

JavaScript CoreMedium
Save to ▾
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.
68

Write a debounce function and explain where it is used.

JavaScript CoreMedium
Save to ▾
Show answer
Debounce delays a function until calls stop for a given time: function debounce(fn, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); }; } const onSearch = debounce((e) => fetchResults(e.target.value), 300); input.addEventListener('input', onSearch); It is used for search boxes, window resize and autosave, so the API is called once after the user pauses typing.
69

Fetch data from an API with async/await and handle errors properly.

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

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: [...] }.
71

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

JavaScript CoreMedium
Save to ▾
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.
72

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

Describe a bug you found in production and how you handled it.

JavaScript CoreMedium
Save to ▾
Show answer
Situation: after a release, users reported the checkout button did nothing on some phones. Task: I had to find and fix it quickly. Action: I reproduced it on an older Safari, found that a new array method was unsupported, rolled back the change, then added a polyfill and Babel targets for those browsers. Result: the fix shipped the same day, and we added real-device checks to our release checklist.
74

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

Explain prototypal inheritance in JavaScript.

JavaScript CoreHard
Save to ▾
Show answer
Every object has an internal link to another object called its prototype. When a property is not found on the object, JavaScript looks up the prototype chain until it reaches Object.prototype and then null. Class syntax is a cleaner layer over this model: class Admin extends User sets Admin.prototype to inherit from User.prototype. Methods defined on the prototype are shared across instances, which saves memory.
76

What are iterators and generators in JavaScript?

JavaScript CoreHard
Save to ▾
Show answer
An iterator is an object with a next() method returning { value, done }, and any object with a Symbol.iterator method can be used in for...of loops and spread syntax. A generator function, written function*, creates iterators easily: each yield pauses execution and returns a value, resuming on the next call. Generators are useful for lazy sequences, such as paginated API results, without building huge arrays in memory.
77

A dashboard page becomes slower the longer it stays open. What could cause it?

JavaScript CoreHard
Save to ▾
Show answer
This points to a memory leak. Typical causes are setInterval timers never cleared, event listeners added repeatedly on re-render, detached DOM nodes still referenced in arrays, and growing caches. I would take heap snapshots in the DevTools Memory tab a few minutes apart and compare retained objects. Fixes include clearInterval on cleanup, removeEventListener or AbortController for listeners, and limiting cached data size.
78

What is the DOM?

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

What is the difference between preventDefault and stopPropagation?

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

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

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

What is AJAX and how is it done today?

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

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

DOM and Browser EventsEasy
Save to ▾
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(); });
84

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

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

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

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

Explain event bubbling and capturing.

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

What is event delegation and why is it useful?

DOM and Browser EventsMedium
Save to ▾
Show answer
Event delegation attaches one listener to a common parent instead of many listeners on child elements, then uses event.target.closest() to find which child was clicked. Because of bubbling, it works even for children added later. For example, one listener on a ul can handle delete buttons for hundreds of todo items. It saves memory and avoids re-binding listeners after dynamic updates.
88

What is the difference between innerHTML, textContent and innerText?

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

Compare localStorage, sessionStorage and cookies.

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

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

Validate a signup form with JavaScript before submission.

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

Create a dark mode toggle that remembers the user's choice.

DOM and Browser EventsMedium
Save to ▾
Show answer
Store the choice in localStorage and apply it on load: const root = document.documentElement; const saved = localStorage.getItem('theme'); if (saved) root.dataset.theme = saved; toggle.addEventListener('click', () => { const next = root.dataset.theme === 'dark' ? 'light' : 'dark'; root.dataset.theme = next; localStorage.setItem('theme', next); toggle.setAttribute('aria-pressed', next === 'dark'); }); Running the first lines in a small inline script in the head avoids a flash of the wrong theme.
93

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

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

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

A comment section displays user input using innerHTML. What is the risk and fix?

DOM and Browser EventsMedium
Save to ▾
Show answer
It allows stored cross-site scripting: a user can post <img src=x onerror=...> and the script runs for every visitor, stealing sessions or defacing the page. I would switch to textContent or createElement for rendering, escape output on the server, and if rich text is needed, sanitise with a library like DOMPurify. A strict Content Security Policy adds another layer by blocking inline scripts.
96

Users lose a long form's data when they accidentally refresh. How do you solve it?

DOM and Browser EventsMedium
Save to ▾
Show answer
I would autosave the form into sessionStorage or localStorage on input with a small debounce, then restore values on page load and clear them after successful submission. A beforeunload warning can ask users to confirm leaving when there are unsaved changes. Sensitive fields like passwords or card details must never be saved. For multi-step forms, saving drafts on the server is more reliable.
97

Describe a time you improved the performance of a web page.

DOM and Browser EventsMedium
Save to ▾
Show answer
Situation: our product listing page took over 6 seconds to become interactive. Task: I was asked to bring it under 3 seconds. Action: I profiled it in DevTools, found a large unused library and unoptimised images, replaced the library with native code, converted images to WebP with lazy loading, and deferred third-party scripts. Result: interaction time dropped to about 2.4 seconds and bounce rate fell noticeably.
98

What is the difference between reflow and repaint?

DOM and Browser EventsHard
Save to ▾
Show answer
Reflow, or layout, happens when the browser recalculates positions and sizes, triggered by changing width, adding elements, or reading offsetHeight after a write. Repaint happens when only visual styles like colour or background change. Reflow is more expensive and can cascade to the whole page. Animating transform and opacity avoids both because they are handled by the compositor, which keeps animations smooth at 60 frames per second.
99

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

The page stutters while scrolling because of a scroll event handler. How do you fix it?

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

Users click the Pay button twice and get charged twice. How do you prevent it?

DOM and Browser EventsHard
Save to ▾
Show answer
On the front end, I would disable the button and show a loading state as soon as the first click is handled, and re-enable it only on error. But the real fix must be on the server: generate an idempotency key or order id per checkout, and reject or ignore a second request with the same key. Payment gateways support idempotent requests for exactly this reason.
102

Rendering a table with 5,000 rows freezes the browser. What are your options?

DOM and Browser EventsHard
Save to ▾
Show answer
Creating thousands of nodes at once blocks the main thread. Options are server-side pagination, rendering in chunks with requestAnimationFrame, or virtual scrolling where only the 30 to 50 visible rows exist in the DOM at any time. I would also build rows in a DocumentFragment, avoid layout reads inside loops, and use CSS content-visibility: auto so off-screen rows skip rendering work.
103

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

PHP ProgrammingEasy
Save to ▾
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.
104

What is the difference between echo and print in PHP?

PHP ProgrammingEasy
Save to ▾
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).
105

What is the difference between sessions and cookies in PHP?

PHP ProgrammingEasy
Save to ▾
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.
106

Explain include, require, include_once and require_once.

PHP ProgrammingEasy
Save to ▾
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.
107

What are PHP superglobals?

PHP ProgrammingEasy
Save to ▾
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).
108

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

Use the PHP 8 match expression instead of a switch.

PHP ProgrammingEasy
Save to ▾
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.
110

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

PHP ProgrammingEasy
Save to ▾
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.
111

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

PHP ProgrammingEasy
Save to ▾
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.
112

Why did you choose PHP for backend development?

PHP ProgrammingEasy
Save to ▾
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.
113

How did string and number comparison with == change in PHP 8?

PHP ProgrammingMedium
Save to ▾
Show answer
Before PHP 8, comparing a number with a non-numeric string converted the string to a number, so 0 == 'abc' was true, which caused security bugs. Since PHP 8, if the string is not numeric, the number is converted to a string and compared as strings, so 0 == 'abc' is now false. Using === is still recommended because it checks type and value without any conversion.
114

Should you use PDO or mysqli to connect to MySQL?

PHP ProgrammingMedium
Save to ▾
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.
115

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

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

What is Composer and how does PSR-4 autoloading work?

PHP ProgrammingMedium
Save to ▾
Show answer
Composer is PHP's dependency manager. composer.json lists packages, composer.lock pins exact versions, and the vendor folder holds installed code. PSR-4 maps a namespace prefix to a folder, for example App\ to src/, so App\Models\User loads from src/Models/User.php automatically after you require vendor/autoload.php. This removes manual require statements. composer.lock should be committed so every environment installs identical versions.
118

Name important features added in PHP 8.x.

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

How should passwords be stored in PHP?

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

What is MVC and how does Laravel follow it?

PHP ProgrammingMedium
Save to ▾
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.
121

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

Build a simple PHP endpoint that returns JSON.

PHP ProgrammingMedium
Save to ▾
Show answer
Set the header, encode the data and use proper status codes: header('Content-Type: application/json'); $id = filter_input(INPUT_GET, 'id', FILTER_VALIDATE_INT); if (!$id) { http_response_code(400); echo json_encode(['error' => 'Invalid id']); exit; } $stmt = $pdo->prepare('SELECT id, name, price FROM courses WHERE id = ?'); $stmt->execute([$id]); $course = $stmt->fetch(PDO::FETCH_ASSOC); http_response_code($course ? 200 : 404); echo json_encode($course ?: ['error' => 'Not found']);
123

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

PHP ProgrammingMedium
Save to ▾
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.
124

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

PHP ProgrammingMedium
Save to ▾
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.
125

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

Write secure PHP code to handle an image upload.

PHP ProgrammingHard
Save to ▾
Show answer
Check errors, size and real MIME type, then store with a random name: if ($_FILES['photo']['error'] === UPLOAD_ERR_OK && $_FILES['photo']['size'] < 2_000_000) { $mime = (new finfo(FILEINFO_MIME_TYPE))->file($_FILES['photo']['tmp_name']); $allowed = ['image/jpeg' => 'jpg', 'image/png' => 'png', 'image/webp' => 'webp']; if (isset($allowed[$mime])) { $name = bin2hex(random_bytes(16)) . '.' . $allowed[$mime]; move_uploaded_file($_FILES['photo']['tmp_name'], __DIR__ . '/uploads/' . $name); } } Never trust the original filename or extension.
127

A PHP page takes 8 seconds to load. How do you find the bottleneck?

PHP ProgrammingHard
Save to ▾
Show answer
I would measure before guessing, using a profiler like Xdebug or Blackfire, or simple microtime logs around sections. Usually the cause is database queries, such as an N+1 pattern running a query inside a loop, missing indexes, or slow external API calls. Fixes include joining or eager loading, adding indexes, caching results in Redis, making API calls async with a queue, and enabling OPcache.
128

You must upgrade an old project from PHP 7.4 to PHP 8.3. How do you plan it?

PHP ProgrammingHard
Save to ▾
Show answer
I would first set up a staging copy and run a static analyser like PHPStan or Rector with PHP 8 rules to list incompatible code, such as removed functions, changed string comparisons and stricter type errors. Then I would update Composer dependencies to versions supporting PHP 8.3, fix deprecations, run the test suite and manual checks, and deploy with a rollback plan. PHP 7.4 has been unsupported since 2022.
129

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

MySQL DatabaseEasy
Save to ▾
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.
130

Explain INNER JOIN, LEFT JOIN and RIGHT JOIN.

MySQL DatabaseEasy
Save to ▾
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.
131

What is the difference between WHERE and HAVING?

MySQL DatabaseEasy
Save to ▾
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.
132

What is the difference between DELETE, TRUNCATE and DROP?

MySQL DatabaseEasy
Save to ▾
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.
133

When should you use CHAR, VARCHAR and TEXT?

MySQL DatabaseEasy
Save to ▾
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.
134

What is the difference between UNION and UNION ALL?

MySQL DatabaseEasy
Save to ▾
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.
135

Write a query to find the second highest salary.

MySQL DatabaseEasy
Save to ▾
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.
136

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

MySQL DatabaseEasy
Save to ▾
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.
137

Explain database normalization up to third normal form.

MySQL DatabaseMedium
Save to ▾
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.
138

What is the difference between InnoDB and MyISAM?

MySQL DatabaseMedium
Save to ▾
Show answer
InnoDB is the default MySQL storage engine. It supports transactions, row-level locking, foreign keys and crash recovery, making it suitable for almost all applications. MyISAM uses table-level locking, has no transactions or foreign keys, and can corrupt on crashes. MyISAM was once faster for read-only workloads, but modern InnoDB matches or beats it. Old tables still on MyISAM should usually be converted.
139

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

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

MySQL DatabaseMedium
Save to ▾
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.
141

Create students, courses and enrollments tables with proper keys.

MySQL DatabaseMedium
Save to ▾
Show answer
A many-to-many relationship needs a junction table: CREATE TABLE students ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(100) NOT NULL, email VARCHAR(150) NOT NULL UNIQUE ); CREATE TABLE courses ( id INT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(150) NOT NULL ); CREATE TABLE enrollments ( student_id INT, course_id INT, enrolled_on DATE NOT NULL, PRIMARY KEY (student_id, course_id), FOREIGN KEY (student_id) REFERENCES students(id) ON DELETE CASCADE, FOREIGN KEY (course_id) REFERENCES courses(id) );
142

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

MySQL DatabaseMedium
Save to ▾
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.
143

How do you back up and restore a MySQL database from the command line?

MySQL DatabaseMedium
Save to ▾
Show answer
mysqldump creates a logical SQL backup: mysqldump -u root -p --single-transaction --routines school > school_2026_11_12.sql mysql -u root -p school < school_2026_11_12.sql --single-transaction takes a consistent InnoDB snapshot without locking tables. For large databases, physical backup tools or managed cloud snapshots are faster. Backups should be automated, stored off-server, and restored on a test server regularly to prove they work.
144

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

MySQL DatabaseMedium
Save to ▾
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.
145

Tell me about a database design you are proud of.

MySQL DatabaseMedium
Save to ▾
Show answer
Situation: in my internship, a training institute tracked batches, students and fees in spreadsheets. Task: I had to design a MySQL schema for a web portal. Action: I normalised data into students, batches, enrollments and payments tables, added foreign keys and indexes on common filters, and wrote views for monthly reports. Result: reports that took a day manually now loaded in seconds, and data errors dropped sharply.
146

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

How do you read the output of EXPLAIN in MySQL?

MySQL DatabaseHard
Save to ▾
Show answer
EXPLAIN shows how MySQL plans to run a query. Key columns are type, where ALL means a full table scan and ref or eq_ref mean index lookups; key, the index actually chosen; rows, the estimated rows examined; and Extra, where 'Using filesort' or 'Using temporary' signal costly operations. EXPLAIN ANALYZE in MySQL 8 runs the query and shows real timings, which helps confirm an optimisation.
148

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

Find the top 3 highest-paid employees in each department.

MySQL DatabaseHard
Save to ▾
Show answer
Use a window function in MySQL 8: WITH ranked AS ( SELECT name, department_id, salary, DENSE_RANK() OVER (PARTITION BY department_id ORDER BY salary DESC) AS rnk FROM employees ) SELECT name, department_id, salary FROM ranked WHERE rnk <= 3; PARTITION BY restarts ranking per department. DENSE_RANK keeps ties together, while ROW_NUMBER would return exactly three rows even if salaries tie.
150

A search query on a 2 million row products table takes 6 seconds. How do you speed it up?

MySQL DatabaseHard
Save to ▾
Show answer
I would run EXPLAIN to see if it does a full table scan. If the WHERE uses LIKE '%phone%', a normal index cannot help, so I would add a FULLTEXT index with MATCH AGAINST or use a search engine like Elasticsearch or Meilisearch. For filters such as category and price, a composite index in the right order helps. I would also select only needed columns and cache popular searches.
151

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

Pagination becomes very slow on later pages. Why, and how do you fix it?

MySQL DatabaseHard
Save to ▾
Show answer
LIMIT 20 OFFSET 100000 forces MySQL to read and discard 100,000 rows before returning 20, so deep pages get slower. Keyset or cursor pagination fixes this: remember the last seen id and query WHERE id < :last_id ORDER BY id DESC LIMIT 20, which uses the index directly. It suits infinite scroll and APIs. For numbered pages, limiting maximum depth or caching counts also helps.
153

Someone accidentally ran DELETE without a WHERE clause on production. How do you recover?

MySQL DatabaseHard
Save to ▾
Show answer
First I would stop writes to that table to avoid further damage and inform the team. Then I would restore the latest backup to a separate server and, if binary logging is enabled, replay binlog events up to just before the bad statement using mysqlbinlog for point-in-time recovery. Finally I would copy the recovered rows back. Afterwards I would enable safe-updates mode and restrict production access.
154

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

Web SecurityEasy
Save to ▾
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.
155

Escape user data correctly when printing it in PHP templates.

Web SecurityEasy
Save to ▾
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.
156

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

Web SecurityEasy
Save to ▾
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.
157

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

Web SecurityEasy
Save to ▾
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.
158

Explain the types of cross-site scripting (XSS).

Web SecurityMedium
Save to ▾
Show answer
XSS lets an attacker run their JavaScript in another user's browser. Stored XSS saves the payload in the database, such as a malicious comment shown to every visitor. Reflected XSS bounces a payload from a URL parameter straight into the response. DOM-based XSS happens entirely in client code, for example writing location.hash into innerHTML. Defences are context-aware output escaping, safe DOM APIs and a Content Security Policy.
159

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

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

Add CSRF protection to a plain PHP form.

Web SecurityMedium
Save to ▾
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.
162

Configure secure session cookie settings in PHP.

Web SecurityMedium
Save to ▾
Show answer
Set cookie parameters before session_start: session_set_cookie_params([ 'lifetime' => 0, 'path' => '/', 'secure' => true, 'httponly' => true, 'samesite' => 'Lax' ]); ini_set('session.use_strict_mode', '1'); session_start(); secure sends the cookie only over HTTPS, httponly hides it from JavaScript so XSS cannot steal it, and SameSite reduces CSRF. Strict mode rejects session ids the server never created.
163

Limit failed login attempts to stop brute-force attacks.

Web SecurityMedium
Save to ▾
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.
164

Validate and sanitise different types of input in PHP.

Web SecurityMedium
Save to ▾
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.
165

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

Web SecurityMedium
Save to ▾
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.
166

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

Your frontend on one domain gets a CORS error calling your API on another. How do you resolve it?

Web SecurityMedium
Save to ▾
Show answer
The fix belongs on the API server, not the frontend. I would configure it to return Access-Control-Allow-Origin with the exact frontend origin, handle OPTIONS preflight requests with the allowed methods and headers, and add Access-Control-Allow-Credentials: true if cookies are needed. Alternatively, serving the API under the same domain through a reverse proxy, like /api, removes cross-origin calls altogether.
168

Tell me about a time you found a security issue in someone else's code.

Web SecurityMedium
Save to ▾
Show answer
Situation: during a code review, I noticed a teammate built a search query by concatenating user input. Task: I had to flag it without making them feel blamed. Action: I messaged them privately, showed a harmless injection example on staging, and suggested a prepared statement fix with a short snippet. Result: they fixed it before release, and we added a SQL injection check to our review checklist.
169

How do you handle pressure to skip security work to meet a deadline?

Web SecurityMedium
Save to ▾
Show answer
Situation: a manager wanted to launch a form without server-side validation to save a day. Task: I needed to protect the product without blocking the launch. Action: I explained the risk in business terms, data leaks and spam, and proposed shipping core validation and rate limiting now, with less critical hardening in the next sprint. Result: we launched on time with essential protections and completed the rest within a week.
170

Which HTTP security headers should every website send?

Web SecurityHard
Save to ▾
Show answer
Strict-Transport-Security forces HTTPS for future visits. Content-Security-Policy restricts where scripts, styles and images can load from, reducing XSS impact. X-Content-Type-Options: nosniff stops MIME sniffing. frame-ancestors in CSP or X-Frame-Options prevents clickjacking. Referrer-Policy controls what URL information leaks to other sites, and Permissions-Policy disables unused features like camera. Tools like securityheaders.com grade your configuration quickly.
171

Add security headers through Nginx configuration.

Web SecurityHard
Save to ▾
Show answer
Place these in the server block: add_header Strict-Transport-Security 'max-age=31536000; includeSubDomains' always; add_header X-Content-Type-Options 'nosniff' always; add_header Referrer-Policy 'strict-origin-when-cross-origin' always; add_header Content-Security-Policy "default-src 'self'; img-src 'self' data:; frame-ancestors 'none'" always; add_header Permissions-Policy 'camera=(), microphone=()' always; Start CSP in Content-Security-Policy-Report-Only mode to find what breaks before enforcing it.
172

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

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

Design a secure forgot-password flow.

Web SecurityHard
Save to ▾
Show answer
Show the same message whether or not the email exists to avoid account enumeration. Generate a long random token with random_bytes, store only its hash with a short expiry such as 30 minutes, and email a one-time link. On reset, verify the hash and expiry, set the new password with password_hash, delete the token and invalidate existing sessions. Rate-limit the request endpoint to prevent email flooding.
175

Before launching a new web application, how would you run a basic security review?

Web SecurityHard
Save to ▾
Show answer
I would walk through the OWASP Top 10: access control on every route, injection, authentication, session settings, misconfiguration and outdated components. I would run automated scanners like OWASP ZAP, check dependencies with composer audit and npm audit, verify HTTPS and security headers, and confirm error pages do not leak stack traces. Finally, I would test key flows manually as a normal user trying to access admin pages.
176

Users report being redirected to a gambling site from your pages. What do you check?

Web SecurityHard
Save to ▾
Show answer
This often comes from injected JavaScript or a compromised third-party script. I would check the page source and Network tab for unfamiliar scripts, inspect .htaccess for malicious rewrite rules, search the database and theme files for obfuscated code like base64_decode or eval, and review recently changed files on the server. A strict CSP and Subresource Integrity on CDN scripts help prevent repeat incidents.
177

Describe how you would respond if your website suffered a data breach.

Web SecurityHard
Save to ▾
Show answer
Situation: in a past project, unusual admin logins were detected at night. Task: as the lead developer, I had to contain and investigate. Action: I disabled the affected accounts, rotated credentials, preserved logs, found a reused weak password, and coordinated with management on informing users as required by India's DPDP Act. Result: no customer data was exfiltrated, and we enforced two-factor authentication for all admin accounts.
178

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

Explain the common DNS record types.

Hosting and DeploymentEasy
Save to ▾
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.
180

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

Hosting and DeploymentEasy
Save to ▾
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.
181

Why do you want to work as a web developer?

Hosting and DeploymentEasy
Save to ▾
Show answer
I enjoy building things people use directly. During college, I made a website for a local library, and seeing members search books online gave me real satisfaction. Web development lets me combine design with logic, from HTML and CSS to PHP and MySQL, and see results immediately. I want to grow in a team that ships real products and eventually take ownership of complete features end to end.
182

What is a CDN and how does it improve a website?

Hosting and DeploymentMedium
Save to ▾
Show answer
A content delivery network caches static files such as images, CSS and JavaScript on servers in many locations, so a user in Chennai is served from a nearby edge rather than a distant origin. This reduces latency, lowers load on your server and absorbs traffic spikes and some DDoS attacks. Cache-Control headers decide how long files stay cached, and versioned filenames let you deploy updates without stale content.
183

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

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

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

Deploy a PHP project to a VPS using Git and SSH.

Hosting and DeploymentMedium
Save to ▾
Show answer
A simple scripted deployment: ssh deploy@server.example.com << 'EOF' cd /var/www/app git pull origin main composer install --no-dev --optimize-autoloader php artisan migrate --force php artisan config:cache sudo systemctl reload php8.3-fpm EOF Use an SSH key, not a password, and a non-root deploy user. Reloading PHP-FPM clears OPcache so new code is served. For safer releases, deploy into a new folder and switch a symlink.
187

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

Your site suddenly shows 502 Bad Gateway. How do you troubleshoot it?

Hosting and DeploymentMedium
Save to ▾
Show answer
502 means Nginx could not get a valid response from the upstream, usually PHP-FPM or an application server. I would check if the service is running with systemctl status php8.3-fpm, read the Nginx error log and the PHP-FPM log, and confirm the socket path in the config matches. Common causes are crashed workers, exhausted pm.max_children, memory limits or a recent config change. Restarting brings it back, but the root cause must be fixed.
189

The server's disk is full and the site has stopped saving data. What do you do?

Hosting and DeploymentMedium
Save to ▾
Show answer
I would check usage with df -h and find large folders using du -sh /var/* | sort -h. Usual culprits are huge log files, old backups, cached uploads or MySQL binary logs. I would safely clear or compress logs, purge old binlogs with PURGE BINARY LOGS, and move backups off the server. To prevent repeats, set up logrotate, backup retention and disk usage alerts at about 80 percent.
190

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

Hosting and DeploymentMedium
Save to ▾
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.
191

Time to first byte is over 2 seconds even for simple pages. What do you check?

Hosting and DeploymentMedium
Save to ▾
Show answer
High TTFB points to the server, not the browser. I would check if OPcache is enabled, profile slow database queries, look for blocking external API calls during page generation, and check whether the server is low on CPU or memory. Fixes include full-page caching for anonymous users, object caching with Redis, upgrading PHP, choosing a server region close to Indian users, and putting a CDN in front.
192

Tell me about a time a website went down and how you handled it.

Hosting and DeploymentMedium
Save to ▾
Show answer
Situation: our e-commerce site went down at 11 PM during a sale. Task: as the on-call developer, I had to restore it fast. Action: I checked logs, found PHP-FPM workers exhausted by a slow query, restarted the service, added an index to fix the query, and kept the team updated every 15 minutes. Result: the site was back in 20 minutes, and I wrote a postmortem with monitoring alerts to catch it earlier.
193

A client insists on a major deployment on Friday evening. How do you respond?

Hosting and DeploymentMedium
Save to ▾
Show answer
Situation: a client wanted a big redesign live before a weekend campaign. Task: I had to respect their goal but reduce risk. Action: I explained that weekend issues would have fewer people to fix them, proposed deploying Thursday morning on staging-tested code, and arranged a rollback plan and someone on call. Result: the client agreed, we deployed Thursday, fixed two small issues the same day, and the campaign ran smoothly.
194

Write an Nginx server block for a PHP application using PHP-FPM.

Hosting and DeploymentHard
Save to ▾
Show answer
A typical configuration: server { listen 80; server_name example.com; root /var/www/app/public; index index.php; location / { try_files $uri $uri/ /index.php?$query_string; } location ~ \.php$ { include fastcgi_params; fastcgi_pass unix:/run/php/php8.3-fpm.sock; fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name; } location ~ /\. { deny all; } } Pointing root to public keeps .env and source files out of reach.
195

Create a GitHub Actions workflow that deploys on every push to main.

Hosting and DeploymentHard
Save to ▾
Show answer
Store the SSH key as a repository secret: name: Deploy on: push: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - run: composer install --no-dev && vendor/bin/phpunit - name: Deploy over SSH uses: appleboy/ssh-action@v1 with: host: ${{ secrets.HOST }} username: deploy key: ${{ secrets.SSH_KEY }} script: cd /var/www/app && ./deploy.sh Tests run first, so a failing build never deploys.
196

A results website expects ten times normal traffic on announcement day. How do you prepare?

Hosting and DeploymentHard
Save to ▾
Show answer
I would load test with tools like k6 or JMeter to find the breaking point, then cache result pages aggressively using a CDN and Redis. The database should have proper indexes, and read-heavy queries could go to replicas. On cloud, I would configure auto-scaling and pre-warm extra instances before the announcement. A lightweight static fallback page and a queue for heavy tasks keep the site responsive under peak load.
197

How would you deploy updates without any downtime?

Hosting and DeploymentHard
Save to ▾
Show answer
I would use atomic releases: upload the new version into a fresh release folder, install dependencies and build assets there, then switch a current symlink in one step and reload PHP-FPM. Database migrations must be backward compatible, such as adding columns before code uses them, so old and new code both work during the switch. With multiple servers, rolling or blue-green deployment behind a load balancer achieves the same.
198

A client wants to move a growing site from shared hosting to a VPS. How do you plan the migration?

Hosting and DeploymentHard
Save to ▾
Show answer
I would set up the VPS with Nginx, PHP-FPM, MySQL, firewall and SSL, matching PHP versions and extensions. Then I would copy files with rsync, export and import the database, and test the site using a hosts file entry before touching DNS. After lowering the TTL, I would do a final data sync during low traffic, switch DNS, monitor logs, and keep the old hosting live for a few days as fallback.
199

How do you manage configuration and secrets across local, staging and production?

Hosting and DeploymentHard
Save to ▾
Show answer
I keep code identical across environments and change only configuration through environment variables, usually loaded from a .env file that is never committed. A .env.example documents required keys without values. In production, secrets live in the server environment, the CI secret store or a cloud secrets manager. Each environment has separate database credentials and API keys, so a staging leak cannot affect production.
200

How have you helped a junior developer learn deployment?

Hosting and DeploymentHard
Save to ▾
Show answer
Situation: a new joiner was nervous about deploying to production. Task: I was asked to make them independent within a month. Action: I wrote a step-by-step deployment checklist, let them deploy to staging while I watched, then paired on two production releases with them driving. Result: they handled releases alone after three weeks and later improved our checklist with a rollback section.

Frequently asked questions

What jobs can I get after learning web development?

You can apply for roles such as Junior Web Developer, Front-End Developer, PHP Developer, WordPress Developer and Full Stack Web Developer. IT services companies, digital agencies, startups and e-commerce businesses all hire for these roles. With experience you can move into lead developer, solutions architect or web security roles. A strong portfolio of live projects matters as much as your degree when recruiters shortlist web development candidates.

Who is eligible to learn web development?

Anyone comfortable with basic computer use can start, including school pass-outs, BCA, B.Tech, B.Sc and BCom graduates, and working professionals switching careers. No prior coding knowledge is required because the course starts from HTML basics. Logical thinking and regular practice are more important than your academic stream. Many successful developers in India come from non-computer-science backgrounds and learned through structured courses and projects.

How long does it take to learn web development?

With two to three hours of daily practice, most learners become job-ready for junior roles in about four months, covering HTML, CSS, JavaScript, PHP, MySQL and deployment. Becoming comfortable with frameworks like Laravel and handling production issues takes another six to twelve months of real work. Consistency is key: building small projects every week speeds up learning far more than only watching tutorials.

Do I need a certificate to get a web developer job?

A certificate helps show that you completed structured training, and some companies use it during screening, but hiring decisions mostly depend on your skills and projects. Recruiters look at your GitHub profile, live websites and how well you answer technical questions. Combine your course certificate with two or three deployed projects, clean code and a clear resume to stand out in interviews.

Is PHP still worth learning in 2026?

Yes. PHP powers WordPress and a large share of websites worldwide, and Laravel remains a popular framework for startups and agencies in India. Many existing business applications run on PHP and need developers to maintain and extend them. Learning PHP also teaches server-side fundamentals like requests, sessions and databases, which transfer easily to Node.js, Python or Java later in your career.

What projects should I build for a web development portfolio?

Build projects that show the full stack: a responsive portfolio site, a JavaScript app that uses a public API, a PHP and MySQL application with login and CRUD features, and a deployed e-commerce or booking mini project with HTTPS. Write clear README files with screenshots and live links. Interviewers often ask how you built each feature, so choose projects you can explain confidently.