WGU C777 OBJECTIVE ASSESSMENT 2025 PRACTICE
TEST BANK WITH 300 QUESTIONS AND CORRECT
VERIFIED ANSWERS/ C777 OA WEB DEVELOPMENT
APPLICATIONS (MOST RECENT!)
Practice Questions
1. HTML5 Semantic Elements
Which HTML5 element should be used to wrap the primary content of a webpage,
typically containing content unique to that page and not repeated elsewhere?
A) <main>
B) <section>
C) <article>
D) <div>
- answer-: A) <main>
Explanation: The <main> element is used to wrap the dominant content of the
body of a document. It should not contain any content that is repeated across
pages (like navigation, headers, footers). <section> is for thematic
grouping, <article> for self-contained composition, and <div> is a generic
container with no semantic meaning.
2. CSS3 Selectors
Which CSS selector will target every <a> element that is a direct child of
a <nav> element?
,A) nav a
B) nav > a
C) nav + a
D) nav ~ a
- answer-: B) nav > a
Explanation: The child combinator (>) selects only the direct children. nav
a selects any descendant, nav + a selects an <a> immediately following a <nav>,
and nav ~ a selects any <a> that follows a <nav> and is a sibling.
3. JavaScript Event Handling
In JavaScript, which method is used to attach an event handler that fires only
once?
A) addEventListener()
B) attachEvent()
C) addEventListener({ once: true })
D) addEventListener(event, handler, { once: true })
- answer-: D) addEventListener(event, handler, { once: true })
Explanation: The addEventListener method can take an options object
where once is set to true to ensure the event handler runs only once. Option C is
close but incorrect because the once property must be inside an options object.
4. Responsive Web Design
Which CSS property is most commonly used in a mobile-first design to adjust the
layout for larger screens?
A) @media (min-width: ...)
B) @media (max-width: ...)
C) @viewport
D) @responsive
- answer-: A) @media (min-width: ...)
Explanation: In mobile-first design, the base styles are for mobile, and then you
,use @media queries with min-width to add styles for larger screens. max-width is
used in desktop-first design.
5. Accessibility (ARIA)
Which ARIA attribute should be used to indicate that a form input is required?
A) aria-required="true"
B) aria-necessary="true"
C) aria-mandatory="true"
D) aria-required
- answer-: A) aria-required="true"
Explanation: The aria-required attribute is used to indicate that an input must be
filled out. It takes values "true" or "false". Note that HTML5 has
a required attribute, but for custom controls, ARIA may be needed.
6. HTML5 Graphics
Which technology is vector-based and best for logos and icons that scale without
loss of quality?
A) Canvas
B) SVG
C) WebGL
D) PNG
- answer-: B) SVG
Explanation: SVG (Scalable Vector Graphics) is vector-based and ideal for logos
and icons. Canvas is raster-based and better for complex graphics and games.
WebGL is for 3D graphics, and PNG is a raster image format.
7. CSS3 Layout
In Flexbox, which property is used to change the direction of the main axis?
, A) flex-direction
B) flex-wrap
C) justify-content
D) align-items
- answer-: A) flex-direction
Explanation: The flex-direction property defines the direction of the main axis
(row, row-reverse, column, column-reverse). flex-wrap controls wrapping, justify-
content aligns items on the main axis, and align-items on the cross axis.
8. JavaScript ES6+
What is the output of the following code?
javascript
const arr = [1, 2, 3];
const [x, ...y] = arr;
console.log(y);
A) [2, 3]
B) [1, 2]
C) [1, 2, 3]
D) [3]
- answer-: A) [2, 3]
Explanation: The rest operator (...) collects the remaining elements. Here, x is
assigned the first element (1), and y collects the rest into an array [2, 3].
9. CSS3 Transitions
Which CSS property is used to define the speed curve of a transition?
A) transition-timing-function
B) transition-duration
C) transition-delay
D) transition-property
TEST BANK WITH 300 QUESTIONS AND CORRECT
VERIFIED ANSWERS/ C777 OA WEB DEVELOPMENT
APPLICATIONS (MOST RECENT!)
Practice Questions
1. HTML5 Semantic Elements
Which HTML5 element should be used to wrap the primary content of a webpage,
typically containing content unique to that page and not repeated elsewhere?
A) <main>
B) <section>
C) <article>
D) <div>
- answer-: A) <main>
Explanation: The <main> element is used to wrap the dominant content of the
body of a document. It should not contain any content that is repeated across
pages (like navigation, headers, footers). <section> is for thematic
grouping, <article> for self-contained composition, and <div> is a generic
container with no semantic meaning.
2. CSS3 Selectors
Which CSS selector will target every <a> element that is a direct child of
a <nav> element?
,A) nav a
B) nav > a
C) nav + a
D) nav ~ a
- answer-: B) nav > a
Explanation: The child combinator (>) selects only the direct children. nav
a selects any descendant, nav + a selects an <a> immediately following a <nav>,
and nav ~ a selects any <a> that follows a <nav> and is a sibling.
3. JavaScript Event Handling
In JavaScript, which method is used to attach an event handler that fires only
once?
A) addEventListener()
B) attachEvent()
C) addEventListener({ once: true })
D) addEventListener(event, handler, { once: true })
- answer-: D) addEventListener(event, handler, { once: true })
Explanation: The addEventListener method can take an options object
where once is set to true to ensure the event handler runs only once. Option C is
close but incorrect because the once property must be inside an options object.
4. Responsive Web Design
Which CSS property is most commonly used in a mobile-first design to adjust the
layout for larger screens?
A) @media (min-width: ...)
B) @media (max-width: ...)
C) @viewport
D) @responsive
- answer-: A) @media (min-width: ...)
Explanation: In mobile-first design, the base styles are for mobile, and then you
,use @media queries with min-width to add styles for larger screens. max-width is
used in desktop-first design.
5. Accessibility (ARIA)
Which ARIA attribute should be used to indicate that a form input is required?
A) aria-required="true"
B) aria-necessary="true"
C) aria-mandatory="true"
D) aria-required
- answer-: A) aria-required="true"
Explanation: The aria-required attribute is used to indicate that an input must be
filled out. It takes values "true" or "false". Note that HTML5 has
a required attribute, but for custom controls, ARIA may be needed.
6. HTML5 Graphics
Which technology is vector-based and best for logos and icons that scale without
loss of quality?
A) Canvas
B) SVG
C) WebGL
D) PNG
- answer-: B) SVG
Explanation: SVG (Scalable Vector Graphics) is vector-based and ideal for logos
and icons. Canvas is raster-based and better for complex graphics and games.
WebGL is for 3D graphics, and PNG is a raster image format.
7. CSS3 Layout
In Flexbox, which property is used to change the direction of the main axis?
, A) flex-direction
B) flex-wrap
C) justify-content
D) align-items
- answer-: A) flex-direction
Explanation: The flex-direction property defines the direction of the main axis
(row, row-reverse, column, column-reverse). flex-wrap controls wrapping, justify-
content aligns items on the main axis, and align-items on the cross axis.
8. JavaScript ES6+
What is the output of the following code?
javascript
const arr = [1, 2, 3];
const [x, ...y] = arr;
console.log(y);
A) [2, 3]
B) [1, 2]
C) [1, 2, 3]
D) [3]
- answer-: A) [2, 3]
Explanation: The rest operator (...) collects the remaining elements. Here, x is
assigned the first element (1), and y collects the rest into an array [2, 3].
9. CSS3 Transitions
Which CSS property is used to define the speed curve of a transition?
A) transition-timing-function
B) transition-duration
C) transition-delay
D) transition-property
