Web Design Quiz
Questions: 16 · 10 minutes
1. A clickable control looks like ordinary body text, so users frequently overlook it. Which change most directly improves its perceived affordance?
Move its click handler into a different JavaScript file
Shorten the page’s metadata description
Give it clear button styling and visible interaction states
Replace its text with an unexplained icon
2. Before CSS layout techniques became widely capable and supported, which method was commonly used to arrange complex page layouts?
WebGL scenes
CSS Grid templates
Nested HTML tables
Shadow DOM components
3. A purely decorative flourish appears beside a heading and communicates no information. What is the most appropriate alt attribute for its <img> element?
An alt value such as ""decorative heading image""
An empty alt value: alt=""""
An alt value containing the image filename
No alt attribute, because decorative images are exempt
4. You need to export a photographic image with many colors and no transparency. Among these traditional choices, which format is generally the most suitable?
SVG
JPEG
GIF
Uncompressed BMP
5. What does a mobile-first CSS strategy usually involve?
Designing only for phones and blocking larger screens
Serving mobile users content with no styling or navigation
Building a fixed-width desktop layout and shrinking it with browser zoom
Starting with styles for smaller viewports, then enhancing layouts at wider breakpoints
6. Which approach best illustrates progressive enhancement?
Start with functional, accessible core content, then add richer features where supported
Require the newest browser before displaying any content
Build the animated interface first and add text only if time permits
Create separate unrelated sites for each browser brand
7. An element uses the standard content-box model with width: 200px, 20px padding on both sides, and a 5px border on both sides. Excluding margin, what is its total rendered width?
230px
240px
250px
200px
8. What is the main role of CSS in a web page?
To control presentation, including layout, color, and typography
To define the meaning and document structure of the content
To store permanent user data in the browser
To process requests on the web server
9. A landing page contains a headline, supporting text, and primary action, but every element has nearly the same size and visual weight. Which principle should be strengthened first?
Progressive enhancement
Visual hierarchy
Source control
Data normalization
10. A form shows the word “Email” visually above a field, but assistive technology does not identify it as the field’s name. What is the best correction?
Put “Email” in the field’s placeholder only
Add the word “Email” as a CSS-generated pseudo-element
Add a title to the form’s submit button
Associate a <label> with the input programmatically
11. Which link text is most useful when a screen-reader user reviews a list of links without the surrounding paragraphs?
View the course schedule
More
Read this
Click here
12. Which HTML element most directly identifies the dominant content unique to a page?
<main>
<article>
<section>
<div>
13. A page jumps downward as large images appear during loading. Which change most directly reduces this unexpected layout shift?
Place all scripts in the document head
Convert the navigation links to uppercase
Increase the images’ display resolution
Specify image dimensions or reserve their aspect-ratio space
14. What was the primary purpose of the first website, created by Tim Berners-Lee at CERN?
To provide a graphical search engine for university libraries
To publish CERN’s particle-collision data as an online archive
To explain the World Wide Web project and how people could use it
To demonstrate the first commercial online shopping system
15. Under the WCAG framework, making text distinguishable from its background primarily supports which accessibility principle?
Operable
Understandable
Robust
Perceivable
16. A two-column desktop page should become a single readable column on narrow screens. Which technique most directly supports that change?
Adding a separate HTML file for every screen width
Using a flexible layout with an appropriate CSS media query
Placing the content inside an HTML table
Increasing the page’s fixed pixel width