Before you take your quiz, check your understanding of this lesson's content. Practice identifying responsive web design situations by answering the questions in the activity below.
Which of the following will produce a responsive image that won't pixelate?
- width: 100%;
- width: auto;
- min-width: 100%;
- max- width: 100%;
Setting the max-width property to 100% tells the image that it can have a smaller width, and it won't exceed its original dimensions.
Setting the max-width property to 100% tells the image that it can have a smaller width, and it won't exceed its original dimensions.
Setting the max-width property to 100% tells the image that it can have a smaller width, and it won't exceed its original dimensions.
Setting the max-width property to 100% tells the image that it can have a smaller width, and it won't exceed its original dimensions.
Which of these devices is most likely to benefit from white space?
- smartphone
- digital tablet
- widescreen monitor
- White space should always be minimized.
White space, or "negative space" can add interest and breathing room to a design, and sometimes widescreen monitors have plenty of room for that luxury.
White space, or "negative space" can add interest and breathing room to a design, and sometimes widescreen monitors have plenty of room for that luxury.
White space, or "negative space" can add interest and breathing room to a design, and sometimes widescreen monitors have plenty of room for that luxury.
White space, or "negative space" can add interest and breathing room to a design, and sometimes widescreen monitors have plenty of room for that luxury.
A website contains information about a 5k race coming up next month. A sidebar section is added to the widescreen version of the home page. Which of the following should not be included in this section?
- quotations from people who ran in the previous year's race
- the time and date for this year's event
- pictures from past races
- a listing of related events that may be of interest
Important information should be in sections that appear in every version of the site. The event's time and date are arguably the most important pieces of information, so they should be included in the main section of the page.
Important information should be in sections that appear in every version of the site. The event's time and date are arguably the most important pieces of information, so they should be included in the main section of the page.
Important information should be in sections that appear in every version of the site. The event's time and date are arguably the most important pieces of information, so they should be included in the main section of the page.
Important information should be in sections that appear in every version of the site. The event's time and date are arguably the most important pieces of information, so they should be included in the main section of the page.
When the display is a smartphone being held in portrait orientation, which of the following is most likely?
- The page's navigation links will be all be listed in the same row.
- Each navigation link will be listed on its own line.
- A column of navigation links will float next to the page's text content.
- All navigation links will be removed.
A phone being held in portrait mode has very little horizontal space, so it's most likely that each link will get its own line, possibly accompanied by an icon or a short blurb about the section it links to.
A phone being held in portrait mode has very little horizontal space, so it's most likely that each link will get its own line, possibly accompanied by an icon or a short blurb about the section it links to.
A phone being held in portrait mode has very little horizontal space, so it's most likely that each link will get its own line, possibly accompanied by an icon or a short blurb about the section it links to.
A phone being held in portrait mode has very little horizontal space, so it's most likely that each link will get its own line, possibly accompanied by an icon or a short blurb about the section it links to.
Which of these is most likely to be implemented in a print version specifically to save ink?
- background-color: transparent;
- float: left;
- font-size: 12px;
- margin: 20px;
Removing background colors is one of the easiest steps to using a fraction of the ink in a printed version of a web page.
Removing background colors is one of the easiest steps to using a fraction of the ink in a printed version of a web page.
Removing background colors is one of the easiest steps to using a fraction of the ink in a printed version of a web page.
Removing background colors is one of the easiest steps to using a fraction of the ink in a printed version of a web page.
Summary
Questions answered correctly:
Questions answered incorrectly:
