Question 1

Which layout is used by the mobile-first approach to prevent horizontal scrolling and minimize vertical scrolling?
A) single-column layout
B) two-column layout
C) single-row layout
D) two-row layout

Accepted Answer

The mobile-first approach prioritizes designing for mobile devices first and then scaling up to larger screens. To prevent horizontal scrolling and minimize vertical scrolling, the single-column layout is typically used. This layout allows for the content to be displayed vertically in a single column, making it easy for users to scroll down the page without having to navigate horizontally.

Question 2

A _____ is attached to a selector with a colon to specify a state or relation to the selector to give the web developer more control over that selector.
A) pseudo-class
B) gradient
C) breakpoint
D) media query

Accepted Answer

A pseudo-class is used to specify a certain state of an element, such as when it is being hovered over or when it is the target of a link. It is attached to a selector with a colon, giving web developers additional control over that selector.

Question 3

If a particular tablet device has a viewport smaller than the minimum size specified in the media query, the layout will default to the _____ viewport layout.
A) mobile
B) original
C) desktop
D) largest

Accepted Answer

If the viewport of a tablet device is smaller than the minimum size specified in the media query, the layout will default to the mobile viewport layout. This is because the mobile layout is designed to be more flexible and adaptable to smaller screens, making it the best choice in this scenario.

Question 4

A(n) _____ gradient can transition from several different angles.
A) linear
B) axial
C) radial
D) binary

Accepted Answer

A linear gradient can transition from several different angles, as it is defined by a straight line and can be oriented in any direction.

Question 5

When you write a media query that specifies @media only screen,  the  _____ indicates that older browsers should ignore the media query's style rules.
A) @
B) media
C) only
D) screen

Accepted Answer

The keyword "only" is used to indicate that older browsers that do not support media queries should ignore the media query's style rules. This ensures that the style rules are only applied to devices that support media queries.

Question 6

The _____ attribute is used to determine which stylesheet should be applied.
A) class
B) coords
C) media
D) shape

Accepted Answer

The "media" attribute is used to specify which media types a stylesheet is applicable to (e.g. screen, print, handheld devices). Classes, coords, and shape are used for defining image maps.

Question 7

Identify the pseudo-class used to style a link when the mouse is moving over it.
A) :link
B) :active
C) :hover
D) :visited

Accepted Answer

The :hover pseudo-class is used to style a link when the mouse is moving over it. It is commonly used to change the color or underline of a link to indicate that it is clickable. The other options are not relevant for styling links when the mouse is moving over them.

Question 8

The selector _____ identifies the color to apply to a navigation link that has been clicked.
A) nav a:link
B) nav a:active
C) nav a:hover
D) nav a:visited

Accepted Answer

The selector "nav a:visited" is used to apply styles to a navigation link that has already been clicked and visited.

Question 9

To understand the code and syntax of how a media query detects viewport size, you set a  _____  (sometimes called threshold), the point at which you want the webpage to change. 
A) media point
B) checkpoint
C) breakpoint
D) tracepoint

Accepted Answer

The term commonly used for the point at which a media query detects viewport size is "breakpoint". It signifies the point where the layout of the webpage needs to change according to the size of the viewport. Therefore, option C is the correct choice.

Question 10

Which character is placed between a selector and the pseudo-class?
A) ;
B) -
C) :
D) /

Accepted Answer

The colon (:), is used to separate the selector from the pseudo-class.

Question 11

The _____ is where you apply different styles to the webpage to cause it to change in a way that makes it easier to read and navigate for a particular viewport, such as a user viewing the webpage on a smart phone.
A) kernel
B) anchor
C) breakpoint
D) orientation

Accepted Answer

A breakpoint is a point in the code where the webpage layout changes, commonly used for creating responsive designs that adapt to different screen sizes. By applying different styles at different breakpoints, the webpage can be optimized for different viewports, such as a smart phone or tablet. The other options listed (kernel, anchor, and orientation) are not related to changing styles for different viewports.

Question 12

Which is the correct order for using pseudo-classes?
A) link, visited, hover, active
B) active, hover, visited, link
C) link, visited, active, hover
D) active, link, visited, hover

Accepted Answer

The correct order for pseudo-classes in CSS is link, visited, hover, active (LVHA). This order ensures that styles are applied correctly as a user interacts with links.

Question 13

The selector _____ identifies the color to apply to a navigation link that has not yet been visited or clicked.
A) nav a:link
B) nav a:active
C) nav a:hover
D) nav a:visited

Accepted Answer

The selector "nav a:link" targets all navigation links that have not been visited or clicked. It is commonly used to apply a specific color or style to these links to distinguish them from visited links. "nav a:active" targets the link that is currently being clicked or activated, while "nav a:hover" targets the link when the user's cursor is hovering over it. "nav a:visited" targets links that have been previously clicked or visited.

