IT 270 Web Site Design Comprehensive Final Exam Practice
Questions and Detailed Solutions Latest Update 2026/2027 |
HTML, CSS, Responsive Design, Verified Answers - 169
Questions
This comprehensive final exam evaluates mastery of advanced web design concepts, including semantic HTML5,
CSS layout techniques, responsive design strategies, accessibility, and performance optimization. It requires
synthesis of front-end development principles to solve complex, real-world design challenges. It contains 169
multiple-choice questions, each with four distractors and a fully worked rationale that explains why the keyed
answer is correct. Questions are organized into clearly labelled sections that mirror the major content areas of
the course. Targeted learning outcomes include: Implement semantic HTML5 and ARIA for accessible,
SEO-friendly content.; Apply advanced CSS (Flexbox, Grid, custom properties) to create robust, maintainable
layouts.; Design responsive interfaces using fluid grids, flexible media, and modern breakpoint strategies.;
Critically evaluate web performance, accessibility, and cross-browser compatibility.. Every item has been
reviewed for clinical accuracy, current guidelines, and clarity so that students can study with confidence and
self-correct as they work through the bank. Use it as a high-yield review immediately before the exam, or as a
structured practice tool during the unit - the rationales double as concise teaching notes. The recommended
writing time is 3 hours, with a passing score of 70%. Aligned with Aligned with ABET computing accreditation
standards and W3C web standards. standards and reflects the question style commonly seen on accredited
program examinations. Students consistently achieving above the cut score on this bank have historically gone on
Section 1: General (Questions 1-169)
1 A developer is building a page where the main content should
reflow to a single column on mobile, but on desktop, the sidebar
must remain at a fixed width while the main area flexes. Which CSS
approach is most robust for this requirement?
A) Use CSS Grid with `grid-template-columns: 1fr 300px` and a
media query that stacks them.
B) Use Flexbox with `flex: 1 1 0` on main and `flex: 0 0 300px` on
sidebar, plus a media query.
C) Use `float: left` on the sidebar and `margin-left` on main, with a
media query.
D) Use `position: fixed` for the sidebar and `margin-left` on main,
with a media query.
Answer: B
Rationale: Flexbox with `flex: 1 1 0` allows the main content to grow
and shrink while the sidebar remains fixed at 300px. A media query is
needed to switch to single-column on mobile. CSS Grid also works
,but is less flexible for this specific 'grow one, fixed other' pattern.
Floats and fixed positioning are outdated and less maintainable.
2 Which of the following is the most effective way to ensure a website
is perceivable by screen reader users who rely on a keyboard?
A) Add `alt` text to all images and use semantic HTML5 elements.
B) Use ARIA roles and properties extensively to override native
semantics.
C) Ensure all interactive elements are focusable and have visible
focus indicators.
D) Provide text transcripts for all multimedia content.
Answer: C
Rationale: Keyboard accessibility is critical for screen reader users.
Ensuring focusability and visible focus indicators is a core
requirement. While alt text and transcripts are important, they don't
address keyboard navigation. Overusing ARIA can harm accessibility
if native semantics are overridden. Semantic HTML helps but doesn't
guarantee keyboard accessibility.
3 A designer wants to create a card layout that automatically adjusts
the number of columns based on the container's width, with a
minimum card width of 200px. Which CSS is most appropriate?
A) `display: grid; grid-template-columns: repeat(auto-fill,
minmax(200px, 1fr));`
B) `display: flex; flex-wrap: wrap;` with each card `flex: 1 1 200px;`
C) `display: grid; grid-template-columns: repeat(4, 1fr);` with media
queries.
D) `display: flex; flex-wrap: wrap;` with each card `width: 25%;`
Answer: A
Rationale: `auto-fill` with `minmax(200px, 1fr)` creates as many
200px-wide tracks as fit, distributing extra space equally. Flexbox
with `flex: 1 1 200px` can also work but may not produce perfectly
equal column widths if the last row has fewer items. Fixed columns or
,percentages require manual breakpoints and don't adapt fluidly.
4 In a CSS file, you have the following rules. Which rule will apply to
a `<p>` element with `class='intro'` inside a `<div>` with
`id='main'`?
```css
#main p { color: red; }
.intro { color: blue; }
p { color: green; }
```
A) red
B) blue
C) green
D) The color is inherited from a parent.
Answer: A
Rationale: Specificity: `#main p` has specificity (1,0,1) which is higher
than `.intro` (0,1,0) and `p` (0,0,1). Therefore, the ID-based selector
wins despite later rules. Understanding specificity is crucial for
debugging CSS.
5 You are optimizing a website's performance. Which strategy is most
effective for reducing the initial page load time without sacrificing
layout stability?
A) Load all images at full resolution and use CSS to scale them.
B) Defer all JavaScript and inline critical CSS for above-the-fold
content.
C) Use a single large CSS file to reduce HTTP requests.
D) Remove all custom fonts to avoid additional requests.
Answer: B
Rationale: Deferring non-critical JS and inlining critical CSS helps
render above-the-fold content quickly, improving perceived
performance. Loading full-res images wastes bandwidth; a single
large CSS file may still be render-blocking; removing fonts is not
, always necessary and may harm design.
6 Which of the following is a correct use of the `picture` element for
responsive images?
A) `<picture><source srcset='small.jpg' media='(max-width:
600px)'><img src='large.jpg' alt=''></picture>`
B) `<picture><img src='small.jpg' srcset='large.jpg 2x'
alt=''></picture>`
C) `<picture><source srcset='small.jpg' media='(min-width:
600px)'><img src='large.jpg' alt=''></picture>`
D) `<picture><img src='large.jpg' alt='' srcset='small.jpg 600w,
medium.jpg 1000w'></picture>`
Answer: A
Rationale: The `picture` element uses `source` with `media` to switch
sources based on viewport. Option A correctly uses `max-width` to
load small.jpg on narrow screens. Option B uses `srcset` on img, not
picture. Option C uses `min-width` which is opposite. Option D uses
`srcset` with `w` descriptors, which is valid for img but not using
picture's `source`.
7 A developer is building a responsive navigation menu. Which
approach is most accessible for mobile users?
A) Use a hamburger icon that toggles a hidden menu using CSS
`:hover`.
B) Use a `<select>` dropdown to navigate to different pages.
C) Use a button with `aria-expanded` to show/hide a navigation list.
D) Display all navigation links in a horizontal scrollable bar.
Answer: C
Rationale: A button with `aria-expanded` provides proper semantics
and keyboard accessibility. `:hover` is not keyboard accessible.
`<select>` is not a standard navigation pattern and can be confusing.
Horizontal scrollable bars can be difficult to use on touch devices and
may not be obvious.
Questions and Detailed Solutions Latest Update 2026/2027 |
HTML, CSS, Responsive Design, Verified Answers - 169
Questions
This comprehensive final exam evaluates mastery of advanced web design concepts, including semantic HTML5,
CSS layout techniques, responsive design strategies, accessibility, and performance optimization. It requires
synthesis of front-end development principles to solve complex, real-world design challenges. It contains 169
multiple-choice questions, each with four distractors and a fully worked rationale that explains why the keyed
answer is correct. Questions are organized into clearly labelled sections that mirror the major content areas of
the course. Targeted learning outcomes include: Implement semantic HTML5 and ARIA for accessible,
SEO-friendly content.; Apply advanced CSS (Flexbox, Grid, custom properties) to create robust, maintainable
layouts.; Design responsive interfaces using fluid grids, flexible media, and modern breakpoint strategies.;
Critically evaluate web performance, accessibility, and cross-browser compatibility.. Every item has been
reviewed for clinical accuracy, current guidelines, and clarity so that students can study with confidence and
self-correct as they work through the bank. Use it as a high-yield review immediately before the exam, or as a
structured practice tool during the unit - the rationales double as concise teaching notes. The recommended
writing time is 3 hours, with a passing score of 70%. Aligned with Aligned with ABET computing accreditation
standards and W3C web standards. standards and reflects the question style commonly seen on accredited
program examinations. Students consistently achieving above the cut score on this bank have historically gone on
Section 1: General (Questions 1-169)
1 A developer is building a page where the main content should
reflow to a single column on mobile, but on desktop, the sidebar
must remain at a fixed width while the main area flexes. Which CSS
approach is most robust for this requirement?
A) Use CSS Grid with `grid-template-columns: 1fr 300px` and a
media query that stacks them.
B) Use Flexbox with `flex: 1 1 0` on main and `flex: 0 0 300px` on
sidebar, plus a media query.
C) Use `float: left` on the sidebar and `margin-left` on main, with a
media query.
D) Use `position: fixed` for the sidebar and `margin-left` on main,
with a media query.
Answer: B
Rationale: Flexbox with `flex: 1 1 0` allows the main content to grow
and shrink while the sidebar remains fixed at 300px. A media query is
needed to switch to single-column on mobile. CSS Grid also works
,but is less flexible for this specific 'grow one, fixed other' pattern.
Floats and fixed positioning are outdated and less maintainable.
2 Which of the following is the most effective way to ensure a website
is perceivable by screen reader users who rely on a keyboard?
A) Add `alt` text to all images and use semantic HTML5 elements.
B) Use ARIA roles and properties extensively to override native
semantics.
C) Ensure all interactive elements are focusable and have visible
focus indicators.
D) Provide text transcripts for all multimedia content.
Answer: C
Rationale: Keyboard accessibility is critical for screen reader users.
Ensuring focusability and visible focus indicators is a core
requirement. While alt text and transcripts are important, they don't
address keyboard navigation. Overusing ARIA can harm accessibility
if native semantics are overridden. Semantic HTML helps but doesn't
guarantee keyboard accessibility.
3 A designer wants to create a card layout that automatically adjusts
the number of columns based on the container's width, with a
minimum card width of 200px. Which CSS is most appropriate?
A) `display: grid; grid-template-columns: repeat(auto-fill,
minmax(200px, 1fr));`
B) `display: flex; flex-wrap: wrap;` with each card `flex: 1 1 200px;`
C) `display: grid; grid-template-columns: repeat(4, 1fr);` with media
queries.
D) `display: flex; flex-wrap: wrap;` with each card `width: 25%;`
Answer: A
Rationale: `auto-fill` with `minmax(200px, 1fr)` creates as many
200px-wide tracks as fit, distributing extra space equally. Flexbox
with `flex: 1 1 200px` can also work but may not produce perfectly
equal column widths if the last row has fewer items. Fixed columns or
,percentages require manual breakpoints and don't adapt fluidly.
4 In a CSS file, you have the following rules. Which rule will apply to
a `<p>` element with `class='intro'` inside a `<div>` with
`id='main'`?
```css
#main p { color: red; }
.intro { color: blue; }
p { color: green; }
```
A) red
B) blue
C) green
D) The color is inherited from a parent.
Answer: A
Rationale: Specificity: `#main p` has specificity (1,0,1) which is higher
than `.intro` (0,1,0) and `p` (0,0,1). Therefore, the ID-based selector
wins despite later rules. Understanding specificity is crucial for
debugging CSS.
5 You are optimizing a website's performance. Which strategy is most
effective for reducing the initial page load time without sacrificing
layout stability?
A) Load all images at full resolution and use CSS to scale them.
B) Defer all JavaScript and inline critical CSS for above-the-fold
content.
C) Use a single large CSS file to reduce HTTP requests.
D) Remove all custom fonts to avoid additional requests.
Answer: B
Rationale: Deferring non-critical JS and inlining critical CSS helps
render above-the-fold content quickly, improving perceived
performance. Loading full-res images wastes bandwidth; a single
large CSS file may still be render-blocking; removing fonts is not
, always necessary and may harm design.
6 Which of the following is a correct use of the `picture` element for
responsive images?
A) `<picture><source srcset='small.jpg' media='(max-width:
600px)'><img src='large.jpg' alt=''></picture>`
B) `<picture><img src='small.jpg' srcset='large.jpg 2x'
alt=''></picture>`
C) `<picture><source srcset='small.jpg' media='(min-width:
600px)'><img src='large.jpg' alt=''></picture>`
D) `<picture><img src='large.jpg' alt='' srcset='small.jpg 600w,
medium.jpg 1000w'></picture>`
Answer: A
Rationale: The `picture` element uses `source` with `media` to switch
sources based on viewport. Option A correctly uses `max-width` to
load small.jpg on narrow screens. Option B uses `srcset` on img, not
picture. Option C uses `min-width` which is opposite. Option D uses
`srcset` with `w` descriptors, which is valid for img but not using
picture's `source`.
7 A developer is building a responsive navigation menu. Which
approach is most accessible for mobile users?
A) Use a hamburger icon that toggles a hidden menu using CSS
`:hover`.
B) Use a `<select>` dropdown to navigate to different pages.
C) Use a button with `aria-expanded` to show/hide a navigation list.
D) Display all navigation links in a horizontal scrollable bar.
Answer: C
Rationale: A button with `aria-expanded` provides proper semantics
and keyboard accessibility. `:hover` is not keyboard accessible.
`<select>` is not a standard navigation pattern and can be confusing.
Horizontal scrollable bars can be difficult to use on touch devices and
may not be obvious.
