WDD 230 Final Exam

Lakukan tugas rumah & ujian kamu dengan baik sekarang menggunakan Quizwiz!

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

Google

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.


Set pelajaran terkait

Adjectival clauses practice quizlet

View Set

Chapters 23, 24, & 25 Conceptual Questions

View Set

Research Methods - Post Midterm Chapter Questions

View Set

What's Wrong with Timothy? - A Case Study on the Endocrine System

View Set

MGT305- Final Exam- Quizes on final 3 chapters

View Set