Name:
Class:
Date:
True / False
1. A browser on any device is capable of rendering any page written in HTML and CSS.
a.
True
b.
False
True
1
234
2. To create a web page using responsive design, you start by creating a layout that’s optimized for both the smallest and
the largest screen size you want to support.
a.
True
b.
False
False
1
234
3. Responsive design relies mainly on the min-height and max–height media features.
a.
True
b.
False
False
1
4. Before making a website publicly available, it’s important to test it on as many devices that your audience may be using
as possible.
a.
True
b.
False
True
1
238
5. On small screens, it generally makes the most sense to display some content in a sidebar.
a.
True
b.
False
False
1
240
6. On smaller screens, it’s standard to replace the nav bar with a button showing 3 horizontal lines.
a.
True
b.
False
True
1
7. You should never limit the amount of content shown by default on a smaller screen.
a.
True
b.
False
False
1
246
8. One method of implementing adaptive content is to change the display of elements in media queries using class names.
a.
True
b.
False
True
1
246
9. It’s considered acceptable to incorporate a newer CSS feature not supported by older browsers as long as it doesn’t
affect the meaning or functionality of page content.
a.
True
b.
False
True
1
10. Specifying a background color as a fallback for a background image is an example of a shim.
a.
True
b.
False
False
1
248
Modified True / False
11. Responsive design allows a web developer to specify different HTML code for some or all of a page’s
elements._________________________
False – CSS
1
234
12. Element widths in responsive designs are often specified in pixels._________________________
False – percentages, percent
234
13. In general, you use the min–width media feature for all media queries when your starting layout is optimized for a
244
Name:
Class:
Date:
small screen. _________________________
14. When a comma is used in a media query, the conditions before and after the comma must be
true._________________________
15. Instead of testing on actual mobile devices, you can use an application known as a(n)
emulator._________________________
16. In many layouts, you want to specify a breakpoint at which the content height stops
increasing._________________________
17. One of the most commonly hidden web page elements for smaller screens is the nav
bar._________________________
18. Limiting the amount of content shown by default and making related information available if a user requests it is
sometimes called responsive content. _________________________
19. A media query recreates a feature for older browsers using JavaScript code. _________________________
20. An example of progressive enhancement is when you specify a fallback color for a background image.
_________________________
Name:
Class:
Date:
Multiple Choice
21. Responsive design allows you to specify different CSS style rules depending on
a.
the height of the screen.
b.
the width of the screen.
c.
whether a device has a mouse.
d.
whether a device has a touchscreen.
b
1
234
22. Element widths in responsive designs are often specified in percentages, with the size of each element relative to
a.
the width of the browser window.
b.
the height of the browser window.
c.
the width of its parent.
d.
the height of its parent.
1
234
23. If you placed two images side by side and assigned each a width of 45%, how much room would be left for the
margin, padding, and border?
a.
5%
b.
10%
c.
45%
d.
100%
b
1
234
24. To create a web page using responsive design, you start by creating a layout that’s optimized for
a.
the smallest screen size you want to support.
b.
the largest screen size you want to support.
c.
Both A and B
d.
Either A or B
d
1
234
25. When creating a responsive design, you create a(n) __________ at a width where the layout no longer looks good, or
where you’d like to move elements or add or remove content.
a.
breakpoint
b.
emulator
c.
hamburger menu
d.
shim
1
234
26. You use the @media keyword to create a media query for responsive design using which media type?
a.
min–width
b.
max–width
c.
print
d.
screen
d
1
Name:
Class:
Date:
27. In a media query for responsive design, you follow the media type with one or more media __________, which
specify conditions that the media must satisfy for the rules in the media query to be applied..
a.
details
b.
features
c.
modes
d.
values
1
28. When a media query uses the comma ( , ) logical operator,
a.
the conditions before and after the comma must be
true.
b.
the condition before or after the comma must be
true.
c.
the condition following the comma must be false.
d.
the condition following the comma must be true.
b
235
29. When your default layout is optimized for small screens, then the media query for your first breakpoint would use the
__________ media feature.
a.
min–width
b.
max–width
c.
min–height
d.
max–height
1
30. Referring to the figure above, the code shown in the figure represents
a.
print styles.
b.
a media query.
c.
a shim.
d.
a schema.
b
234
31. Referring to the figure above, the word screen represents a
a.
media type.
b.
media feature.
c.
media query.
d.
logical operator.
234
32. Referring to the figure above, the word and represents a
a.
media type.
b.
media feature.
c.
media query.
d.
logical operator.
1
33. Referring to the figure above, the word min-width represents a
a.
media type.
b.
media feature.
c.
media query.
d.
logical operator.
1
34. Referring to the figure above, which of the following describes when the code applies?
a.
on a device with a screen and with a minimum
width of 880px
b.
on a device with a screen or with a minimum width
of 880px
c.
on a device with a screen and with a maximum
width of 880px
d.
on a device with a screen or with a maximum
width of 880px
1
35. Which of the following applies to a device with a screen or to a device with a minimum width of 500px?
a.
screen and (min–width: 500px)
b.
screen, (min–width: 500px)
c.
screen and (max–width: 500px)
d.
screen, (max–width: 500px)
b
235
36. Before making a website publicly available, it’s important to test on
a.
as many devices that your audience may be using as
possible.
b.
every device that may access your
website.
c.
your computer.
d.
your computer and a smartphone.
1
37. While developing a website, you can test how its layout might appear on a range of devices using
a.
a shim
b.
an emulator
c.
a device-pixel ratio
d.
a hamburger menu
b
38. On small screens, it generally makes the most sense to display content
a.
in a single column
b.
in two columns
c.
at a fixed width
d.
in a sidebar
1
240
39. Which property might you use with a media query to create columns?
a.
float
b.
font–weight
c.
line–height
d.
box–shadow
1
240
40. Which of the following is a commonly hidden web page element?
a.
nav bar
b.
main heading
c.
footer
d.
all of the above
1
244
41. What does a hamburger menu replace?
a.
nav bar
b.
logo
c.
sidebar
d.
footer
1
244
42. Limiting the amount of web page content shown by default and making related information available only if a user
requests is describes which concept?
a.
implementing adaptive content
b.
testing with an emulator
c.
using a shim
d.
creating a breakpoint
1
246
43. Which pseudo-class selects the first child element if it is of the specified type?
a.
:first–child
b.
:first–of–type
c.
:nth–child
d.
:nth–of–type
1
246
238
Name:
Class:
Date:
44. Which pseudo-class selects the first child element of the specified type?
a.
:first–child
b.
:first–of–type
c.
:nth–child
d.
:nth–of–type
246
45. What is selected by the selector section p:first–of–type?
a.
the first p element within each
section element
b.
the first p child element within each section element if that
p element is also the first child
c.
the last p element within
each section element
d.
the last p child element within each sectionelement if
that p element is also the last child
46. Which of the following is true about IE8?
a.
It supports all current CSS
properties.
b.
It doesn’t support features developed after the browser was
released.
c.
It is no longer used by anyone.
d.
It is not supported by responsive design techniques.
47. Which of the following recreates a CSS feature for older browsers using JavaScript code?
a.
a shim
b.
progressive enhancement
c.
an emulator
d.
adaptive content
248
48. Which is an example of progressive enhancement?
a.
specifying a background color as a fallback for a background image
b.
incorporating a shim
c.
creating a layout for small screens
d.
creating a media query
1
Name:
Class:
Date:
49. Referring to the figure above, the code that creates rounded corners starts with __________.
a.
padding:
b.
border:
c.
display:
d.
border–radius:
Name:
Class:
Date:
Name:
Class:
Date:
50. Referring to the figure above, which of the following aspects of responsive design does the figure show?
a.
testing with an emulator
b.
implementing a shim
c.
progressive enhancement
d.
responsive navigation
51. Referring to the figure above, what part of a responsive layout would this code accomplish?
a.
create a small screen layout
b.
add a sidebar
c.
implement adaptive content
d.
create a widescreen layout
Name:
Class:
Date:
Name:
Class:
Date:
52. Referring to the figure above, which of the following aspects of responsive design does the figure illustrate?
a.
adaptive content
b.
testing with an emulator
c.
implementing a shim
d.
responsive navigation
Name:
Class:
Date:
53. Referring to the figure above, which aspect of responsive design does the figure illustrate?
a.
responsive navigation
b.
a widescreen layout
c.
a shim
d.
an emulator
1
Case-Based Critical Thinking Question
Jenna manages the website for a local band. She is exploring responsive design to determine which aspects she might
implement on the band’s website.
54. Jenna decides to change element sizes on the website to use
a.
percentages
b.
ems
c.
pixels
d.
points
1
Critical Thinking
55. Jenna learns that while developing her website, she can most easily get a sense of how the layout will perform on a
variety of devices by
a.
acquiring and testing on all the devices that her target audience will be using
Name:
Class:
Date:
b.
testing just on devices she owns
c.
testing with an emulator
d.
testing only on mobile devices
1
238
Critical Thinking
Case-Based Critical Thinking Question
Tracy is using responsive design to build a website featuring images and descriptions of national parks.
56. Tracy implements responsive navigation by adding a(n) __________ to the layout to represent the nav bar.
a.
button
b.
table
c.
list
d.
heading
1
244
Critical Thinking
57. Tracy shortens the descriptions of the parks when the site is displayed on smaller screens; this is an implementation of
__________.
a.
adaptive content
b.
a widescreen layout
c.
emulation
d.
responsive navigation
1
246
Critical Thinking
58. Tracy wants to change the display of the first child of another element; to do so, he uses __________.
a.
a pseudo-element
b.
HTML
c.
a structural pseudo-class
d.
a media feature
1
246
Critical Thinking
59. Which of the following involves using newer CSS features in a way that doesn’t affect the meaning or functionality of
the page content?
a.
a shim
b.
progressive enhancement
c.
an emulator
d.
adaptive content
b
1
248
Name:
Class:
Date:
60. When you use progressive enhancement, newer CSS features enhance the basic content
a.
for users of older browsers only
b.
for users of modern browsers only
c.
for users of all browsers
d.
for users of mobile browsers only
61. __________ allows a web developer to specify different CSS style rules for some or all of a page’s elements
depending on the width of the screen or browser window.
62. At a certain width—known as a(n) __________—a layout no longer looks good, or you may decide that you’d like to
move elements or add or remove content to accommodate that window size.
break point
63. A media __________ specifies conditions that specific media must satisfy for the rules in a media query to be applied.
64. A(n) __________ runs on a computer and approximates the dimensions and behavior of a wide range of devices.
65. In responsive design, a button showing 3 horizontal lines is often referred to as a(n) __________ menu.
66. The practice of limiting the amount of content shown by default and making related information available only if a
user requests is is known as __________ content.
67. A(n) __________ recreates a recently added CSS property for older browsers using JavaScript code.
Name:
Class:
Date:
Matching
Match each logical operator and media feature with its description.
a.
conditions before and after must be true
b.
condition before or condition after must be true
c.
condition after must be false
d.
minimum width to which media query applies
e.
maximum width to which media query applies
REFERENCES:
235
68. not
ANSWER:
1
69. and
ANSWER:
1
70. min–width
d
POINTS:
1
71. ,
b
POINTS:
1
72. max–width
POINTS:
1
Essay
73. Why does responsive design often use percentages to size elements?
of the width of the browser window.
1
REFERENCES:
234
Critical Thinking
74. What is the relationship between media queries and media features?
POINTS:
1
248
Name:
Class:
Date:
75. In what circumstances might you add a column with a media query, and what property or properties might you use?