Free Practice Questions for the WGU Courses and Certificates Web-Development-Applications Exam (2026 Updated)

Rounded corners on HTML elements are styled using CSS3 properties. Specifically, the border-radius property introduced in CSS3 allows developers to apply curved borders to elements.

"CSS3 introduced the border-radius property, which allows web developers to create rounded corners without the need for images or complex markup."

"The syntax can be applied inline, such as:

< div style="border: 1px solid black; border-radius: 10px;" > Content < /div > "

> “To create a slider control, use ` < input type="range" > ` and specify `min` and `max` attributes to define the allowable range.”

>

> Only Option B includes both `min` and `max`, and uses `type="range"`, which creates a slider.

In JavaScript, the name of a function is defined after the function keyword and before the parentheses that enclose its parameters.

Function Name : The function name is the identifier used to call the function. It is defined immediately after the function keyword.

Usage Example :

function square(number) {

return number * number;

}

In this example, the name of the function is square .

> “The `if` statement in JavaScript requires parentheses around the condition. `if (enabled)` is a valid boolean condition and checks whether the variable `enabled` is truthy.”

>

> “Using `if (enabled == true)` is redundant. The concise form `if (enabled)` is preferred.”

Correct Syntax:

if (enabled) {

alert('ok');

}

```

The given CSS configures properties that control the processing of animations directly in the browser.

CSS Animations : CSS animations are processed by the browser's rendering engine. The animations defined by CSS are handled client-side and do not require server-side processing.

Key Properties :

The < script > tag is required when importing the jQuery library into an HTML document.

Including jQuery :

Purpose : The < script > tag is used to embed or reference executable code (JavaScript).

Example :

< script src="https://code.jquery.com/jquery-3.6.0.min.js" > < /script >

Explanation :

The < script > tag should be placed in the < head > or at the end of the < body > to ensure that the library is loaded before the scripts that depend on it.

To specify a cache manifest file for an HTML document, the manifest attribute must be set in the < html > element. This attribute tells the browser to cache the files listed in the manifest for offline use.

Cache Manifest :

Purpose : Specifies resources that should be cached by the browser.

Attribute : manifest is used in the < html > tag to link the cache manifest file.

Example :

Given the manifest file application.appcache :

CACHE MANIFEST

CACHE:

default.html

stylesheet.css

functions.js

logo.jpg

HTML with the manifest attribute:

< html manifest="application.appcache" >

< /html >

> “The conditional (ternary) operator `? :` is a shortcut for an `if...else` statement. It is the only operator in JavaScript that takes three operands: a condition followed by a question mark (?), an expression to execute if the condition is true, and another expression if false.”

Example:

```javascript

var result = condition ? value1 : value2;

```

The given code snippet demonstrates how JavaScript can manipulate the DOM to change the style of an element.

Code Analysis :

Given the HTML:

< h1 id="id1" > Blog Title < /h1 >

< button type="button" onclick="document.getElementById('id1').style.color = 'red'" > Click Here < /button >

When the button is clicked, the JavaScript code within the onclick attribute changes the color of the h1 element to red.

Explanation :

Option A : An event handler tracking keyboard strokes is incorrect because the event handler is tracking a mouse click, not keyboard strokes.

Option B : JavaScript is using the DOM to make a style change is correct because the onclick attribute contains JavaScript code that modifies the style of the h1 element.

Option C : In-line CSS is styling the < h1 > tag is incorrect because the style change is done via JavaScript, not inline CSS.

Bootstrap is a popular front-end framework that assists designers in creating adaptive and responsive page layouts easily.

Bootstrap :

Responsive Design : Bootstrap provides a responsive grid system, pre-styled components, and utilities that help in designing adaptive layouts.

Example :

< div class="container" >

< div class="row" >

< div class="col-sm-4" > Column 1 < /div >

< div class="col-sm-4" > Column 2 < /div >

< div class="col-sm-4" > Column 3 < /div >

< /div >

< /div >

Other Options :

A. Modernize : Not a framework, but a JavaScript library to detect HTML5 and CSS3 features.

C. React : A JavaScript library for building user interfaces, not specifically for layout.

D. Knockout : A JavaScript library for implementing MVVM pattern, not specifically for layout.

> “To enable the AppCache feature, a `manifest` attribute must be specified in the opening ` < html > ` tag.”

>

> Example:

```html

< html manifest="date.appcache" >

