Computer Science

What symbol do you use to signify the inclusion of an empty, unnamed grid area inside a grid-template-area template

.

Which of the below options does the same thing as the following code? grid-container { grid-template-rows: 100px x3

. repeat (3, 100px);

Which of the following CSS style rules positions a section element in row tracks 2 through 4 and column tracks 2 and 3 of a grid container?

.container { grid-row: 2 / 5; grid-column: 2 / 4;

Which of the following code snippers will center a flex item in the center of its container?

.container {align-items: center; justify-content: center}

As a general rule, how much of your website should utilize your accent color?

10%

How many levels of heading text does HTML include by default?

6

The main reason for using the SlickNav plugin is to create a navigation menu that:

Adapts to use on a mobile device

Which of the following reasons might you include forms in a web site or app?

All of the above (capture users' account info, increase user activity, allow users to make choices)

Which of the following animates a background over 2 seconds back and forth continually without any change in its speed?

Animation: white-to-black 2000ms linear infinite;

In Web design, why do we generally avoid putting text in a warm color onto a background that is a cold color, or vice versa?

B/c it is hard to look at and thus inhibits readability

What color is rgb(0,0,0);?

Black

Your media queries go in the:

CSS

You want the user to be able to select "all that apply" from a list of choices. What input type should you use?

Checkbox

In the context of HTML, writing "semantic" markup refers to:

Choosing the HTML tags that most meaningfully describe the contents of those tags

Which CSS property do you use to display a block element as a flex container?

Display

When you set the position property for a block element to fixed, the element:

Doesn't move in the browser window, even when you scroll

What is the term we use to describe any item on a web page that can be distinguished via HTML tags?

Element

A good way of creating a scalable, responsive image that is accessible and stable even when viewed on older browsers is to:

Enclose the image in a containing element; set width of the containing element to any percentage and the width of the image to 100%

T/F: Adding a background image in the CSS instead of the HTML is better for accessibility

FALSE

T/F: All animations are available for all browsers

FALSE

T/F: It's not necessary to worry about accessibility when including media on a web page, since there are no accessibility standards for media content on the web

FALSE

T/F: On a website, text and its background should never be contrasting colors.

FALSE

What element do you use to group related form elements to provide clarity to the user and to assistive devices such as screen readers?

Fieldset

When an inline element follows a floated element, it

Flows around the floated element

Which HTML element is the outermost element that contains all the form contents?

Form

In the "normal flow of the document", what will a plain old non-positioned block element do?

Head toward the upper left-hand corner of the page until it bumps into another element

Which CSS property should you alter to create more space between the contents of an element and the border of that same element?

Padding

Q1: HTML & CSS Basics

Quiz 1

Q2: Box Model, Floats, Positioning, Flexbox

Quiz 2

Q3: The CSS Grid

Quiz 3

Q4: Text & Typography: Lists, Links, Navigation

Quiz 4

Q5: HTML Forms

Quiz 5

Q6: Themes, Color & Polish

Quiz 6

Q7: Responsive Web Design & Media Queries

Quiz 7

Q8: Media, Transformations, Transitions, & Animations

Quiz 8

Which of the following is NOT an HTML form input type?

Secure

What containing element do you use to create a drop-down list of choices?

Select

T/F: A "dark theme" is a theme that utilizes a very dark background and contrasting ver light text, instead of the other way around.

TRUE

T/F: Transitions, transforms, and animations can be combined

TRUE

T/F: You can combine the minimum and maximum screen widths in a single media query

TRUE

What is the main axis in terms of flexbox properties?

The axis running in whatever flex-direction is assigned to the container

When you use ems to size fonts:

The font size changes as the size of the font used by its parent element changes

Which new CSS property allows you to easily make an image cover the entire background of an element via a URL?

background-image

Which CSS rule will keep my background image from appearing multiple times as "tiles" across the background of my website?

background-repeat: no-repeat;

The portion of a web page that contains all the content to be displayed on the page should be coded as an HTML5...

body element

The point at which a media query causes a responsive site to change its orientation is called a:

breakpoint

In the CSS grid system, grid items

can be made up of one or more grid cells

You've floated to elements to the left to position them as consecutive columns on a page. Now you want to create a full-viewport-width footer element that is positioned below the two columns without interfering with them. Which of the following property-value pairs can you use to ensure the footer element does this?

clear: left;

A responsive layout is a layout in which:

elements scale proportionally and layouts shift depending on browser size

When you comment out a portion of HTML code, you disable it by...

enclosing it within these characters: <!-- and -->

A flex container can contain one or more

flex items

Which CSS property do you use to determine whether flex items should be displayed horizontally or vertically

flex-direction

CSS is used to...

format the HTML elements of a web page

One way to create a menu that drops down from an item in a navigation bar when the hover over it is to use CSS to change the menu's display property:

from none to block

What property do we use to create the areas referenced when creating a grid-template-area template

grid-area

Which style rule is equivalent to the style rule that follows? .container { grid-row: 3/5; grid-column: 5/13;

grid-row: 3/5; grid-column: 5 / span 8;

By default, items in a flex container are displayed

horizontally from left to right

Which of the following is an HTML attribute in the below code?

href=http://www.google.com

Which of the following CSS color values takes the opacity of the color into account?

hsla (120, 100%, 75%, 0.3)

In the box model for an element, the border

is between the padding and the margin

When you set the border for a block element you can set:

its color, style, and width

Of which grid layout method is the following an example?: .container { grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]; }

named grid line numbers

By default, an ordered list is displayed as a:

numbered list

When you develop responsive web pages, you use a meta element in the HTML to:

set the width of the viewport to the device width

The default for both horizontal and vertical alignment of grid tracks is:

start

To remove the underlining from an <a> element, you can use CSS to set its:

text-decoration property to none

The title element in the head section of an HTML document specifies the text...

that's DISPLAYED in the browser's tab for the page

You can use the CSS list-style-type property to change:

the bullet or number style in an unordered or ordered list

When you use viewport height (vh) to size fonts,

the font size changes as the size of the viewport changes

The href attribute for an <a> element specifies

the page and/or placeholder that the link should go to

HTML is used to define

the structure and contents of a web page

Which of the following attributes must always be specified for the button element in a form?

typef

The best practice for adding CSS to a website is...

via a <link> element pointing to an external stylesheet

Flexbox allows you to lay out elements side by side...

without using floats

When elements overlap on a web page, what property can you use to indicate which elements should appear in front of and/or behind the others?

z-index

Which of the following color value pairs will work best for readability and accessibility?

{background-color: #FFFAFA; color: #131516}

What type of color schemes utilizes different levels of saturation and brightness of the same base hue?

Monochromatic

You are creating a form, and you want the data it collects to be transmitted securely. Which of the following things will you do?

Include method="post" in your form element

What element do you use to create the fields in which users type text in a form?

Input

Which of the following is NOT a benefit of writing semantic HTML?

It cuts significantly on website loading times for those using older/depreciated browsers

What element do you use to create the text that appears nearby and describes each item in a form?

Label

You have a paragraph of text on your website that looks like this: (Want more spacing between the lines) What CSS property will yu use to accomplish this?

Line-height

Which of the following can you not do with flexbox properties and values alone (that is, with no other methods)?

Make a row of elements collapse together into a hamburger menu when viewed on a small mobile browser

Which of the following is not a definition for a transform?

Melt

Which of the following will make an element smaller by half?

Transform: scale(0.5);

Which of following will make an element's background color change smoothly over three second with no delay?

Transition: background 3000ms linear;

When will the styles for the media query that follows be applied? @media only screen (min-width: 768px) and (max-width: 959px)

When the width of the screen is greater than 768 pixels AND less than 959 pixels

In the CSS GS, the fr unit of measure represents

a fraction of the available space within a container

Within a CSS style rule, a declaration consists of...

a property and a value

To create a drop-down menu from an item in a horizontal navigation bar, you nest:

a ul element within an li element of the top-level ul navigation menu

Which of the following will rotate an element w/ pseudo-class :.hover 45 degrees to the left and change the background color?

a:hover {transform: rotate (-45deg); background: blue; }

To position a drop-down menu directly below an item in a navigation bar, you apply:

absolute positioning to the ul element of the drop-down list

You have a row of flex items that you set to run horizontally across the center line of flex container. What CSS property can you use to place one of the items on the top of the container instead?

align-self

Media queries were primarily developed to...

allow you to change the styling of your website based on the width of the browser the site is being viewed on

You use the justify-content property to align the flex items in a container

along the main axis

In order to apply absolute positioning to an element, you must also

apply an explicit position value to its next nearest container element

One good alternative to using floats to create a fluid layout consisting of consecutive items arranged horizontally is:

applying display: inline-block; to the items

When you define grid areas for a grid with grid gaps, the gaps:

are added between the grid areas