### Chapter 1: Getting Started in Web Design
1. What does the user experience designer primarily produce?
- A) HTML and CSS documents
- B) Storyboards
- C) "Look and feel" deliverables
- D) PHP scripts
2. What does the W3C do?
- A) Writes CSS for web pages
- B) Guides the development of web-related technologies
- C) Develops PHP and Ruby frameworks
- D) Creates web hosting services
3. What is Ruby primarily used for in web development?
- A) Checks a form field for a valid entry
- B) Creates a custom server-side web application
- C) Identifies text as a second-level heading
- D) Makes all second-level headings blue
4. What is the primary difference between frontend and backend web development?
- A) Frontend deals with database management, while backend deals with the
browser interface.
- B) Frontend involves server-side logic, while backend focuses on user
interactions.
- C) Frontend is browser-related, while backend focuses on applications and
databases on the server.
- D) There is no difference; they are the same.
5. What does an FTP tool do?
- A) Converts HTML into CSS for browser rendering
- B) Transfers files between computers over the internet
- C) Hosts websites on a server
- D) Builds PHP-based applications
---
### Chapter 2: How the Web Works
6. Which protocol is used to transfer web documents on the internet?
- A) FTP
- B) CSS
- C) HTTP
- D) IP
7. Which organization is responsible for monitoring web technologies?
- A) W3C
- B) CERN
- C) NCSA
- D) DNS
8. What does URL stand for?
- A) Uniform Resource Link
- B) Universal Resource Locator
- C) Uniform Resource Locator
- D) Universal Reference Link
9. What is the main purpose of DNS?
- A) Transfers files over the internet
- B) Matches domain names to numeric IP addresses
- C) Creates web browser interfaces
- D) Secures online communications
10. Where was the web first developed?
- A) W3C headquarters
- B) CERN
- C) NCSA
- D) NASA
---
### Chapter 3: Big Concepts
11. Which technology addresses the issue of varying screen sizes?
- A) Server-side detection
- B) Responsive design
- C) Site performance optimization
- D) Progressive enhancement
12. What is a waterfall chart used for?
- A) To visualize the distribution of user interactions on a website
- B) To evaluate a website’s performance during optimization
- C) To test different CSS properties
- D) To analyze JavaScript runtime
13. Which of the following is a measure to improve accessibility for visually impaired
users?
- A) Add captions to videos
- B) Use semantic HTML and logical content order
- C) Ensure buttons are large and clickable
- D) Optimize site performance
14. What is the purpose of site performance optimization?
- A) To reduce page load time and improve user experience
- B) To make the site accessible for screen readers
- C) To increase CSS and HTML compatibility
- D) To minimize JavaScript usage
15. What is progressive enhancement?
- A) A design method that ensures basic functionality in all browsers
- B) A way to progressively load large images
- C) A framework for advanced CSS features
- D) A method to ensure a page works offline
---
### Chapter 4: Creating a Simple Page
16. What is the difference between a tag and an element in HTML?
- A) Tags are the content inside elements.
- B) Tags delimit elements, while elements include tags and content.
- C) Tags are semantic markers, and elements are visual tools.
- D) There is no difference.
17. Which filename is valid for a web document?
- A) %whatever.html
- B) index.doc
- C) Sunflower.html
- D) cooking home page.html
18. How would you write a comment in HTML?
- A) # This is a comment
- B) // This is a comment
- C) <!-- This is a comment -->
- D) /* This is a comment */
19. Which attribute is missing in this HTML snippet? `<img "birthday.jpg">`
- A) `src`
- B) `alt`
- C) `href`
- D) `id`
20. What is the minimal markup required for an HTML5 document?
- A) `<html><head></head><body></body></html>`
- B) `<DOCTYPE html><html><body></body></html>`
- C) `<!DOCTYPE
html><html><head><title></title></head><body></body></html>`
- D) `<!DOCTYPE html><html></html>`
---
### Chapter 5: Marking Up Text
21. Which attributes must be included in every `img` element?
- A) `src` and `class`
- B) `src` and `alt`
- C) `href` and `alt`
- D) `href` and `title`
22. How do you make a thematic break between paragraphs in HTML?
- A) `<br>`
- B) `<hr>`
- C) `<div>`
- D) `<section>`
23. Which element displays whitespace exactly as it is typed into the source
document?
- A) `<pre>`
- B) `<code>`
- C) `<p>`
- D) `<blockquote>`
24. What is the difference between a `ul` and an `ol` element?
- A) `ul` lists are ordered by default, and `ol` lists are unordered.
- B) `ul` creates unordered lists, and `ol` creates ordered lists with sequence.
- C) `ul` is for visual lists, and `ol` is for semantic lists.
- D) There is no difference.
25. How do you remove bullets from an unordered list?
- A) Use a style attribute to set `list-style: none;`
- B) Delete the `<li>` tags
- C) Use JavaScript to hide the bullets
- D) Convert the list to a `<div>`
---
### Chapter 6: Adding Links
26. How would you create a link to another website?
- A) `<link href="http://example.com">Visit</link>`
- B) `<a href="http://example.com">Visit</a>`
- C) `<url src="http://example.com">Visit</url>`
- D) `<a>Visit</a>`
27. How would you link to a page in the same directory?
- A) `<a href="page.html">Visit</a>`
- B) `<a href="http://example.com/page.html">Visit</a>`
- C) `<a href="./page.html">Visit</a>`
- D) Both A and C
28. Which symbol is used to move up a directory in a relative URL?
- A) `../`
- B) `//`
- C) `..//`
- D) `./`
29. How would you create an email link in HTML?
- A) `<a href="mailto:
[email protected]">Email Me</a>`
- B) `<a href="
[email protected]">Email Me</a>`
- C) `<a href="mail:
[email protected]">Email Me</a>`
- D) `<a>Email Me</a>`
30. How would you create a link that opens in a new tab?
- A) Add `target="_new"`
- B) Add `target="_blank"`
- C) Add `rel="external"`
- D) Add `target="new"`
---
### Chapter 7: Adding Images
31. Which attribute is required for accessibility in the `img` element?
- A) `alt`
- B) `title`
- C) `role`
- D) `src`
32. What is the correct syntax for embedding an image in HTML?
- A) `<img src="image.jpg" alt="Image">`
- B) `<image href="image.jpg" description="Image">`
- C) `<img alt="Image" src="image.jpg">`
- D) Both A and C
33. Which element is used to provide fallback text for an image?
- A) `<fallback>`
- B) `<alt>`
- C) `<img>`
- D) `<figure>`
34. What might cause an image not to display on a webpage?
- A) Incorrect file path
- B) Unsupported image format
- C) Missing file
- D) All of the above
35. What is the purpose of the `
srcset` attribute in an `img` element?
- A) To specify multiple image formats for fallback
- B) To provide responsive image options
- C) To specify image size in pixels
- D) To display alternative text
---
### Chapter 11: CSS Basics
36. What is a CSS selector?
- A) The part of a CSS rule that applies styles to elements
- B) The value assigned to a property
- C) The declaration block
- D) A specific HTML element
37. Which property would you use to change the text color in CSS?
- A) `font-color`
- B) `text-color`
- C) `color`
- D) `background-color`
38. What does the `z-index` property do in CSS?
- A) Changes the font size
- B) Adjusts the stacking order of elements
- C) Controls the horizontal position of elements
- D) Sets the opacity of elements
39. How do you create a CSS class?
- A) `.classname { ... }`
- B) `#classname { ... }`
- C) `classname { ... }`
- D) `@classname { ... }`
40. Which unit is relative to the root font size in CSS?
- A) `px`
- B) `%`
- C) `em`
- D) `rem`
---
Here’s an expanded set of **additional multiple-choice questions** covering more
chapters:
---
### Chapter 8: Working with Tables
41. Which tag is used to define a row in an HTML table?
- A) `<tr>`
- B) `<td>`
- C) `<th>`
- D) `<table>`
42. How would you create a table cell that spans two columns?
- A) Add `rowspan="2"` to the `<td>` element
- B) Add `colspan="2"` to the `<td>` element
- C) Add `span="2"` to the `<tr>` element
- D) Add `columns="2"` to the `<table>` element
43. What is the purpose of the `<caption>` tag in a table?
- A) To describe the contents of a table
- B) To create a footer row
- C) To center-align the table
- D) To format text inside cells
---
### Chapter 9: Forms
44. Which attribute is required to associate a `<label>` with a form element?
- A) `for`
- B) `id`
- C) `name`
- D) `value`
45. Which input type is used to create a password field?
- A) `<input type="text">`
- B) `<input type="password">`
- C) `<input type="hidden">`
- D) `<input type="secure">`
46. How do you make a form submit data to a specific URL?
- A) Add the `action` attribute to the `<form>` tag
- B) Use a `<button>` tag with a URL
- C) Add a `method` attribute to the `<form>` tag
- D) Use a `<link>` tag inside the form
47. Which attribute is used to specify that a form field must be filled out before
submission?
- A) `required`
- B) `validate`
- C) `mandatory`
- D) `checked`
---
### Chapter 10: Multimedia
48. Which element is used to embed a video file in HTML?
- A) `<embed>`
- B) `<video>`
- C) `<iframe>`
- D) `<media>`
49. What is the purpose of the `controls` attribute in the `<video>` tag?
- A) It adds playback controls to the video player.
- B) It defines the video source file.
- C) It specifies the aspect ratio of the video.
- D) It makes the video autoplay.
50. How can you embed an audio file in HTML?
- A) `<audio src="audio.mp3"></audio>`
- B) `<sound src="audio.mp3"></sound>`
- C) `<media src="audio.mp3"></media>`
- D) `<embed src="audio.mp3"></embed>`
---
### Chapter 12: Formatting Text
51. What does the `font-variant: small-caps;` CSS property do?
- A) Sets the font to all uppercase letters
- B) Displays lowercase letters as smaller uppercase letters
- C) Changes the font size to a smaller variant
- D) Transforms uppercase letters to lowercase
52. Which property would you use to center text horizontally in CSS?
- A) `align`
- B) `justify-content`
- C) `text-align`
- D) `vertical-align`
---
### Chapter 13: Colors and Backgrounds
53. Which color model uses percentages for red, green, and blue values?
- A) RGB
- B) HEX
- C) HSL
- D) CMYK
54. Which property is used to specify a background image in CSS?
- A) `background-color`
- B) `background-image`
- C) `image-src`
- D) `background-src`
---
### Chapter 14: Box Properties
55. What does the `margin` property control?
- A) The space inside an element’s border
- B) The space between an element and its surrounding elements
- C) The border width
- D) The overall size of the element
56. Which property is used to specify the space inside an element’s border?
- A) `padding`
- B) `margin`
- C) `border-spacing`
- D) `width`
57. How would you apply a dashed border around an element?
- A) `border: dashed 1px black;`
- B) `border: 1px black dashed;`
- C) `border-style: dashed; border-width: 1px;`
- D) All of the above
---
### Chapter 15: Floating and Positioning
58. What does the `float` property do?
- A) Allows elements to overlap
- B) Positions an element to the left or right of its container
- C) Centers an element horizontally
- D) Removes an element from the document flow
59. Which value of the `position` property ensures the element always stays in the
same place relative to the viewport?
- A) `relative`
- B) `absolute`
- C) `static`
- D) `fixed`
60. What does the `clear` property do in CSS?
- A) Clears the background of an element
- B) Prevents elements from appearing beside floated elements
- C) Removes the float from an element
- D) Sets the transparency of an element
---
### Chapter 16: CSS Layouts with Flexbox and Grid
61. Which property is used to make a container a flexbox container?
- A) `display: flex;`
- B) `display: grid;`
- C) `flex-direction: row;`
- D) `flex: container;`
62. What is the difference between `align-items` and `justify-content` in flexbox?
- A) `align-items` is for the main axis, while `justify-content` is for the cross axis.
- B) `justify-content` aligns items along the main axis, while `align-items` aligns
items along the cross axis.
- C) They are the same property with different names.
- D) `align-items` adjusts item size, while `justify-content` positions them.
63. Which property defines the space between rows in a CSS grid layout?
- A) `grid-gap`
- B) `row-gap`
- C) `gap`
- D) `grid-row-spacing`
64. Which property allows an item in a grid to span multiple columns?
- A) `grid-column`
- B) `column-span`
- C) `span`
- D) `grid-column-start`
---
### Chapter 17: Responsive Web Design
65. What does this meta tag do?
`<meta name="viewport" content="width=device-width, initial-scale=1">`
- A) It enables responsive design by setting the viewport width to the device
width.
- B) It ensures the site only works on desktop browsers.
- C) It centers the page on mobile screens.
- D) It defines the layout grid for the webpage.
66. Which CSS unit is commonly used in media queries to define breakpoints?
- A) `px`
- B) `em`
- C) `rem`
- D) `%`
67. How can you make an image responsive?
- A) Use the `max-width: 100%;` property.
- B) Use the `width: auto;` property.
- C) Use the `height: fit-content;` property.
- D) Use the `responsive: true;` property.
---
### Answer Key
B
B
B
C
B
C
A
C
B
B
B
B
B
A
A
B
C
C
A
C
B
B
A
B
A
B
D
A
A
B
A
D
C
D
B
A
C
B
A
D
A
B
A
A
B
A
A
B
A
A
B
C
C
B
B
A
D
B
D
B
A
B
B
A
A
B
A
