Web Development Online Assessment Questions &amp; Answers

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.

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

Show answer

GET sends form data in the URL query string, so it is visible, bookmarkable, cached and limited in length; it suits search and filter forms. POST sends data in the request body, so it is not shown in the URL and can carry large or binary content such as file uploads. Any action that changes data on the server, like login, registration or payment, should use POST.

Explain INNER JOIN, LEFT JOIN and RIGHT JOIN.

MySQL DatabaseEasy

Show answer

INNER JOIN returns only rows with matching values in both tables, such as students who have enrolled. LEFT JOIN returns all rows from the left table and matching rows from the right, filling NULL where there is no match, which is useful to find students with no enrollment. RIGHT JOIN is the mirror of LEFT JOIN. MySQL has no FULL OUTER JOIN, but you can simulate it with a UNION of LEFT and RIGHT joins.

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

Show answer

PHP is a server-side scripting language widely used for websites, WordPress, Laravel apps and APIs. When a browser requests a .php file, the web server such as Apache or Nginx passes it to the PHP interpreter, usually through PHP-FPM. PHP runs the code, talks to databases if needed, and sends back plain HTML or JSON. The browser never sees the PHP source, only the generated output.

What is the difference between sessions and cookies in PHP?

Show answer

A cookie stores data in the browser and is sent with every request, so users can see and edit it. A session stores data on the server and keeps only a session id in a cookie, usually PHPSESSID. Use $_SESSION for login state and cart data, after calling session_start(). Use cookies only for non-sensitive preferences, and mark session cookies HttpOnly, Secure and SameSite.

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

HTML FundamentalsMedium

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.

Create a responsive card grid that needs no media queries.

CSS Layout and Responsive DesignMedium

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.

What is MVC and how does Laravel follow it?

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.

What are custom events and when would you use them?

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.

What is the difference between innerHTML, textContent and innerText?

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.

When would you choose Flexbox and when CSS Grid?

CSS Layout and Responsive DesignMedium

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.

What is AJAX and how is it done today?

Show answer

AJAX means updating parts of a page by exchanging data with the server in the background, without a full page reload. Originally it used XMLHttpRequest and XML, but today it is done with the fetch API and JSON. Examples include live search suggestions, adding to cart without reload, and infinite scroll. The server returns data, and JavaScript updates the DOM with the result.

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

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.

How should passwords be stored in PHP?

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.

Write an accessible login form with proper labels.

Show answer

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

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

Hosting and DeploymentMedium

Show answer

I would stop sending through PHP mail() from the web server and use an authenticated SMTP or transactional email service. Then I would publish SPF to authorise the sender, DKIM to sign messages, and a DMARC policy in DNS. The From address should belong to the verified domain, while the visitor's email goes in Reply-To. Mail testing tools show the spam score and missing records.

What is the difference between WHERE and HAVING?

MySQL DatabaseEasy

Show answer

WHERE filters individual rows before grouping and cannot use aggregate functions. HAVING filters groups after GROUP BY and can use aggregates. For example, SELECT city, COUNT(*) FROM students WHERE status = 'active' GROUP BY city HAVING COUNT(*) > 50 first keeps only active students, then shows cities with more than 50 of them. Filtering in WHERE when possible is faster because fewer rows are grouped.

What is the difference between preventDefault and stopPropagation?

Show answer

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

Center a div horizontally and vertically using Flexbox and Grid.

CSS Layout and Responsive DesignEasy

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.

What is the DOM?

Show answer

The Document Object Model is a tree representation of an HTML page that the browser builds after parsing. Each element, attribute and piece of text becomes a node that JavaScript can read and change through APIs like document.querySelector, element.classList and element.append. When the DOM changes, the browser updates what users see. The DOM is not the HTML source itself; scripts can change it after the page loads.

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

Show answer

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

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

CSS Layout and Responsive DesignMedium

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.

Explain closures with an example.

JavaScript CoreMedium

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.

Should you use PDO or mysqli to connect to MySQL?

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.

How is querySelector different from getElementById and getElementsByClassName?

Show answer

querySelector and querySelectorAll accept any CSS selector and return the first match or a static NodeList. getElementById accepts only an id and is slightly faster. getElementsByClassName returns a live HTMLCollection that updates automatically when the DOM changes, which can cause surprises inside loops. In practice querySelector is used for flexibility, and the speed difference rarely matters.

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

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.

What is the difference between id and class attributes?

Show answer

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

Validate and sanitise different types of input in PHP.

Web SecurityMedium

Show answer

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

What are PHP superglobals?

Show answer

Superglobals are built-in arrays available in every scope without the global keyword. Common ones are $_GET and $_POST for request data, $_REQUEST combining them, $_SESSION, $_COOKIE, $_FILES for uploads, $_SERVER for headers and paths, and $_ENV for environment variables. All user-supplied superglobals must be treated as untrusted input and validated, for example using filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL).

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

Hosting and DeploymentMedium

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.

Write a debounce function and explain where it is used.

JavaScript CoreMedium

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.

What is the difference between DELETE, TRUNCATE and DROP?

MySQL DatabaseEasy

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.

What is the difference between InnoDB and MyISAM?

MySQL DatabaseMedium

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.

Explain database normalization up to third normal form.

MySQL DatabaseMedium

Show answer

Normalization reduces duplicate data and update problems. 1NF requires atomic values, no repeating groups like phone1, phone2. 2NF requires every non-key column to depend on the whole primary key, not part of a composite key. 3NF removes transitive dependencies, so a column depends only on the key, for example moving city details out of an orders table. Read-heavy reports sometimes denormalise deliberately for speed.

What is semantic HTML and why does it matter?

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.

Write a PHP login script using password_verify and sessions.

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.

Explain event bubbling and capturing.

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.

Explain include, require, include_once and require_once.

Show answer

All four insert another PHP file. If the file is missing, include gives a warning and continues, while require throws a fatal error and stops the script. The _once versions skip the file if it was already loaded, which prevents 'cannot redeclare function' errors. Use require_once for essential files like config and database connection. Modern projects rely on Composer autoloading instead of manual includes for classes.

Insert a record into MySQL securely using PDO.