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