Quiz 5,6,7,8,9
linear
A _____ gradient can transition from several different angles.
gradient
One of the Cascading Style Sheet (CSS) properties is a _____, which is a gradual transition from one color to another.
icon
Consider this statement used to add a favicon: <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32.png"> The rel attribute is the relationship and its value is _____.
:active
Samantha is an entrepreneur and her company website has the following links: Home, About Us, Careers, and Contact Us. She wishes to vary their appearance whenever they are visited or clicked. To gain focus, Samantha would like to modify the color of active links. Which dynamic pseudo-class should she use?
vertical offset
The 10px in "text-shadow: 5px 10px 8px #ccc;" indicates the _____.
column-count
The _____ CSS property can be used to create multiple columns.
<section> ... </section>
The _____ HTML 5 semantic element contains a specific grouping of content on a webpage.
<summary> ... </summary>
The _____ HTML 5 semantic element contains a visible heading for the details element on a webpage.
section
The _____ element defines different parts of a webpage document, such as an introduction, new products, or service information.
breakpoint
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.
box-sizing
The _____ property allows any specified padding or border to be included within the element's total size.
meta
The _____ viewport element provides the browser with information about the page's dimensions and how to adjust scaling on the webpage.
linear
The default transition of a _____ gradient is from the top to the bottom.
1
The default value of the opacity property is _____.
zooming
The explosive growth of mobile browsers, including those on phones and tablets, quickly created serious problems for webpage developers because smaller viewports often required excessive _____.
min-width
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.
purpose
The name of an HTML semantic element tag reflects the _____ of the webpage content.
nav a:visited
The selector _____ identifies the color to apply to a navigation link that has been clicked.
nav a:link
The selector _____ identifies the color to apply to a navigation link that has not yet been visited or clicked.
nav a:active
The selector _____ identifies the color to apply to a navigation link when the link is being clicked or when it gains focus.
nav a:hover
The selector _____ identifies the color to apply to a navigation link while the pointer is moving over the link.
Internet of Things (IoT)
The term _____ refers to the ever-expanding number of devices that connect to the Internet to share information.
h-shadow
The text-shadow property requires the _____ value, which designates the horizontal position of the shadow.
semantic
The<article> ... </article>tags are referred to as HTML 5 _____ elements.
media
The_____ attribute is used to determine which stylesheet should be applied.
figure caption
Thefigureelement may contain an optional _____ element, which is used to provide a caption for the figure element.
fluid
To create a _____ grid, you design a webpage that uses a grid or columns
two
To create a radial gradient, what is the least amount of colors that must be specified?
*
To quickly and easily apply a style rule to all elements, you use the _____ to select all elements.
breakpoint
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.
favicon
Today, most websites use a _____, a small image that appears on the browser tab that represents the business.
auto
Using the _____ value allows the column to grow and shrink, depending on the size of the viewport.
only
When you write a media query that specifies @media only screen, the _____indicates that older browsers should ignore the media query's style rules.
:
Which character is placed between a selector and the pseudo-class?
<figcaption> ... </figcaption>
Which code specifies the starting and ending tags for a figure caption element?
max-height
Which describes the height of a viewport in pixels?
max-width
Which describes the width of a screen in pixels?
radial
Which gradient has color beginning in the center and transitions to another color or colors?
radial
Which gradients are specified by their center?
link, visited, hover, active
Which is the correct order for using pseudo-classes?
1280px
Which is the minimum viewport width for large desktop monitors?
A tablet viewport is larger than a mobile viewport but smaller than a desktop viewport.
Which is true of page design for a tablet viewport?
Tablet devices vary by operating system, manufacturer, and screen size.
Which is true of tablet viewports?
single-column layout
Which layout is used by the mobile-first approach to prevent horizontal scrolling and minimize vertical scrolling?
:active
Which pseudo-class is used to style a link that is being clicked at the moment?
validation
Which tool is effective at troubleshooting during the development process and adds a valuable level of professionalism to one's work?
ems
You implement fluid layouts by measuring the widths of the wireframe elements and content in relative units such as percentages and _____.
Media queries
_____ allow a webpage developer to detect the approximate pixel size of the current viewport.
Fixed
_____ can involve a tremendous amount of horizontal scrolling and require much zooming on small viewports.
Responsive
_____ is a website development strategy that strives to provide an optimal user experience of a website regardless of the device or browser used.
Validation
_____ is an effective troubleshooting tool during the development process and adds a valuable level of professionalism to one's work.
Web analytics
_____ is the study of how users interact with a website.
Fixed
_____ possess the same width even if the size of the viewport changes.
Web analytics
_____ provide statistics on how many people visit a website as well as what browsers and devices were used and what choices the user made while at a website.
Responsive
_____ seeks to optimize the viewing experience for a wide range of devices using one website.
Flexible images
_____ shrink and grow based on the size of a viewport.
Flexible
_____ use Cascading Style Sheet (CSS) rules to resize an image relative to the wireframe and viewport.
fluid layouts
esponsive designs are based on _____.
aside
A_____ element, as described by the World Wide Web Consortium (W3C), is an element that "represents a section of a page that consists of content that is tangentially related to the content around that element, and which could be considered separate from that content."
figure
According to the World Wide Web Consortium (W3C), the _____ element "represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document."
background: linear-gradient(blue, white);
Kevin, a manager at FitPlus fitness club, owns a website that updates information regarding his fitness club. He created background gradients by tiling gradient images across a page or element. Now, he wishes to modify these and add gradients supported by Cascading Style Sheet (CSS). 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?
device
Kevin, a manager at FitPlus fitness club, owns a website that updates information regarding his fitness club. He created background gradients by tiling gradient images across a page or element. Now, he wishes to modify these and add gradients supported by Cascading Style Sheet (CSS). 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?
hamburger
Many mobile viewport designs use a _____ button or icon to display or toggle a navigation system.
link
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.
@media
Media queries can be implemented by coding them directly into a single Cascading Style Sheet (CSS) file using the_____ rule.
m.
Mobile websites are often identified with a _____ prefix in the Uniform Resource Locator (URL).
viewport
On a traditional Windows desktop computer, the _____ is usually the window itself.
pixel
One _____ is equal to one dot on a display screen.
:hover
Samantha is an entrepreneur and her company website has the following links: Home, About Us, Careers, and Contact Us. She wishes to vary their appearance whenever they are visited or clicked. 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.
:link
Samantha is an entrepreneur and her company website has the following links: Home, About Us, Careers, and Contact Us. She wishes to vary their appearance whenever they are visited or clicked. Samantha wants the color of unvisited links to remain white. Which pseudo-class should she use?
:visited
Samantha is an entrepreneur and her company website has the following links: Home, About Us, Careers, and Contact Us. She wishes to vary their appearance whenever they are visited or clicked. Samantha wants the color of visited links to turn purple. Which pseudo-class should she use?
percentages
Developers use _____ to measure the widths of the wireframe elements and flexible images.
border-radius
The CSS property to round corners is ______.
section
A general rule is that a _____ element is appropriate only if the element's contents would be listed explicitly in the document's outline.
web content strategist
A _____ analyzes current content, performs in-depth research, and then drafts recommendations for content to attract new clients.
fluid layout
A _____ applies proportional size measurements to a webpage wireframe and content so that the content stretches, shrinks, and grows as the size of the viewport changes.
article
A _____ element is a composition that is independently distributable, such as a forum post, a magazine or newspaper report, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
aside
A _____ element is used as a sidebar and contains additional information about a particular item mentioned within another element.
pseudo-class
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.
mobile-first strategy
A _____ is considered by some to be a more productive and effective way to build a website from scratch because it forces a web developer to focus on the core, essential content first for the smallest viewport.
viewport
A _____ is the viewing area for a webpage, which is much smaller on a phone than on a traditional desktop.
viewport
A _____ refers to the portion of a webpage that a user sees at any one time, regardless of device, browser, screen size, screen resolution, window size, or orientation.
emulator
A device _____ is used to test a mobile application on a mobile device.
none
Displaying desktop content in a mobile viewport can be prevented by setting the value of thedisplayproperty to _____.
:active, :hover, :link
Dynamic pseudo-classes allow you to change the style of a link based on which link states?
scrolling
Hiding nonessential content in the mobile viewport minimizes _____.
http://m.phsc.edu/
Identify a mobile website from the given Uniform Resource Locators (URLs).
<time> ... </time>
Identify the appropriate format to indicate the start and end of a time area of a webpage.
<article> ... <aside>...</aside> ... </article>
Identify the correct format for inserting an aside element within an article element.
aside { font-style: italic; }
Identify the correct style rule to format theaside elements with an italic font style.
margin-left: 0;
Identify the correct style rule to specify a left margin.
768px
Identify the maximum viewport width for tablets and larger smartphones.
320px
Identify the minimum viewport width for small smartphones.
:hover
Identify the pseudo-class used to style a link when the mouse is moving over it.
:link
Identify the pseudo-class used to style an unvisited link.
h1 { text-shadow: 2px 2px #292933;
Identify the style rule for applying a text shadow with a horizontal offset of 2px, a vertical offset of 2px, and a dark gray color is applied to an h1 element.
<meta name="viewport" content="width=device-width,initial-scale=1">
Identify themetatag that must be added to theheadsection of each responsive webpage to ensure that the page initially loads in a layout width that matches the viewport of the device.
validating
If a document has any errors, _____ gives one a chance to identify and correct them.
validating
If a document has any errors, _____ gives you a chance to identify and correct them.
mobile
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.
