2026/2027 EDITION | WGU D276 OBJECTIVE ASS
Web Development
Foundations
Exam Review
150 exam questions with 100% correct answers and detailed
rationales covering HTML5, CSS3, JavaScript, responsive design
web protocols, accessibility, and front-end best practices aligne
with WGU competencies.
150 Questions | 100% Correct Answers | Brand New
7 Sections | HTML5, CSS3, JavaScript, Protocols, Accessibility
Aligned with WGU D276 Competencies and ZyBooks Curriculum
C O M P R E H E N S I V E E X A M P R E PA R AT I O N
, WGU D276 Web Development Foundations | 2026/2027 Edition
150 Exam Questions with 100% Correct Answers | WGU-Aligned
Section 1: Web Design Principles and Usability
Responsive Design, Accessibility/WCAG, User Experience, Visual Hierarchy, Nielsen Heuristics, Fitts's Law, Gestalt Principles
Q1: Which of Nielsen's 10 usability heuristics states that the system should keep users informed about what is going on through
appropriate feedback within reasonable time?
A. Visibility of system status [CORRECT] [CORRECT]
B. User control and freedom
C. Consistency and standards
D. Error prevention
Correct Answer: A
Rationale: Visibility of system status is the first of Nielsen's heuristics and requires that users always know what is happening. Examples include loading
indicators, progress bars, and confirmation messages. This heuristic focuses on providing timely feedback after every user action.
Q2: A web designer is building an e-commerce site that must display product grids on desktop (3 columns), tablet (2 columns), and
mobile (1 column). Which approach best achieves this without JavaScript?
A. Use JavaScript to detect screen width and inject inline styles
B. Use CSS media queries to adjust the grid layout at different breakpoints [CORRECT] [CORRECT]
C. Use fixed-width div elements set to 33% and let them wrap naturally
D. Create three separate HTML pages for each device type
Correct Answer: B
Rationale: CSS media queries allow styles to be applied conditionally based on viewport width, making them the standard approach for responsive
layouts. JavaScript detection is unnecessary and less reliable. Separate pages violate the one-URL-per-content principle and create maintenance burdens.
Q3: A designer is placing the most frequently used action button on a web application toolbar. According to Fitts's Law, where
should this button be placed for optimal usability?
A. In the center of the page where users naturally look first
B. Near the edges or corners of the screen where the target area is effectively larger [CORRECT] [CORRECT]
C. Directly below the page title so users can find it by reading top to bottom
D. In a modal dialog so it stands out from other interface elements
Correct Answer: B
Rationale: Fitts's Law states that the time to reach a target is a function of the distance to and size of the target. Screen edges and corners effectively have
infinite depth in one direction, making them easier and faster to acquire. This principle is why many OS-level menus are anchored to screen edges.
Q4: Under WCAG 2.1 Level AA guidelines, what is the minimum contrast ratio required between normal-sized text and its
background?
A. 3:1
B. 4.5:1 [CORRECT] [CORRECT]
C. 7:1
D. 2:1
Correct Answer: B
Rationale: WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text (below 18pt or 14pt bold). Level AAA requires 7:1 for
normal text. A 3:1 ratio applies only to large text at the AA level. A 2:1 ratio is insufficient at any WCAG level.
Q5: A homepage has a large heading, a medium subheading, body text, and a small footnote. The designer wants to clearly
communicate the order of importance. Which combination of visual properties best establishes hierarchy?
A. Same font size for all elements, using only color to differentiate importance
B. Larger font size and bolder weight for the heading, progressively decreasing for each lower level [CORRECT] [CORRECT]
C. Italic style for the heading, uppercase for the body text, and regular for the footnote
D. Identical styling for all elements, relying on screen reader announcements to convey importance
Correct Answer: B
WGU D276 Web Development Foundations | 2026/2027 Edition | 150 Questions | Page 1
, Rationale: Visual hierarchy is established through systematic variation in size, weight, color, spacing, and contrast. Using progressively smaller and
lighter text signals decreasing importance. Relying on a single property like color alone fails to create clear hierarchy and harms accessibility for
color-blind users.
Q6: A dashboard displays five metric cards arranged in a tight group, while a sixth card is positioned far to the right with extra
spacing. Users consistently perceive the five cards as one group and the sixth as separate. Which Gestalt principle best explains
this perception?
A. Similarity
B. Proximity [CORRECT] [CORRECT]
C. Closure
D. Figure-ground
Correct Answer: B
Rationale: The Gestalt principle of proximity states that elements placed close together are perceived as belonging to the same group. The five tightly
spaced cards are grouped mentally, while the isolated card is seen as separate. This is one of the strongest grouping principles in visual perception.
Q7: A developer adds an image of a complex bar chart to a web page. The chart shows quarterly revenue data. What is the most
appropriate way to make this image accessible?
A. Add alt="chart" so screen readers announce there is an image
B. Add alt="" because the chart is decorative and not essential to understanding
C. Provide a detailed alt attribute summarizing the chart data and include a longer description in a separate element [CORRECT]
[CORRECT]
D. Add title="Revenue Chart" and rely on the browser tooltip for accessibility
Correct Answer: C
Rationale: Meaningful images require descriptive alt text that conveys the content and purpose. For complex images like charts, a brief summary in alt
text combined with a longer description (via aria-describedby or a visible data table) provides full access. Empty alt is only for decorative images.
Q8: In a fluid grid layout, which CSS unit is most commonly used for column widths so they scale proportionally with the
viewport?
A. px (pixels)
B. em (relative to font size)
C. % (percentage of the parent container) [CORRECT] [CORRECT]
D. pt (points)
Correct Answer: C
Rationale: Fluid grids use percentage-based widths so that columns scale relative to their parent container as the viewport changes. Pixels and points are
fixed units that do not adapt. While em units are relative, they scale with font size rather than viewport width, making them less suited for grid columns.
Q9: An online form clears all fields when the user accidentally clicks the browser's back button. When the user returns, all entered
data is lost. Which Nielsen heuristic is most violated?
A. Recognition rather than recall
B. Error prevention
C. User control and freedom [CORRECT] [CORRECT]
D. Aesthetic and minimalist design
Correct Answer: C
Rationale: User control and freedom requires that users have clearly marked exits and the ability to undo or redo actions. Losing form data on navigation
with no way to recover it removes user control. Error prevention is about preventing errors before they occur, not about recovering from navigation
actions.
Q10: A stylesheet contains: @media (max-width: 600px) { .sidebar { display: none; } }. The sidebar is hidden when the viewport is
600px wide but visible at 601px. A user on a tablet at 601px reports the sidebar overlaps the main content. What is the most likely
cause?
A. The media query should use min-width instead of max-width
B. The breakpoint does not account for the tablet's actual content area, and there is no intermediate breakpoint or flexible layout rule
for widths just above 600px [CORRECT] [CORRECT]
C. The sidebar should use visibility: hidden instead of display: none
D. Media queries only work on mobile devices and cannot affect tablets
Correct Answer: B
WGU D276 Web Development Foundations | 2026/2027 Edition | 150 Questions | Page 2
, Rationale: Breakpoints are transition points, not guarantees. At 601px, the mobile CSS no longer applies but the desktop layout may not work well
either. This gap is a common responsive design problem. The solution is either adding intermediate breakpoints or using flexible layouts (like flexbox or
grid) that adapt smoothly across all widths.
Q11: Which Gestalt principle explains why users perceive a series of dashed lines as a single continuous line rather than separate
dashes?
A. Proximity
B. Similarity
C. Closure [CORRECT] [CORRECT]
D. Continuity
Correct Answer: C
Rationale: Closure is the Gestalt principle where the mind fills in missing information to perceive a complete whole. When users see dashed lines, their
brain automatically closes the gaps and perceives a continuous line. This differs from continuity, which is about following smooth paths, though the two
are related.
Q12: A registration form asks users to create a password. It displays password requirements only after the user submits an invalid
password. What UX improvement would best address this issue?
A. Remove password requirements entirely to reduce friction
B. Display the requirements in real-time as the user types, showing which criteria are met [CORRECT] [CORRECT]
C. Show the requirements in a modal popup when the user clicks the password field
D. Move the password field to a separate page after the user completes the account information
Correct Answer: B
Rationale: Showing password requirements in real-time provides immediate feedback and aligns with the visibility of system status heuristic. Users can
adjust their input as they type rather than discovering problems after submission. This reduces errors and frustration, improving the overall user
experience.
Q13: A website passes an automated accessibility checker with zero errors, but a manual screen reader test reveals that the
reading order jumps unpredictably between sections. What is the most likely root cause?
A. The HTML lacks semantic elements and uses CSS positioning that rearranges the visual order differently from the DOM order
[CORRECT] [CORRECT]
B. The website uses too many ARIA roles that conflict with native semantics
C. The automated checker is outdated and does not support modern HTML5
D. The screen reader software needs to be updated to the latest version
Correct Answer: A
Rationale: Automated checkers validate code syntax but cannot assess logical reading order. When CSS positioning (like absolute or grid placement)
moves elements visually, the DOM order may not match what users see. Screen readers follow DOM order, creating a disconnect. Using semantic HTML
in logical order resolves this.
Q14: A designer sets all container widths using percentages and images to max-width: 100%. On a 320px mobile screen, text in a
sidebar becomes unreadable because each column is too narrow. Which responsive strategy would best solve this?
A. Set a fixed min-width on the body element to prevent the page from shrinking below 768px
B. Use a media query to stack the columns vertically below a certain breakpoint [CORRECT] [CORRECT]
C. Reduce the base font size to 10px so more text fits in the narrow columns
D. Replace percentage widths with pixel widths set to the mobile screen width
Correct Answer: B
Rationale: Fluid layouts alone cannot solve every viewport challenge. When columns become too narrow to be usable, a media query should reflow the
layout. Stacking columns vertically gives each one the full viewport width, making content readable. Setting a fixed min-width creates horizontal
scrolling, which is a poor mobile experience.
Q15: According to Nielsen's heuristics, which principle is demonstrated when a system uses terminology and icons that match the
user's existing mental model rather than technical system terms?
A. Match between system and the real world [CORRECT] [CORRECT]
B. Flexibility and efficiency of use
C. Help users recognize, diagnose, and recover from errors
D. Consistency and standards
Correct Answer: A
WGU D276 Web Development Foundations | 2026/2027 Edition | 150 Questions | Page 3
Web Development
Foundations
Exam Review
150 exam questions with 100% correct answers and detailed
rationales covering HTML5, CSS3, JavaScript, responsive design
web protocols, accessibility, and front-end best practices aligne
with WGU competencies.
150 Questions | 100% Correct Answers | Brand New
7 Sections | HTML5, CSS3, JavaScript, Protocols, Accessibility
Aligned with WGU D276 Competencies and ZyBooks Curriculum
C O M P R E H E N S I V E E X A M P R E PA R AT I O N
, WGU D276 Web Development Foundations | 2026/2027 Edition
150 Exam Questions with 100% Correct Answers | WGU-Aligned
Section 1: Web Design Principles and Usability
Responsive Design, Accessibility/WCAG, User Experience, Visual Hierarchy, Nielsen Heuristics, Fitts's Law, Gestalt Principles
Q1: Which of Nielsen's 10 usability heuristics states that the system should keep users informed about what is going on through
appropriate feedback within reasonable time?
A. Visibility of system status [CORRECT] [CORRECT]
B. User control and freedom
C. Consistency and standards
D. Error prevention
Correct Answer: A
Rationale: Visibility of system status is the first of Nielsen's heuristics and requires that users always know what is happening. Examples include loading
indicators, progress bars, and confirmation messages. This heuristic focuses on providing timely feedback after every user action.
Q2: A web designer is building an e-commerce site that must display product grids on desktop (3 columns), tablet (2 columns), and
mobile (1 column). Which approach best achieves this without JavaScript?
A. Use JavaScript to detect screen width and inject inline styles
B. Use CSS media queries to adjust the grid layout at different breakpoints [CORRECT] [CORRECT]
C. Use fixed-width div elements set to 33% and let them wrap naturally
D. Create three separate HTML pages for each device type
Correct Answer: B
Rationale: CSS media queries allow styles to be applied conditionally based on viewport width, making them the standard approach for responsive
layouts. JavaScript detection is unnecessary and less reliable. Separate pages violate the one-URL-per-content principle and create maintenance burdens.
Q3: A designer is placing the most frequently used action button on a web application toolbar. According to Fitts's Law, where
should this button be placed for optimal usability?
A. In the center of the page where users naturally look first
B. Near the edges or corners of the screen where the target area is effectively larger [CORRECT] [CORRECT]
C. Directly below the page title so users can find it by reading top to bottom
D. In a modal dialog so it stands out from other interface elements
Correct Answer: B
Rationale: Fitts's Law states that the time to reach a target is a function of the distance to and size of the target. Screen edges and corners effectively have
infinite depth in one direction, making them easier and faster to acquire. This principle is why many OS-level menus are anchored to screen edges.
Q4: Under WCAG 2.1 Level AA guidelines, what is the minimum contrast ratio required between normal-sized text and its
background?
A. 3:1
B. 4.5:1 [CORRECT] [CORRECT]
C. 7:1
D. 2:1
Correct Answer: B
Rationale: WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text (below 18pt or 14pt bold). Level AAA requires 7:1 for
normal text. A 3:1 ratio applies only to large text at the AA level. A 2:1 ratio is insufficient at any WCAG level.
Q5: A homepage has a large heading, a medium subheading, body text, and a small footnote. The designer wants to clearly
communicate the order of importance. Which combination of visual properties best establishes hierarchy?
A. Same font size for all elements, using only color to differentiate importance
B. Larger font size and bolder weight for the heading, progressively decreasing for each lower level [CORRECT] [CORRECT]
C. Italic style for the heading, uppercase for the body text, and regular for the footnote
D. Identical styling for all elements, relying on screen reader announcements to convey importance
Correct Answer: B
WGU D276 Web Development Foundations | 2026/2027 Edition | 150 Questions | Page 1
, Rationale: Visual hierarchy is established through systematic variation in size, weight, color, spacing, and contrast. Using progressively smaller and
lighter text signals decreasing importance. Relying on a single property like color alone fails to create clear hierarchy and harms accessibility for
color-blind users.
Q6: A dashboard displays five metric cards arranged in a tight group, while a sixth card is positioned far to the right with extra
spacing. Users consistently perceive the five cards as one group and the sixth as separate. Which Gestalt principle best explains
this perception?
A. Similarity
B. Proximity [CORRECT] [CORRECT]
C. Closure
D. Figure-ground
Correct Answer: B
Rationale: The Gestalt principle of proximity states that elements placed close together are perceived as belonging to the same group. The five tightly
spaced cards are grouped mentally, while the isolated card is seen as separate. This is one of the strongest grouping principles in visual perception.
Q7: A developer adds an image of a complex bar chart to a web page. The chart shows quarterly revenue data. What is the most
appropriate way to make this image accessible?
A. Add alt="chart" so screen readers announce there is an image
B. Add alt="" because the chart is decorative and not essential to understanding
C. Provide a detailed alt attribute summarizing the chart data and include a longer description in a separate element [CORRECT]
[CORRECT]
D. Add title="Revenue Chart" and rely on the browser tooltip for accessibility
Correct Answer: C
Rationale: Meaningful images require descriptive alt text that conveys the content and purpose. For complex images like charts, a brief summary in alt
text combined with a longer description (via aria-describedby or a visible data table) provides full access. Empty alt is only for decorative images.
Q8: In a fluid grid layout, which CSS unit is most commonly used for column widths so they scale proportionally with the
viewport?
A. px (pixels)
B. em (relative to font size)
C. % (percentage of the parent container) [CORRECT] [CORRECT]
D. pt (points)
Correct Answer: C
Rationale: Fluid grids use percentage-based widths so that columns scale relative to their parent container as the viewport changes. Pixels and points are
fixed units that do not adapt. While em units are relative, they scale with font size rather than viewport width, making them less suited for grid columns.
Q9: An online form clears all fields when the user accidentally clicks the browser's back button. When the user returns, all entered
data is lost. Which Nielsen heuristic is most violated?
A. Recognition rather than recall
B. Error prevention
C. User control and freedom [CORRECT] [CORRECT]
D. Aesthetic and minimalist design
Correct Answer: C
Rationale: User control and freedom requires that users have clearly marked exits and the ability to undo or redo actions. Losing form data on navigation
with no way to recover it removes user control. Error prevention is about preventing errors before they occur, not about recovering from navigation
actions.
Q10: A stylesheet contains: @media (max-width: 600px) { .sidebar { display: none; } }. The sidebar is hidden when the viewport is
600px wide but visible at 601px. A user on a tablet at 601px reports the sidebar overlaps the main content. What is the most likely
cause?
A. The media query should use min-width instead of max-width
B. The breakpoint does not account for the tablet's actual content area, and there is no intermediate breakpoint or flexible layout rule
for widths just above 600px [CORRECT] [CORRECT]
C. The sidebar should use visibility: hidden instead of display: none
D. Media queries only work on mobile devices and cannot affect tablets
Correct Answer: B
WGU D276 Web Development Foundations | 2026/2027 Edition | 150 Questions | Page 2
, Rationale: Breakpoints are transition points, not guarantees. At 601px, the mobile CSS no longer applies but the desktop layout may not work well
either. This gap is a common responsive design problem. The solution is either adding intermediate breakpoints or using flexible layouts (like flexbox or
grid) that adapt smoothly across all widths.
Q11: Which Gestalt principle explains why users perceive a series of dashed lines as a single continuous line rather than separate
dashes?
A. Proximity
B. Similarity
C. Closure [CORRECT] [CORRECT]
D. Continuity
Correct Answer: C
Rationale: Closure is the Gestalt principle where the mind fills in missing information to perceive a complete whole. When users see dashed lines, their
brain automatically closes the gaps and perceives a continuous line. This differs from continuity, which is about following smooth paths, though the two
are related.
Q12: A registration form asks users to create a password. It displays password requirements only after the user submits an invalid
password. What UX improvement would best address this issue?
A. Remove password requirements entirely to reduce friction
B. Display the requirements in real-time as the user types, showing which criteria are met [CORRECT] [CORRECT]
C. Show the requirements in a modal popup when the user clicks the password field
D. Move the password field to a separate page after the user completes the account information
Correct Answer: B
Rationale: Showing password requirements in real-time provides immediate feedback and aligns with the visibility of system status heuristic. Users can
adjust their input as they type rather than discovering problems after submission. This reduces errors and frustration, improving the overall user
experience.
Q13: A website passes an automated accessibility checker with zero errors, but a manual screen reader test reveals that the
reading order jumps unpredictably between sections. What is the most likely root cause?
A. The HTML lacks semantic elements and uses CSS positioning that rearranges the visual order differently from the DOM order
[CORRECT] [CORRECT]
B. The website uses too many ARIA roles that conflict with native semantics
C. The automated checker is outdated and does not support modern HTML5
D. The screen reader software needs to be updated to the latest version
Correct Answer: A
Rationale: Automated checkers validate code syntax but cannot assess logical reading order. When CSS positioning (like absolute or grid placement)
moves elements visually, the DOM order may not match what users see. Screen readers follow DOM order, creating a disconnect. Using semantic HTML
in logical order resolves this.
Q14: A designer sets all container widths using percentages and images to max-width: 100%. On a 320px mobile screen, text in a
sidebar becomes unreadable because each column is too narrow. Which responsive strategy would best solve this?
A. Set a fixed min-width on the body element to prevent the page from shrinking below 768px
B. Use a media query to stack the columns vertically below a certain breakpoint [CORRECT] [CORRECT]
C. Reduce the base font size to 10px so more text fits in the narrow columns
D. Replace percentage widths with pixel widths set to the mobile screen width
Correct Answer: B
Rationale: Fluid layouts alone cannot solve every viewport challenge. When columns become too narrow to be usable, a media query should reflow the
layout. Stacking columns vertically gives each one the full viewport width, making content readable. Setting a fixed min-width creates horizontal
scrolling, which is a poor mobile experience.
Q15: According to Nielsen's heuristics, which principle is demonstrated when a system uses terminology and icons that match the
user's existing mental model rather than technical system terms?
A. Match between system and the real world [CORRECT] [CORRECT]
B. Flexibility and efficiency of use
C. Help users recognize, diagnose, and recover from errors
D. Consistency and standards
Correct Answer: A
WGU D276 Web Development Foundations | 2026/2027 Edition | 150 Questions | Page 3