```

> Note: Although AppCache is deprecated in favor of service workers, this was the correct method in older HTML5 standards.

> “The `error` event is triggered when an error occurs during the loading of an external file such as an image, script, or style.”

>

> “Events like `stalled` and `suspend` relate more to media buffering; `invalid` relates to form input validation.”

In CSS, a class selector is denoted with a period (.), and it applies to elements with that class attribute.

head targets any element with class="head", such as:

< div class="head" > ... < /div >

“A CSS class selector uses a period (.) followed by the class name. It matches elements whose class attribute includes that class name.”

To style an < h1 > tag, you use the element selector h1, and to define the size of the font, use the font-size property. The text-size property does not exist in CSS.

Correct rule:

h1 {

font-size: 16pt;

}

“The font-size property sets the size of the font. Use element selectors (like h1) to apply styles to all elements of that type.”

AJAX (Asynchronous JavaScript and XML) is used to request and update data in the background without reloading the web page.

AJAX Overview :

Purpose : Allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes.

Benefits : Provides a smoother user experience by avoiding full page reloads.

Example :

Using XMLHttpRequest :

var xhr = new XMLHttpRequest();

xhr.open("GET", "data.json", true);

xhr.onreadystatechange = function() {

if (xhr.readyState === 4 & & xhr.status === 200) {

var data = JSON.parse(xhr.responseText);

console.log(data);

}

};

xhr.send();

> “` < input type="number" > ` renders a numeric text box with spinner (up/down arrows). The `max="100"` attribute sets the upper limit for the value that can be entered.”

Example:

```html

< input type="number" max="100" >

```

> `maxlength` only limits string length, not numeric value.

Padding is the CSS property used to create space between the content of an element and its border. It is an internal spacing within the element.

CSS Box Model :

Content : The innermost part, where text and images appear.

Padding : The space between the content and the border.

Border : The edge of the element.

Margin : The space outside the border, creating space between different elements.

Usage :

Padding :

div {

padding: 20px;

}

This code adds 20 pixels of padding on all sides of the content within the div element.

> “When using the `margin` shorthand with four values:

>

> * The first value is the top margin

> * The second is the right margin

> * The third is the bottom margin

> * The fourth is the left margin”

So, `margin: 10px 20px 25px 30px;` translates to:

* top: 10px

* right: 20px

* bottom: 25px

* left: 30px

The HTML5 < video > element supports specific video formats that are compatible with modern web browsers and meet the requirements of open web standards. According to the HTML Living Standard and documentation from MDN (Mozilla Developer Network), the three main supported video formats for the HTML5 < video > element are:

WebM: An open, royalty-free media format designed for the web. It is supported in most modern browsers like Chrome, Firefox, Opera, and Edge.

MPEG-4 / H.264 (commonly using .mp4 file extension): A highly popular and widely supported video format across all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+.

“The HTML < video > element can support video formats such as WebM, MP4 (H.264 codec), and Ogg (Theora codec). Not all formats are supported by every browser, but WebM and MPEG-4 are the most universally accepted among major browsers.”

Formats such as FLV (Flash Video), AVI, and QuickTime (MOV) are not natively supported by HTML5 < video > and typically require plugins or external players, making them unsuitable for use with the < video > tag in modern web development.

The given HTML and CSS statements define a class named "example" and use media queries to change the background color of the < div > element based on the screen width. The correct CSS media query to change the background color of the < div > tag when the width is between 600 pixels and 900 pixels or more than 1100 pixels is: Copy code

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {

div.example {

background: yellow;

}

}

Understanding Media Queries :

@media screen : Applies the styles only for screens.

(max-width: 900px) and (min-width: 600px) : Targets screen widths between 600 and 900 pixels.

, (comma) : Acts as an "or" operator in media queries.

(min-width: 1100px) : Targets screen widths greater than or equal to 1100 pixels.

Option C Explanation :

This option uses the correct media query syntax to apply the background color change when the screen width is between 600 and 900 pixels or when it is 1100 pixels or more.

> “To improve readability on tablets and mobile screens, developers should apply responsive design principles. This involves using relative font sizes, media queries, and viewport settings to build the site for mobile devices.”

> Updating the HTML version or SSL has no effect on font size or layout.

> “The ` < script > ` element is permitted within the ` < head > ` and ` < body > ` sections of an HTML document. These are the two valid locations for including or referencing JavaScript code.”

>

> “It is not valid to place ` < script > ` inside ` < form > `, ` < meta > `, or ` < title > ` elements, as those are not meant for scripting.”

To attach an external CSS document to a web page, the < link > element is used within the < head > section of the HTML document.

<</b> link > Element :

Purpose : Links external resources, such as stylesheets, to the HTML document.

Attributes :

rel="stylesheet" : Specifies the relationship between the current document and the linked resource.

href="path/to/stylesheet.css" : Specifies the URL of the external stylesheet.

Example :

< head >

< link rel="stylesheet" href="styles.css" >

< /head >

Other Options :

<</b> style > : Used to embed internal CSS directly within the HTML document, not for linking external CSS.

<</b> script > : Used to embed or link to JavaScript files.

<</b> meta > : Provides metadata about the HTML document, not for linking stylesheets.