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