Practical Web Development Interview Questions

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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

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(); });

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.

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.

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.

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.

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.

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.

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.

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.

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']);

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.