ITD-210 Web Page Design II Review

The aside element is used for

content that is tangentially related to content around it, such as information about the author of an article.

When creating a responsive design using media queries, it is best to start the stylesheet by creating the styling for a ______ device.

mobile

What does the following CSS do? A [target] { border-style: solid; }

puts a border around all hypertext links with a target attribute

What does the following CSS do? A [target"_blank"] { border-style: solid; }

puts a border around all hypertext links with a target attribute that has a value of _blank

What does the following CSS do? nav ul:last-child { border-right-style: solid; }

puts a border on the right side of the last list item inside a ul tag which is inside a nav tag

The main element is used around _______ on an HTML page.

The main content

Responsive web design is a combination of three different techniques. Which answer below is NOT one of those three techniques?

JavaScript queries

Assume main contains lots of text and the viewport width is 30em. What will this CSS do? main { column-width: 10em; }

Make the text display in three columns, each of which is 10em in width

Flexible layouts do not advocate the use of fixed measurement units, such as pixels or inches, because the viewport height and width continually change from device to device.

The viewport height and width continually change from device to device.

The latest version of BootStrap is

All of the above (is responsive by default with a mobile first approach, uses CSS flexbox, is available via a Content Delivery Network (CDN) or via a download.

WordPress is a CMS, which stands for

Content Management System

What are the top three web technologies used in front-end web development?

HTML, CSS, and JavaScript

Media queries can apply styles to a website based on the _______ of the device being used to view the website.

Orientation (landscape vs portrait)

Media queries can apply styles to a website based on the _______ of the device being used to view the website.

Resolution

In WordPress, a theme is

a collection of files that work together to produce a graphical interface with an underlying unifying design for the site.

The nav tag is typically wrapped around

a set of links to other pages within the website.

Bootstrap is

all of the above

How many times can you apply a class named hobby in an html page named index.html?

all of the above

In WordPress, posts are

all of the above

In WordPress, pages are

all of the above (are generally for non-chronological, hierarchical content, like "About" or "Contact", live outside of the blog chronology, and are often used to present static information about yourself or your site, can be organized into pages and subpages, cannot be assigned categories, are stored in a database)

The term "responsive web design" itself was coined, and larfely developed by

Ethan Marcotte

Who created the term "responsive web design" and largely developed the concepts behind it?

Ethan Marcotte

To change a fixed width layout to a flexible (fluid) layout, we can take all of the fixed units of length, such as pixels, and turn them into relative units, such as percentages, by using the following formula

# of pixels in width of a particular column or margin divided by # pixels in total width

An external style sheet uses the _______ file extension.

.css

What is the correct way to create a class named dog in an external style sheet?

.dog { }

How many times can you apply an id named copyrightinfo in an HTML page named index-html?

1

The current version of BootStrap is version

4.1

How do I apply a class named dog to a level one heading?

<h1 class="dog">Dogs</h1>

Choose the tag that links a CSS external style sheet to an html page.

<link> tag

When creating a responsive web design, the first thing you must do it add a meta tag to your html to set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling. The recommended meta tag is

<meta name="viewport" content="width=device-width, initial -scale=1">

How do I apply a class named favDog to the words Black Labrador?

<p>My favorite dog is a <span class="favDog">Black Labrador</span></p>

In order for this media query to evaluate to true (and change the background and font colors), how many of the three conditions must be true? @media screen, (min-width: 30em) and (orientation: landscape) { body { background-color: black; color: white; } }

? all three must be true?

How do we make all even numbered columns in a table have a blue background?

?all of the above?

The article tag is wrapped around:

A self-contained piece of content that could be published on its own, such as a newspaper article.

SVG is a language for describing two-dimensional graphics in XML, SVGs can:

All of the above (can be edited in a text editor, can be resized without loss of quality, can be animated, can be styled using CSS)

BootStrap.js and BootStrap.min.js are the same except

the minified version has whitespace removed, so it downloads more quickly

Responsive web design is

the practice of building a website to work on every device and every screen size, no matter how large or small, mobile or desktop.

WordPress is open source software, which means

the source code can be viewed, modified, and enhanced by anyone.

Media queries can apply style to a website based on the _____ used to view the website.

width of the viewport

Media queries can NOT be used to test for

available bandwidth

In order for this media query to evaluate to true (and change the background and font colors), how many of the three conditions must be true? @media screen and (min-width: 30em) and (orientation: landscape) { body { background-color: black; color: white; } }

all three must be true

To apply a style to one or more elements on a web page, configure a CSS

class

To create a flex container, we set the value of the container's display property to flex or inline-flex. As soon as we do this the ______ of that container become flex items.

direct children

When working with flexbox you need to think in terms of two axes - the main axis and the cross axis. The main axis is defined by the flex-direction property, so if the CSS states flex-direction: row; then the main axis is

horizontal

Responsive images are

images that scale nicely to fit any browser size

What CSS code will make an image responsive?

img { max-width: 100%; height: auto; }

What does this media query do? @media (min-width: 500px) { h2 { background-color: lightblue; } }

it changes the background color of level two headings when the viewport width is 500 pixels or wider.

What are the advantages of using an external style sheet?

it keeps the styling separate from the content and structure

What does the following CSS do? p::first-line { color: red; }

makes the first line of every paragraph red

When using the box model, the ________ is outside the border.

margin

The core of WordPress is designed to be lean and lightweight, to maximize flexibility and minimize code bloat. WordPress plugins

offer additional custom functions and features so that each user can tailor their site to their specific needs.

The ______ is the area between the content and the border.

padding

The box model consists of a content area surrounded by:

padding, border, and margin

In WordPress, the two main types of content are

pages and posts

Flexible layouts is the practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width. Flexible grids are built using relative length units most commonly

percentages or ems