Question 1

Components of responsive web design include:&#10;A) fluid layout, flexible images, media queries&#10;B) valid syntax, embedded CSS, media queries&#10;C) fluid layout, valid syntax, embedded CSS&#10;D) flexible images, media queries, valid syntax

Accepted Answer

Fluid layout allows the website to adapt to different screen sizes, flexible images prevent distortion when scaling, and media queries allow for conditional rules based on screen size and orientation. Valid syntax and embedded CSS are important, but not specifically related to responsive design.

Question 2

The ______attribute indicates if a style sheet configures for screen display or the printed page.&#10;A) media&#10;B) display&#10;C) internal&#10;D) viewport

Accepted Answer

The media attribute specifies the media type of the style sheet. It can be used to indicate if a style sheet is intended for screen display, print, or other media types. This allows the browser to apply the appropriate styles for each type of media. The other options (B, C, D) are not correct as they do not relate to the media type of the style sheet.

Question 3

____ The W3C's concept of &#34;One Web&#34; relates to providing a single resource that is configured for optimal display on multiple types of devices.

Accepted Answer

The W3C's concept of "One Web" is to provide a single resource that can be accessed and interacted with in the same way from any device, regardless of screen size, input method or context of use. This is achieved through techniques such as responsive design, flexible layout, fluid grids, and adaptive images, which enable the content and functionality to adapt to different user needs and device capabilities without requiring separate versions or duplicating content. The goal is to ensure that all users have equal access to the Web and can benefit from its full potential, without being limited by their device or network limitations.

Question 4

____ A benefit of using the CSS Sprites technique is to decrease the number of HTTP request calls to the web server.

Accepted Answer

Using CSS Sprites results in combining multiple images into a single image, which reduces the number of HTTP request calls to the server, thus improving website performance.

Question 5

Include the keyword _____ in a media query to cause older, non-supporting browsers to ignore the media query.&#10;A) viewport&#10;B) meta&#10;C) skip&#10;D) only

Accepted Answer

The keyword "only" is used in a media query to prevent older browsers that do not support media queries from applying the given styles. This ensures that the styles within the media query are only applied by browsers that fully understand the media query syntax.

Question 6

__________________ will cause an object not to display.&#10;A) display: block;&#10;B) display: 0px;&#10;C) display: none;&#10;D) display: hide;

Accepted Answer

The "display: none" property will completely remove an element from the document flow, causing it to not appear on the webpage. A "display: block" or "display: 0px" will still render the element but may affect its positioning and size on the page. "display: hide" is not a valid CSS property.

Question 7

Select a recommendation for mobile web design from the choices listed below.&#10;A) Use a single column page layout&#10;B) Use large images&#10;C) Use pt units for font sizes&#10;D) None of the above are best practices for mobile web design.

Accepted Answer

Using a single column page layout helps avoid horizontal scrolling and ensures that the content fits within the mobile device screen. This enhances the user experience and makes it more convenient for them to navigate the website.

Answer: D
 Using large images can slow down the page loading speed and consume more data, which can lead to a poor user experience. Additionally, using pt units for font sizes can make the content difficult to read on different devices with different screen resolutions. Therefore, neither of these practices is recommended for mobile web design.

Question 8

Which pseudo-element can be used to generate content that precedes an element?&#10;A) :after&#10;B) :before&#10;C) :content&#10;D) :first-line

Accepted Answer

The pseudo-element :before can be used to generate content that precedes an element.

Question 9

How would you define a fragment identifier at the top of a page, called "top"? A) < div id="top" > B) < div bookmark="top" > C) < div id="#top" > D) < div href="top" >

Accepted Answer

A fragment identifier is used to navigate to a specific section or component within a web page. It is identified by the symbol # followed by the name of the identifier. In this case, the identifier is "top" and it should be placed inside a HTML element with the ID attribute set to "top". Therefore, choice A is the correct answer as it sets the ID attribute to "top". Choices B, C, and D are incorrect as they use incorrect syntax or do not specify the ID attribute correctly.

Question 10

How would you link to the named fragment #school on the page resume.html from the home page of the site? A) < a href="resume.html#school" >Educational Background< /a > B) < a name="resume.html#school" > Educational Background < /a > C) < a link="resume.htmlschool" > Educational Background < /a > D) < a link="resume.html#school" > Educational Background < /a >

Accepted Answer

To link to a named fragment within a webpage, the correct syntax is to add "#" followed by the name of the fragment to the end of the URL or file path in the href attribute of the anchor tag. So, in this case, the correct syntax would be Educational Background.

Question 11

Select a recommendation for mobile web design from the choices listed below.&#10;A) Use a two-column page layout&#10;B) Use images that display text&#10;C) Use percentage or em units for font sizes&#10;D) Configure all hyperlinks to open in new browser windows

Accepted Answer

The answer of Select a recommendation for mobile web design...

Question 12

What is the term used to describe image file that contains multiple small graphics?&#10;A) thumbnail image&#10;B) sprite&#10;C) image link&#10;D) viewport

Accepted Answer

The answer of What is the term used to describe...

Question 13

When do you need to use a fully qualified URL in a hyperlink?&#10;A) when creating an internal link to the same web page&#10;B) when linking to a page in another folder on the same site&#10;C) when linking to a page on an external web site&#10;D) never

Accepted Answer

The answer of When do you need to use a...

Question 14

Which CSS property configures a flex container?&#10;A) flex&#10;B) display&#10;C) flex-item&#10;D) justify-content

Accepted Answer

The answer of Which CSS property configures a flex container?&#10;A)...

Question 15

The __________ attribute of the anchor tag can cause the new web page to open in its own browser window.&#10;A) target&#10;B) window&#10;C) id&#10;D) href

Accepted Answer

The answer of The __________ attribute of the anchor tag...

Question 16

The ________ meta tag configures scale and dimension on mobile web page display.&#10;A) viewport&#10;B) description&#10;C) sprite&#10;D) media query

Accepted Answer

The answer of The ________ meta tag configures scale and...

Question 17

A ______ determines the capability of the mobile device, such as screen resolution, and directs browsers to CSS.&#10;A) sprite&#10;B) viewport&#10;C) media query&#10;D) fragment identifier

Accepted Answer

The answer of A ______ determines the capability of the...

Question 18

What is the purpose of the content property?&#10;A) to generate content that is added to the web page document&#10;B) to configure the text size of the entire web page document&#10;C) to display a pop-up window&#10;D) to configure mobile display only

Accepted Answer

The answer of What is the purpose of the content...

Question 19

Which CSS property configures multiple lines in a flex container?&#10;A) justify-content&#10;B) flex-direction&#10;C) flex-wrap&#10;D) flex

Accepted Answer

The answer of Which CSS property configures multiple lines in...

Question 20

Use the _______ property in the HTML link tag to to associate a web page with a style sheet for printing.
A) media="print"

A) out="printer"
B) media="paper"
C) media="screen"

Accepted Answer

The answer of Use the _______ property in the HTML...

Question 21

____ Mobile web pages should contain exactly the same content as web pages intended for display on desktop browsers.

Accepted Answer

The answer of ____ Mobile web pages should contain exactly...

Question 22

____ A hyperlink with the phone: scheme may cause a web browser on a mobile device to initiate a phone call.

Accepted Answer

The answer of ____ A hyperlink with the phone: scheme...

Question 23

_____ It is possible to use CSS to configure page breaks in a printed web page.

Accepted Answer

The answer of _____ It is possible to use CSS...

Deck 7: Responsive Page Layout