Question 14

The selector _____ identifies the color to apply to a navigation link while the pointer is moving over the link.
A) nav a:link
B) nav a:active
C) nav a:hover
D) nav a:visited

Accepted Answer

The selector "nav a:hover" is specifically designed to apply styling when the mouse pointer is hovering over a navigation link. "nav a:link" applies styling to a navigation link that has not been visited, "nav a:visited" applies styling to a navigation link that has been visited, and "nav a:active" applies styling to a navigation link that is currently being clicked on. Therefore, "nav a:hover" is the best choice for this scenario.

Question 15

The selector _____ identifies the color to apply to a navigation link when the link is being clicked or when it gains focus.
A) nav a:link
B) nav a:active
C) nav a:hover
D) nav a:visited

Accepted Answer

The :active selector is used to select and apply styles to the active link, which means the link is currently being clicked or pressed down, or it is the link that has keyboard focus. Therefore, option B - nav a:active - is the best choice for identifying the color to apply to a navigation link when clicked or on focus.

Question 16

Which is true of tablet viewports?
A) Tablet devices vary by operating system, manufacturer, and screen size.
B) It is easy to design a "one size fits all" layout for a tablet device.
C) One layout to target tablet viewports cannot be created.
D) When responsive web design and media queries are used, multiple tablet layouts must be designed to accommodate the growing tablet market.

Accepted Answer

Tablet devices come in various sizes, operating systems, and manufacturers, so there is no single layout that can fit all tablet devices. Designers and developers must create multiple layouts to target the different tablet viewports using responsive web design and media queries.

Question 17

Identify the pseudo-class used to style an unvisited link.
A) :link
B) :active
C) : hover
D) :visited

Accepted Answer

The :link pseudo-class is used to style an unvisited link.

Question 18

Which is true of page design for a tablet viewport?
A) The larger screen provides an opportunity for websites to display more content and use a single-column layout.
B) The appearance of the website should look different from viewport to viewport.
C) The layout and placement of content on a website should be the same in all viewports.
D) A tablet viewport is larger than a mobile viewport but smaller than a desktop viewport.

Accepted Answer

A tablet viewport is indeed larger than a mobile viewport but smaller than a desktop viewport, which affects how content is displayed and designed for optimal viewing.

Question 19

One of the Cascading Style Sheet (CSS) properties is a _____, which is a gradual transition from one color to another.
A) breakpoint
B) gradient
C) media query
D) viewport

Accepted Answer

The property described is a gradient, which is a CSS property that allows for a gradual transition from one color to another. The other options (breakpoint, media query, and viewport) are all valid CSS terms but do not relate to the specific property described in the question.

Question 20

Which pseudo-class is used to style a link that is being clicked at the moment?
A) :link
B) :active
C) :hover
D) :visited

Accepted Answer

The :active pseudo-class is used to style a link that is being clicked at the moment. It is often used to provide visual feedback to the user when they click a link.

Quiz 6: Responsive Design Part 2 Designing for Tablet and Desktop Devices

Which layout is used by the mobile-first approach to prevent horizontal scrolling and minimize vertical scrolling?

A _____ is attached to a selector with a colon to specify a state or relation to the selector to give the web developer more control over that selector.

If a particular tablet device has a viewport smaller than the minimum size specified in the media query, the layout will default to the _____ viewport layout.

A(n) _____ gradient can transition from several different angles.

When you write a media query that specifies @media only screen, the _____ indicates that older browsers should ignore the media query's style rules.

The _____ attribute is used to determine which stylesheet should be applied.

Identify the pseudo-class used to style a link when the mouse is moving over it.

The selector _____ identifies the color to apply to a navigation link that has been clicked.

To understand the code and syntax of how a media query detects viewport size, you set a _____ (sometimes called threshold) , the point at which you want the webpage to change.

Which character is placed between a selector and the pseudo-class?

The _____ is where you apply different styles to the webpage to cause it to change in a way that makes it easier to read and navigate for a particular viewport, such as a user viewing the webpage on a smart phone.

Which is the correct order for using pseudo-classes?

The selector _____ identifies the color to apply to a navigation link that has not yet been visited or clicked.

The selector _____ identifies the color to apply to a navigation link while the pointer is moving over the link.

The selector _____ identifies the color to apply to a navigation link when the link is being clicked or when it gains focus.

Which is true of tablet viewports?

Identify the pseudo-class used to style an unvisited link.

Which is true of page design for a tablet viewport?

One of the Cascading Style Sheet (CSS) properties is a _____, which is a gradual transition from one color to another.

Which pseudo-class is used to style a link that is being clicked at the moment?