Web Programming Certification — Questions and Answers

Question 1: Which technique ensures focus is managed correctly when a modal dialog opens?

Add role=dialog to the body element
Remove the modal from the DOM when closed
Move focus to the modal and trap it inside until the dialog closes (Correct answer)
Set tabindex=-1 on all page elements

Correct answer: Move focus to the modal and trap it inside until the dialog closes

When a modal opens, focus must be moved inside it and trapped so keyboard users cannot accidentally interact with background content.

Question 2: What HTML element defines a table row?

<td>
<tr> (Correct answer)
<th>
<row>

Correct answer: <tr>

The <tr> (table row) element defines a row of cells in an HTML table, containing <td> or <th> elements.

Question 3: Which keyboard key is the standard for activating a button or link that has keyboard focus?

Tab
Shift
Enter (Correct answer)
Escape

Correct answer: Enter

The Enter key activates focused links and buttons, and Space also activates buttons, making keyboard navigation possible without a mouse.

Question 4: Which element should wrap the primary content of a page to create a main landmark for accessibility?

<div role="content">
<article>
<section>
<main> (Correct answer)

Correct answer: <main>

The `<main>` element creates a main landmark region, signaling to screen readers that this is the primary content of the page.

Question 5: What does 'responsive web design' mean?

Server-side rendering for fast responses
Websites with animated responses to user input
Web design that adapts layout to different screen sizes using flexible grids and media queries (Correct answer)
Websites that respond quickly to user clicks

Correct answer: Web design that adapts layout to different screen sizes using flexible grids and media queries

Responsive web design is an approach where web pages use flexible grids, images, and CSS media queries to render well on all screen sizes from mobile to desktop.

Question 6: What does the CSS box model consist of from inside to outside?

margin, border, padding, content
content, padding, border, margin (Correct answer)
content, border, padding, margin
padding, content, border, margin

Correct answer: content, padding, border, margin

The CSS box model layers are, from innermost to outermost: content, padding, border, then margin.

Question 7: What is the purpose of GZIP compression in web performance?

To minify JavaScript code
To compress text-based resources like HTML, CSS, and JS before sending them over the network (Correct answer)
To compress images into smaller files
To encrypt web traffic

Correct answer: To compress text-based resources like HTML, CSS, and JS before sending them over the network

GZIP compression reduces the size of text-based resources before transmission, which the browser then decompresses, significantly reducing transfer time and bandwidth.

Question 8: What HTML attribute makes a form input field required before submission?

validate
mandatory
notnull
required (Correct answer)

Correct answer: required

The required attribute is a boolean HTML attribute that prevents form submission if the field is empty.

Question 9: What is the purpose of a CSS media query?

Applies styles based on device characteristics like screen width (Correct answer)
Controls video and audio element styling
Fetches media files from external URLs
Loads different CSS files per browser

Correct answer: Applies styles based on device characteristics like screen width

Media queries apply CSS rules conditionally based on device features such as viewport width, enabling responsive design.

Question 10: What is the correct HTML5 doctype declaration?

<!DOCTYPE html PUBLIC>
<html doctype='5'>
<!DOCTYPE html> (Correct answer)
<!DOCTYPE HTML5>

Correct answer: <!DOCTYPE html>

The HTML5 doctype is simply <!DOCTYPE html>, which is a simplified version compared to older HTML doctypes.

Question 11: What does the PHP function `session_start()` do when called at the top of a script?

Opens a file upload stream
Starts an HTTP keep-alive connection
Creates a new database connection
Initializes or resumes a session using a session cookie (Correct answer)

Correct answer: Initializes or resumes a session using a session cookie

session_start() reads the session ID from a cookie (or URL), loads stored session data into $_SESSION, or creates a new session if none exists.

Question 12: What does the 'render-blocking' term mean in web performance?

JavaScript that prevents server rendering
Resources like CSS or JavaScript that must load before the browser can render the page (Correct answer)
Backend processes that block HTTP responses
CSS animations that block user input

Correct answer: Resources like CSS or JavaScript that must load before the browser can render the page

Render-blocking resources are files (usually CSS or synchronous JS in the <head>) that the browser must download and process before it can render any of the page content.

Question 13: Which CSS pseudo-class targets the first child element of its parent?

:first-child (Correct answer)
:nth-child(0)
:root
:first-of-type

Correct answer: :first-child

:first-child selects an element only if it is the first child of its parent, regardless of element type.

Question 14: In Angular, what is a component decorator (@Component) used for?

To define metadata for an Angular component including its template and selector (Correct answer)
To inject dependencies
To create HTTP interceptors
To apply CSS styles

Correct answer: To define metadata for an Angular component including its template and selector

The @Component decorator in Angular marks a class as a component and provides configuration metadata including the HTML template, CSS styles, and selector.

Question 15: What CSS property controls the space between an element's border and its content?

border-gap
spacing
padding (Correct answer)
margin

Correct answer: padding

The padding property defines the space between an element's content and its border, inside the element.

Question 16: Which CSS pseudo-class applies styles when the user hovers over an element?

:hover (Correct answer)
:active
:visited
:focus

Correct answer: :hover

The :hover pseudo-class applies styles to an element when the user's pointer is positioned over it without clicking.

Question 17: A ______ can be added to the end of a URL as a technique to keep data safe after a visitor has seen the page.

Query string (Correct answer)
Function
Auto-global
Identifier

Correct answer: Query string

A query string is a part of a URL that allows data to be passed from one web page to another, typically after a question mark (?). It consists of key-value pairs and is commonly used to maintain state, filter content, or track user information across stateless HTTP requests. While not a security mechanism, it helps persist specific data related to a visitor's interaction with a page.

Question 18: What is TypeScript's primary advantage over plain JavaScript?

Built-in HTTP client
Smaller file sizes
Static type checking that catches errors at compile time (Correct answer)
Faster execution speed

Correct answer: Static type checking that catches errors at compile time

TypeScript adds optional static typing to JavaScript, allowing type errors to be caught during development before the code runs in the browser.

Question 19: What is the purpose of ESLint in a web project?

To minify CSS
To analyze JavaScript code for errors and enforce coding style rules (Correct answer)
To bundle JavaScript files
To run unit tests

Correct answer: To analyze JavaScript code for errors and enforce coding style rules

ESLint is a static code analysis tool that identifies problematic patterns in JavaScript code and enforces configurable coding standards.

Question 20: Which HTML tag is used to create a hyperlink?

<href>
<link>
<url>
<a> (Correct answer)

Correct answer: <a>

The <a> (anchor) element, combined with the href attribute, creates a hyperlink to another page or resource.

Question 21: What does the === operator check in JavaScript?

Type equality only
Reference equality
Both value and type equality (Correct answer)
Value equality only

Correct answer: Both value and type equality

The strict equality operator === checks that both the value and the data type of two operands are identical, without type coercion.

Question 22: Which HTML element is used to define the structure of a web page's navigation links?

<header>
<menu>
<aside>
<nav> (Correct answer)

Correct answer: <nav>

The <nav> element is the semantic HTML5 element specifically designed to contain a set of navigation links.

Question 23: What does npm stand for?

New Project Manager
Node Program Module
Network Package Module
Node Package Manager (Correct answer)

Correct answer: Node Package Manager

npm stands for Node Package Manager, the default package manager for Node.js used to install, share, and manage JavaScript dependencies.

Question 24: What is the role of a 'package.json' file in a Node.js project?

Stores the compiled application bundle
Defines HTML templates for the project
Contains the server's SSL certificate
Lists project metadata, dependencies, and scripts (Correct answer)

Correct answer: Lists project metadata, dependencies, and scripts

package.json is the project manifest that tracks dependencies, scripts, version, and other metadata for Node.js projects.

Question 25: Which property in CSS creates a flexible container for its children?

float: left
display: flex (Correct answer)
position: relative
display: block

Correct answer: display: flex

display: flex activates the Flexbox layout model, making the element a flex container for its direct children.

Question 26: Which HTTP header is used to specify the format of the request or response body?

Content-Type (Correct answer)
Authorization
Accept-Language
Cache-Control

Correct answer: Content-Type

The Content-Type header indicates the media type (e.g., application/json) of the request or response body being sent.

Question 27: Which Content Security Policy directive controls which sources can load JavaScript?

connect-src
default-src
script-src (Correct answer)
form-action

Correct answer: script-src

The script-src directive in CSP specifies valid sources for JavaScript, blocking inline scripts and unauthorized external scripts.

Question 28: What HTTP status code means 'Not Found'?

401
404 (Correct answer)
403
500

Correct answer: 404

HTTP 404 Not Found indicates that the server cannot find the requested resource at the given URL.

Question 29: Which OWASP category covers misconfigured cloud storage buckets left publicly readable?

A01 Broken Access Control
A02 Cryptographic Failures
A05 Security Misconfiguration (Correct answer)
A09 Security Logging Failures

Correct answer: A05 Security Misconfiguration

Publicly accessible cloud buckets are a classic security misconfiguration — default settings left insecure rather than hardened.

Question 30: Which CSS property controls the stacking order of positioned elements?

depth
stack-order
layer
z-index (Correct answer)

Correct answer: z-index

The z-index property specifies the stack order of a positioned element, with higher values appearing in front of lower values.

Web Programming Certification

A comprehensive assessment of web programming skills covering HTML/CSS, JavaScript, frontend frameworks, REST APIs, and web accessibility standards. Aligns with W3Schools Modern Web Developer and CIW Web Design Specialist competency frameworks.

Questions

35 min

Time Limit

75%

To Pass

Checking for saved progress...

Exam Rules

You can skip questions and return to them later
Flag questions for review before submitting
No feedback shown until you submit the entire exam
Unanswered questions count as wrong — answer everything
10 pretest questions are mixed in and don't affect your score
Timer auto-submits when time runs out
Your progress is auto-saved every 30 seconds