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

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

Answer 1

A

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

Answer 2

A

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

Answer 3

A

Question 4

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

A) linear
B) axial
C) radial
D) binary

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

Question 6

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

A) class
B) coords
C) media
D) shape

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

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

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

Question 10

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

A) ;
B) -
C) :
D) /

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

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

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

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

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

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.

Question 17

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

A) :link
B) :active
C) : hover
D) :visited

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.

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

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

Question 21

The default transition for radial gradients is from the top to the bottom.

Question 22

Media queries can apply styles to move, hide, or display content on a webpage, change text or colors, or add any other styles to make the page easier to read in a particular situation.

Question 23

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

Question 24

The pseudo-class :link is used to style a link that has been clicked.

Question 25

In linear gradients, the color begins in the center and transitions in a radial direction to another color or colors.

Question 26

To understand the code and syntax of how a media query detects viewport size, a breakpoint is set.

Question 27

A breakpoint is where different styles are applied to a webpage to cause it to change in a way that makes it easier to read and navigate for a particular situation.

Question 28

Media queries can be embedded in the _____ tag that connects an external style sheet to a Hypertext Markup Language (HTML) file, or they can be inserted in the external style sheet itself.

A) link
B) coords
C) datalist
D) embed

Question 29

The default transition of a(n) _____ gradient is from the top to the bottom. 

A) axial
B) core
C) linear
D) radial

Question 30

Media queries cannot determine the size of a viewport.

Question 31

The dynamic pseudo-classes are more often used in a desktop viewport because mobile and tablet devices are touch devices and do not have a hover option nor an option to click.

Question 32

Linear gradients can transition up, left, right, or diagonally.

Question 33

Identify the minimum viewport width for small smartphones.

A) 320px
B) 480px
C) 768px
D) 481px

Question 34

Which tool is effective at troubleshooting during the development process and adds a valuable level of professionalism to one's work?

A) abstraction
B) encapsulation
C) normalization
D) validation

Question 35

Radial gradients can transition from several different angles.

Question 36

Which gradient has color beginning in the center and transitions to another color or colors?

A) horizontal
B) linear
C) radial
D) diagonal

Question 37

Which gradients are specified by their center?

A) h orizontal
B) l inear
C) r adial
D) d iagonal

Question 38

To create a radial gradient, what is the least amount of colors that must be specified?

A) none
B) one
C) two
D) three

Question 39

A threshold is the point at which one wants a webpage to change.

Question 40

The color of links in a website changes due to the use of pseudo-classes in the website's style sheet.

Question 41

With so many tablet sizes, it can seem difficult to design a "one size fits all" layout for a tablet device. 

Question 42

The default style rule for the navigation list items displays them as vertical links with a border between each link. 

Question 43

Since desktop screens are often wider than those for other devices, a design for a desktop viewport can only use single-column layout.

Question 44

When testing for minimum and maximum widths, the word "and" separates each part of the media attribute value.

Question 45

If a logical expression evaluates to "false," the media query applies the styles that follow.

Question 46

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

Question 47

When designing for a tablet viewport, layout and placement of content should remain the same from viewport to viewport.

Question 48

A webpage's files should be run through W3C's validator to check the documents for errors.

Question 49

In a mobile-first strategy, the mobile styles are listed first, because these are the default styles.

Question 50

To add style rules that target tablet or desktop viewports in particular, create a media query for each viewport.

Question 51

The only thing that should change while designing a tablet viewport is the appearance of the website.

Question 52

You can add as many colors as desired to the gradient.

Question 53

To determine the ideal layout for a website's tablet viewport, review the current website in Google Chrome's device mode at 481px to determine where content should be added and whether any content should be hidden.

Question 54

Media queries can be implemented by coding them directly into a single Cascading Style Sheet (CSS) file using the _____ rule.

A) @import
B) @query
C) @media
D) @display

Question 55

The tablet market took off in 2010; however, as the size of smartphones increased, the tablet market started to decline. 

Question 56

Identify the maximum viewport width for tablets and larger smartphones.

A) 320px
B) 481px
C) 768px
D) 1279px

Question 57

Which is the minimum viewport width for large desktop monitors?

A) 320px
B) 481px
C) 768px
D) 1280px

Question 58

When you use responsive web design and media queries, you do not need to design multiple tablet layouts to accommodate tablet devices. 

Question 59

A tablet viewport is larger than a mobile viewport but smaller than a desktop viewport.

Question 60

Styles created for smaller viewports apply to larger viewports by default.

Question 62

Which describes the width of a screen in pixels?

A) max-width
B) min-resolution
C) max-height
D) orientation

Question 63

Which describes the height of a viewport in pixels?

A) max-height
B) min - width
C) max-resolution
D) orientation

Question 64

Explain how pseudo-classes are used to style links.

Question 65

Kevin would like to apply a gradient that transitions from blue for the top portion of the page to white for the bottom portion of the page. Which function should he use?

A) background: linear-gradient(blue, white);
B) background: linear-gradient(bottom white, top blue);
C) background: linear-gradient(white, blue);
D) background: linear-gradient(to top blue, to bottom white);

Question 66

Define and discuss the types of gradients in Cascading Style Sheets (CSS).

Question 67

To verify the website appearance across multiple types of devices, Kevin would like to view the website from each viewport. Using Google Chrome, which mode may he use to accomplish this task?

A) modulate
B) validate
C) device
D) function

Question 68

The logical expressions to media queries in an external Cascading Style Sheet (CSS) file are as follows:@media screen and (min-width: 481px) {.mobile { display: none; }}In this case, _____ is the feature of the screen that is tested.

A) @media screen
B) .mobile
C) min-width
D) display

Question 69

Samantha wants the color of unvisited links to remain white. Which pseudo-class should she use?

A) :link
B) :hover
C) :active
D) :visited

Question 70

Samantha wants the color of visited links to turn purple. Which pseudo-class should she use?

A) :link
B) :hover
C) :active
D) :visited

Question 71

Samantha wants the color of the Home link to turn yellow when she moves the pointer over it. Identify the pseudo-class that should be used to perform this function.

A) :link
B) :hover
C) :active
D) :visited

Question 72

Discuss media query expressions with relevant examples.

Question 73

To gain focus, Samantha would like to modify the color of active links. Which dynamic pseudo-class should she use?

A) :link
B) :hover
C) :active
D) :visited