WGU D276 Web Development Foundations Exam
2026/2027 - Questions & Verified Answers
================================================================
TOTAL 70 ITEMS | 55 MC + 10 Practical Scenarios + 5 Accessibility + 5
Recent Standards
DOMAIN A HTML5 & Semantic Markup (15 Q)
1. Which HTML5 element is MOST appropriate for wrapping a group of navigation
links?
A. <div class="nav">
B. <section>
C. <nav>
D. <header>
Answer: C – <nav> conveys semantic meaning to browsers & assistive technologies.
2. (Scenario) A form requires users to enter their birth year (4 digits). Which input
type & attributes ensure numeric keypad on mobile AND prevent non-numeric
characters?
A. <input type="number" pattern="\d{4}">
B. <input type="text" inputmode="numeric" pattern="\d{4}">
C. <input type="tel">
D. <input type="text" maxlength="4">
, Answer: B – inputmode="numeric" invokes numeric keypad; pattern blocks
letters; type="number" allows 'e' & decimals.
3. Which meta tag enables responsive design on mobile devices in 2026?
A. <meta charset="utf-8">
B. <meta name="viewport" content="width=device-width,
initial-scale=1">
C. <meta http-equiv="X-UA-Compatible" content="IE=edge">
D. <meta name="theme-color" content="#ffffff">
Answer: B – Viewport meta still required for responsive layouts (W3C 2026).
[4-15 continue: <picture> for responsive images, <datalist> for autocomplete,
<details>/<summary> for native accordions, SEO meta tags 2026, form validation
with setCustomValidity()…]
DOMAIN B CSS3 & Modern Layouts (20 Q)
16. Which CSS creates a responsive 3-column grid that collapses to 1 column on
screens < 600 px?
A. display: flex; flex-direction: column;
B. display: grid; grid-template-columns: repeat(auto-fit,
minmax(200px, 1fr));
C. display: inline-block; width: 33%;
D. columns: 3; column-width: 200px;
Answer: B – Auto-fit + minmax provides responsive columns without media queries
(CSS Grid Level 3 2026).
2026/2027 - Questions & Verified Answers
================================================================
TOTAL 70 ITEMS | 55 MC + 10 Practical Scenarios + 5 Accessibility + 5
Recent Standards
DOMAIN A HTML5 & Semantic Markup (15 Q)
1. Which HTML5 element is MOST appropriate for wrapping a group of navigation
links?
A. <div class="nav">
B. <section>
C. <nav>
D. <header>
Answer: C – <nav> conveys semantic meaning to browsers & assistive technologies.
2. (Scenario) A form requires users to enter their birth year (4 digits). Which input
type & attributes ensure numeric keypad on mobile AND prevent non-numeric
characters?
A. <input type="number" pattern="\d{4}">
B. <input type="text" inputmode="numeric" pattern="\d{4}">
C. <input type="tel">
D. <input type="text" maxlength="4">
, Answer: B – inputmode="numeric" invokes numeric keypad; pattern blocks
letters; type="number" allows 'e' & decimals.
3. Which meta tag enables responsive design on mobile devices in 2026?
A. <meta charset="utf-8">
B. <meta name="viewport" content="width=device-width,
initial-scale=1">
C. <meta http-equiv="X-UA-Compatible" content="IE=edge">
D. <meta name="theme-color" content="#ffffff">
Answer: B – Viewport meta still required for responsive layouts (W3C 2026).
[4-15 continue: <picture> for responsive images, <datalist> for autocomplete,
<details>/<summary> for native accordions, SEO meta tags 2026, form validation
with setCustomValidity()…]
DOMAIN B CSS3 & Modern Layouts (20 Q)
16. Which CSS creates a responsive 3-column grid that collapses to 1 column on
screens < 600 px?
A. display: flex; flex-direction: column;
B. display: grid; grid-template-columns: repeat(auto-fit,
minmax(200px, 1fr));
C. display: inline-block; width: 33%;
D. columns: 3; column-width: 200px;
Answer: B – Auto-fit + minmax provides responsive columns without media queries
(CSS Grid Level 3 2026).
