WDD 230 Final Exam
preprocessor
"Sass/Scss" are a CSS _____________?
favicon
A _______________ is a small, iconic image that represents your website.
asynchronously
A global fetch() method is part of the Fetch API that provides an easy, logical way to fetch resources ________________ across the network. Which term correctly fills in the blank in the previous statement?
width: 420px;
A key concept behind responsive design is fluidity and proportionality as opposed to fixed width layouts. Using relative units for measurements can help simplify layouts and prevent accidental creation of components that are too big for the viewport. Which of the following is an example of a fixed width CSS declaration? width: 420rem; width:100em; width: 100%; width: 420px;
normalize
A reset, reboot, or ___________ CSS file is used to reduce browser inconsistencies by making browsers render elements consistently and in line with modern standards.
GitHub
A web-based, version-control, and collaboration system that will be used in this course to provide a platform for your web work
header
An HTML element element that contains introductory content.
heading
An HTML element that has six levels.
Safari
Apple
min
Besides hosting and referencing your own CSS normalize file, you can use a CDN (content delivery network) like: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> The ________ portion of the file name is a standard way to name files that have had all the spaces and line returns removed in the file.
>
CSS Combinators: the child combinator uses what symbol?
site layout
CSS media query breakpoints should be based upon the operating system, device being used, or site layout?
CSS
Device-pixel ratio is the number of device pixels per pixel.
name
Each input field must have a ________ attribute to be submitted. If this attribute is omitted, the data of that input field will not be sent.
..
File Path Question: To link to a target file in the directory above or in a sibling path the invoking HTML file, what syntax is used in the file reference? Example: If a file named index.htmlwas inside a subfolder named products and needed to reference an image inside a subfolder named images, the reference could be completed properly using which of the following choices to fill in the blank provided in the href property given here? href="___/images/sunset.png"
/td
Finish the following HTML table markup by filling in the blank. <tr> <td>Product 345</td> <td>Product 231</td> <td colspan="2">Product 333<_____> </tr>
:
Finish the following JSON snippet by filling in the blank with the appropriate syntax to make this a valid name/value pair. { "temple"___"Oakland" }
.linklist li
Given the following HTML code snippet: <main> <h2>The Blue Mountain Express</h2> <ul class="linklist"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </main> Which of the following CSS selectors only selects the the list item elements in the unordered list without error? a) h2, ul, .linklist, li b) h2 ul .linklist c) .linklist, ul, li d) main ul e) .linklist li
1cat9
Given the following HTML form snippet of markup, which of the following user inputs would meet the regular expression rule written in the pattern attribute? <input type="text" name="code-mark" pattern="[A-Za-z19]{5}" title="The Code Mark"> a) AA195 b) 1cat9 c) ten1 d) A28
const fulldate = `${dayName}, ${d.getDate()}, ${monthName} ${year}`;
Given the following JS code snippet, rewrite the entire statement using a template literal. You can assume that all the variables used in the concatenated expression have been declared and are ready to use. You must include a closing semicolon. const fulldate = dayName + ", " + d.getDate() + ", "+ monthName + " " + year;
Draper
Given the following that the JavaScript object myTrip is defined, what will be the value of x given this snippet? const myTrip = { "month":"July", "year":"2015", "temples": ["Logan", "Bountiful", "Manti", "Draper", "St. George", "Cedar City" ] } let x = myTrip.temples[3];
Chrome
application programming interface
Google Fonts makes product and web pages run faster by safely caching fonts without compromising users' privacy or security. Google Fonts is an API or ______________________.
False
HTML tables can be used as an effective and desired layout structure for web pages given how easy they are to markup. True/False?
4
How many columns will be displayed on the screen given the following code snippets? <div class="wrapper"> <div class="col1">One</div> <div class="col2">Two</div> <div class="col3">Three</div> <div class="col4">Four</div> <div class="col5">Five</div> </div> .wrapper { display: grid; grid-template-columns: 1fr 2fr 1fr 1fr; } *answer in a numerical # (1,2,3,etc)
extensions
In VS Code, to add more features including language support, themes, debuggers, helpers, and services, you can install ____________ which run in a separate process, thus ensuring that VS Code is not slowed down.
unordered list
In the responsive, horizontal menu example provided in the activities, what HTML structure was used to construct the navigation menu?
text
JSON is ____ written with JavaScript object notation in mind using name/value pairs.
Edge
Microsoft
Firefox
Mozilla
Opera
Opera Software
image quality
Optimization is the process of trying to find the magical balance between _________ and file size.
head
Part of an HTML document that is not displayed in the web browser.
lazy loading
Progressive loading of assets on a page is also known as __________ _____________.
Native Lazy Loading
Regarding a CSS-tricks.com article and the use of the IntersectionObserver JavaScript object labeling it as cumbersome. A new attribute has been introduced by Google and supported by the Chrome 75+ browser named loading with three different values. The concept of using an HTML attribute and value of loading="lazy" and the browser being able to support in versus requiring JavaScript by the user is called which of the following?
<input type="text" name="unit" required>
Rewrite the following HTML statement to make the input field a required field. You must be exact when typing the answer to get correct, so be careful on how you type out your markup. <input type="text" name="unit">
<footer>
Rewrite the following div element start tag using an appropriate, semantic HTML5 tag, and be sure to include the opening and closing brackets < >. <div id="footer">
margin
The CSS box model refers to the conceptual, rectangular area that exists on HTML elements. The box model has four, basic components listed below. Match the component to its correct order of appearance from the outermost part of the rectangle model (first) to the innermost part of the model (last). Which component is first (outermost)?
content
The CSS box model refers to the conceptual, rectangular area that exists on HTML elements. The box model has four, basic components listed below. Match the component to its correct order of appearance from the outermost part of the rectangle model (first) to the innermost part of the model (last). Which component is last (innermost)?
border
The CSS box model refers to the conceptual, rectangular area that exists on HTML elements. The box model has four, basic components listed below. Match the component to its correct order of appearance from the outermost part of the rectangle model (first) to the innermost part of the model (last). Which component is second?
padding
The CSS box model refers to the conceptual, rectangular area that exists on HTML elements. The box model has four, basic components listed below. Match the component to its correct order of appearance from the outermost part of the rectangle model (first) to the innermost part of the model (last). Which component is third?
general sibling
The Following CSS declaration uses what combinator? div ~ p { color: green; }
meta description
The ______ ___________ is an HTML attribute that provides a brief summary of a web page. Search Engines such as Google often display this in search results.
viewport
The __________ is the framed area on a display screen and each responsive web page needs to have a meta tag defined for this property.
autofocus
The ____________ attribute specifies that the input field should automatically get focus when the page loads.
float
The following captures a paragraph <p> wrapping around an image <img>. Complete the CSS declaration by filling in the blank with the appropriate property declaration that supports this layout. p img { __________: right; margin: 1em; }
p:first-child::first-line
Using a pseudo class and a pseudo element combined, how could we target the first line of the first paragraph?
:link :visited :hover :focus :active
Voldemort Hates Furry Animals What is the proper order that these pseudo classes should always appear in the CSS? :active :hover :visited :focus :link
clear
What CSS property allows us to clear floats that precede the selected element(s) in the HTML structure?
<picture>
What HTML5 element (opening tag) lets you define zero or more <source> elements, followed by one <img> element, optionally intermixed with script-supporting elements, essentially allowing you to define more than one image based on the view and browser support.
filter()
What JavaScript method is use to create a new array with elements that pass a test specified by a function?
@
What character(s) is/are used to designate the start of a media query in CSS markup?
.linklist ul li
What code snippet correctly references an external JavaScript file name myScript.js in HTML? <main> ...<section class="linklist"> ......<h2>WDD 230: Assignment Portal</h2> ......<ul> .........<li>Lesson 02: <a href="#">Assignment ................Link</a></li> ..........<li>Lesson 03: <a href="#">Assignment .................Link</a> </li> ......</ul> ...</section> </main> a) .linklist, h2, ul, li b) .linklist h2 ul li c) main section ul d) .linklist, ul, li e) .linklist ul li
JavaScript Object Notation
What does JSON stand for?
Application Programming Interface
What does the acronym API stand for?
React
What is a javascript library for building user interfaces called?
<datalist>
What is an element that specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of the pre-defined options as they input data into this interface.
bootstrap
What is an open source frame work used for front-end development?
grid-gap
What is the CSS Grid Layout property that is a shorthand to create a gutter or alley between grid cells?
push
What is the action called when saving/uploading to a GitHub repository?
img { padding: 1em; border: 1px solid black; }
What is the correct CSS element selector syntax for a CSS declaration when applying a solid border on an image that is 1px wide, and has 1 em worth of padding? img{ ...p_______: _____; ...b_______: ___ ___ ___; }
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
What is the correct way to reference a font from the Google Font API? *using Montserrat as the font family*
<!--comment-->
What is the correct way to write an HTML comment? *use only the symbols that make it a comment, with the word comment in between*
block
What is the default display property of a paragraph (<p>) element?
inline
What is the default display value of an <img> element? (table, grid, block, flex, inline, etc.)
<input>
What is the most commonly used form element?
intersection observer
What is the name of the API we used in the Progressive Loading activity?
map()
What javaScript method is used to call a function on each element in an array, then create a new array based on results?
:hover
What pseudo class would we use if we wanted to add a visual effect when the user passes their mouse over an element?
@keyframe name{}
When adding an animation in CSS, what is the rule that needs to be declared before defining the animation properties?
parent
When defining a "float" element, the following syntax should be applied to the parent or child element? display: relative;
False
When linking to a site home page you should always make sure you have /index.html at the end of the URL. **True/False
flex-direction
Which CSS Flexible Box Layout property allows us to set the direction of the flex container items into a single column?
the margin
Which CSS property does NOT add to an element's width?.
<html>
Which HTML element wraps all the content on the entire page and is sometimes known as the root element?
forEach()
Which JavaScript method is used to execute a function once, for each element in an array?
var
Which JavaScript variable declaration statements has a function scope versus a block scope?
BMP
Which image file type is the LEAST ideal for web page based graphics?
grid
Which is more suited for layouts in two dimensions, grid or Flexbox?
.querySelector
Which method is preferrable when accessing an element in the DOM from javascript? *retype answer to match* a) .getElementById b) .getElementsByClassName c) .querySelector d) .querySelectorAll e). .getElementsByTagName
getItem(name)
Which method is used to call or retrieve a value from local storage? ** remember to add the required arguments to the object**
setItem(name, value)
Which method is used to store a value in local storage? ** remember to add the assigned name-value pair to the object**
.parent-selector { display: flex; justify-content:center; align-items: center; }
Which of the following code snippets will horizontally and vertically center the content of children elements within the parent container, .parent-selector? **re-type CSS declaration** A) .parent-selector { display: flex; justify-content:center; align-items: center; } B) .parent-selector { margin: 0 auto; text-align: center; vertically-align: middle; } C) .parent-selector { display: flex; text-align:center; vertically-align: middle; } D) .parent-selector { display: flex; justify-content: full; vertically-align: 50%; }
JPEG
Which of the following image file formats is best described with the following points? ·Most used and most widely accepted image format ·Compatible in most OS (Mac, PC, Linux) ·24-bit color
radio
Which of the following input types would be the best choice for displaying choices to a user if they are only allowed to select one? (select, range, radio, checkbox, etc)
13.91.95.74
Which of the following is an IP address? -www.intel.com -0001 1101 0001 1101 -intel.com -13.91.95.74
/*comment*/
Which of the following is an accurate example of writing a comment in CSS? *use only the symbols that make it a comment, with the word comment in between*
biz
Which of the following is not one of the original, generic top-level domains listed under the Category group? (net, edu, mil, biz)
HTML, CSS, JavaScript
Which of the following technologies are considered to be CORE web technologies and found on most Frontend Web Design and Developer positions under requirements?
in, pt, px
Which of the following units of measure in CSS are absolute units if any? (rem, in, pt, px, %, em, etc.)
class
Which selector can be used to target multiple elements? (class or ID)
absolute
With the position: ______________ declaration set for a selected element, the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if there is one.
display: flex;
Write the CSS declaration that applies the Flex box layout to the selector.
display: grid;
Write the CSS declaration that applies the Grid layout to the selector.
<!DOCTYPE html>
Write the document type declaration markup statement for an HTML5 file. Be sure to include the appropriate opening and closing brackets < >
media queries
____________ let you adapt your site or app depending on the presence or value of various device characteristics and parameters and are a key component of responsive design. As an example, they can shrink the font size on small devices, increase the padding between paragraphs when a page is viewed in portrait mode, or bump up the size of buttons on touchscreens.