CS Final

Réussis tes devoirs et examens dès maintenant avec Quizwiz!

The CSS variable --bg-color defines the page's background color. True False

True

Web developers can sometimes ignore really old web browsers. True False

True

When implementing separate websites, a mobile browser accessing the desktop website may redirect the mobile browser to the mobile site automatically. True False

True

img.red

Matches img elements with red class name. Any HTML class name attribute can be used as a selector by writing the period character followed by the class name.

Which input element attribute limits the number of characters the user can type in a text box or password field?

Maxlength The size attribute limits the width of the text box, but the maxlength attribute limits the number of characters that can appear in a text box.

A property that is listed in the from keyframe selector but not the to keyframe selector will not be animated. True False

True Only properties that are listed in both the from and to keyframe selectors are animated.

"123" == 123 true false

True "123" is converted into 123 before comparing for equality.

!(2 > 10 && 5 > 0) true false

True !

Best practice is to set the initial-scale property to 1. True False

True Setting initial-scale to a larger or smaller value will zoom the page initially and require the user to pan or zoom to read the text easier.

Many browsers add a border around an input when the input has the focus. True False

True The border appears outside the CSS border and helps the user know the input has the focus. The border can be removed with CSS: outline:none.

2 > 10 || 1 > 2 true false

False

Haml code can be rendered directly in a web browser. True False

False

Inline styles cannot be used with embedded stylesheets or external stylesheets. True False

False

body { background: green; } @media only screen and (min-width: 600px) { body { background: blue; } } @media only screen and (min-width: 800px) { body { background: red; } } What is the body's background color on an iPhone 8 in landscape mode with a viewport width of 667px? green blue red

blue

blue white

practice 3.8

book store babe

Which file does the following URL access? http://www.weather.com/summer/temperatures.htm

tempratures.htm

WWW

third level domain

Do web servers always generate ETags for all web resources?

no ETags are not often produced for dynamic web content.

Ensure that the user types only one letter in the range A through F. <input type="text" ="[A-F]">

pattern

A mobile user should never have access to the desktop version of a website when a mobile version is available. True False

False

A web hosting company that hosts websites for free is likely to provide services like automated backups, unlimited disk space, and 24-hour customer support. True False

False

Browser fallbacks are only used to make new features work on old browsers. True False

False Fallbacks are used to test features for proposed standards that would otherwise not work on any current browsers.

The audio element's audio can always be paused by the user. True False

False you need controls

Does the HTML follow the developer guidelines to always use closing tags and avoid self-closing tags? 1) <ol> <li>Avatar <li>Titanic <li>Jurassic World </ol>

**** No

What is the proper syntax to declare a CSS variable set to black? section-color: black; --section-color: black; --section-color black;

--section-color: black;

Which function moves an element 20 pixels to the left and 5 pixels down? translate(-20, 5) translate(20px, -5px) translate(-20px, 5px)

-20px is 20 pixels left, and 5px is 5 pixels down.

Which tag creates a text box widget?

What is $value? $value: invert(white); black white gray

black

<p>

Just normal paragraph text.

Tag that marks the beginning of the HTML document.

Provide the CSS display value that correctly styles the following HTML as displayed. <style> .animal { background: yellow; width: 50px; height: 40px; display: ...; } </style> My favorite breed of <span class="animal">cat</span> is Russian Blue. My favorite breed of *cat is Russian Blue. display:

The list-item display value is the default for list item elements.

A 2x image will look the same as an equivalent 1x image on a 1 DPR device. True False

True

A VPS generally runs slower than a dedicated host. True False

True

A dynamic web page might look different for two different users who are accessing the same page. True False

True

An advantage to using an SCSS variable to store a color value used multiple times in a stylesheet is that if the color needs to be changed in the future, only the variable needs to be changed. True False

True

An animation without an animation-delay property begins immediately. True False

True

An umbrella symbol, ☂, which is assigned the decimal number 9730, can be written as ☂. True False

True

Both relational and non-relational databases have been implemented with open source software. True False

True

CSS preprocessors allow developers to write much less code compared to writing straight CSS. True False

True

Changing the Network throttling dropdown to "Offline" allows the developer to test how the website behaves with no Internet connection. True False

True

Column databases are generally faster than relational databases for accessing vast amounts of data. True False

True

Decreasing a desktop browser's width is an easy way to determine if RWD techniques are being used. True False

True

JavaScript frameworks often simplify the use of web APIs in the browser. True False

True

Keeping the content on a desktop website and a separate mobile website consistent can be a challenge. True False

True

Multiple <source> tags can be used to specify different video formats. True False

True

Playing video uses significantly more network bandwidth than playing just audio. True False

True

An inline style does not use a selector. True False

True The style rule is applied to the tag with the style attribute, so a selector is unnecessary.

<a href="#History">History</a> Valid Invalid

Valid An href with only the fragment identifier #History links to the History section of the current page.

Indicate which of the following img tags are valid. <img alt="Fun weekend" src="weekend.jpg"> Valid Invalid

Valid tags can appear in any order

Allow the user to use a slider to select a number between 0 and 10. <input type=" " min="0" max="10">

range

body { background: green; } @media only screen and (min-width: 600px) { body { background: blue; } } @media only screen and (min-width: 800px) { body { background: red; } } What is the body's background color for a desktop browser that is 900px wide? green blue red

red

Set the text color to blue for any links where the rel attribute contains nofollow. <a rel="abstract nofollow" href="https://example.com"> a[ ] { color: blue; }

rel~="nofollow" Selects a elements if the word nofollow appears anywhere within the rel attribute.

Ensure the user enters a value in the input field. <input type="number" >

required

Black

rgb(0,0,0)

dark red

rgb(200, 0, 0)

Purple

rgb(250, 0, 250)

Orange

rgb(250, 150, 0)

White

rgb(255,255,255)

gray

rgb(80,80,80)

Provide the CSS value that correctly styles the example text as displayed. Due: July 4, 1776 text-align:

right

What CSS style floats an element to the right? float:

right

sans-serif

whitehouse in www.whitehouse.gov

second level domain

What is the hostname of the following URL? http://www.weather.com/summer/temperatures.htm

www.weather.com

Some plug-ins are not available for all web browsers. True False

True

The AAC and MP3 formats are supported by nearly all web browsers. True False

True

flex-basis

Flex item property that defines the default size of the item before the remaining space is distributed.

Flex

Flex item property that indicates flex-grow, flex-shrink, and flex-basis combined.

What is $value? $value: lighten(black, 20%);

#333 is a grayish color that is 20% lighter than black.

What is $value? $value: round(16.4pt); 16.4pt 16pt 17pt

16 is 16.4 rounded.

What value is $points? $points = 2; $points *= 3 + 1;

Style Sheet

A language describing the visual presentation of structured documents.

What default body font does Reboot use? Times New Roman Courier New A sans-serif font

A sans-serif font

Below are reasons for using the alt attribute. Match the reason with the appropriate scenario. Allow browser to turn off image display

A user may want to reduce data cost or load a page faster.

Responsive Web Design

A web design approach that creates web pages that automatically move and resize parts depending on the display size and orientation.

What media type is used if no media type is specified? all print screen

All

Input Value

Allows the input to start with a default value. Some inputs may be optional or previously entered by the user, so the value attribute allows the browser to send data from the form without direct user interaction.

<!DOCTYPE html> <html lang="en"> <title>Presidential Facts</title> <style> body { color: blue; } div { color: green; } </style> <body>  </body> </html> What color is the text? <p>George Washington was the first president of the United States</p> Black Blue Green

Blue

What types of elements can be inside a block element? .

Both Inline and Block

Default type for the <style> tag.

CSS

.hidden { background-color: yellow; } Element class id pseudo element descendant

Class

Which request method is used by the browser to get the same response headers that a GET would generate but without the message body?

Correct HEAD only requests the response headers.

JavaScript

Enables page interaction

HTTP

HyperText Transfer Protocol - the protocol used for transmitting web pages over the Internet

file

Hyperlink used to refer to a document on the same computer as the web browser.

mailito

Hyperlink used to send email.

What types of elements can be inside an inline element?

Only Inline

<a href="ftp://example.com/index.html">Raw data</a> Loads a page over an unencrypted connection Encrypts the page load request and response Sends an email Opens a file

Opens a file

<!DOCTYPE html> <html lang="en"> <title>Presidential Facts</title> <style> body { color: blue; } div { color: green; } </style> <body>  </body> </html> What color is the text? <div style="color:orange">George Washington never lived in the White House because construction was completed several years after he retired from the presidency.</div>

Orange

</html>

Tag that marks the end of the HTML document.

The inline-block display value allows the element to display inline with surrounding text, while treating the element like a block.

translate(), scale(), and rotate() are _____ functions. transition transformation translation

Transformation

Which attribute must be set to create a text box widget?

Trick question: The default value for the type attribute is "text", so no attribute must be set to create a text box widget.

<a href="http://example.com" rel='nofollow'> Use quotes around attribute values Use double quotes No guideline violations

Use double quotes

<input type='text' name='zip'> Use quotes around attribute values Use double quotes No guideline violations

Use double quotes

<input type=checkbox checked> Use quotes around attribute values Use double quotes No guideline violations

Use quotes type=checkbox should be type="checkbox".

Web document that is viewed in a web browser.

Web Page

Is the following a valid URL? http://www.whitehouse.gov/

Yes

What color and percent creates the repeating linear gradient that ends in white?

white 25%

Information mesh

Another name for the web that was considered by the web's creator.

Because Chrome is by far the leading browser worldwide, testing a web page only really needs to be done using Chrome. True False

False

A shadow with blur-radius:4px is less blurry than a shadow with blur-radius:2px. True False

False The larger the blur-radius, the more blurry the shadow. Negative values are not allowed.

Buttons always submit form data to a server.

False While a submit button causes form data to be sent to the server, buttons can used for other purposes, such as running JavaScript code.

The max-width property should never be used in a fluid layout. True False

False max-width is useful to keep a fluid layout from expanding too wide on very large monitors. In general, web pages should make optimal use of the entire browser window.

A 404 message indicates that a domain name is not recognized.

False page not found

Adding type="i" to the first <li> changes the list to i., ii., iii. True False

False type="i" must be added to the <ol> tag to affect the whole list, not the <li> tag.

RWD requires the web server to examine the user agent string in HTTP requests. True False

Fasle

Img selector

Matches all img elements. Any HTML tag name can be used as an element selector.

Where is the image located relative to the image's default location? <img src="world.jpg" style="position:static; left:-20px; top:30px">

No change Static positioning leaves the image at the default location.

Suppose --main-color from the animation above is used in 200 different CSS rules. How many CSS rules would need to be modified if --main-color is changed to blue? 0 1 200

No changes are required except to the place where --main-color is assigned a color. Using a CSS variable makes modifying CSS much easier.

<p class="assertion">He says he is 'innocent'.</p> Use quotes around attribute values Use double quotes No guideline violations

No guideline violations

Which quote guideline is violated ? 1) <p id="preamble">We the people...</p> Use quotes around attribute values Use double quotes No guideline violations

No guideline violations

Date

Datetime the response was generated by the web server.

The :focus selector normally selects more than one element at a time. True False

False :focus selects the element that has the focus, and only one element may have the focus at a time.

Tag that specifies the character encoding used in the document.

What Bootstrap file contains the definition of the bg-success CSS class? bootstrap.min.css bootstrap.min.js jquery-3.1.1.slim.min.js

bootstrap.min.css The CSS file contains the definition of all Bootstrap CSS classes.

Which statement is equivalent to const EMAIL = "[email protected]";? define("EMAIL") = "[email protected]"; define("EMAIL", "[email protected]"); EMAIL = "[email protected]";

define("EMAIL", "[email protected]");

Cause the text background of any div to be changed to light blue when the mouse hovers (moves over) any part of the div contents. Blank { background-color: lightblue; }

div:hover

<img src="dog-small.jpg" srcset="dog-medium.jpg 2x, dog-large.jpg 3x" alt="Dog"> Which image is requested by a device with a 1.5 DPR? dog-small.jpg dog-medium.jpg dog-large.jpg

dog-medium.jpg

<picture> <source media="(min-width: 600px)" srcset="dog-wide.jpg, [email protected] 1.5x, [email protected] 2x"> <source media="(min-width: 400px)" srcset="dog.jpg, [email protected] 1.5x [email protected] 2x"> <img src="dog-narrow.jpg" srcset="[email protected] 1.5x, [email protected] 2x" alt="Dog"> </picture> What image is requested by a 3x device with width = 350px? [email protected] dog-narrow.jpg [email protected]

[email protected] Screen with width = 350x doesn't match either media query, so the <img> is examined for a 3x image, and [email protected] has the highest resolution.

<img src="dog-small.jpg" srcset="dog-medium.jpg 2x, dog-large.jpg 3x" alt="Dog"> Which image is requested by an old browser that doesn't understand the "srcset" attribute? dog-small.jpg dog-medium.jpg All three images

dog-small.jpg Old browsers that don't understand the "srcset" attribute download the image in the "src" attribute.

What CSS style avoids left-floating elements? clear:

left

Content Type

media type of the response's message body

Ensure that the temperature entered will not be less than -273.16. <input type="number" ="-273.16">

min

What is the correct way to name the new grid item <section>? section { grid-area: ____; } "mysection" mysection 'mysection'

mysection The grid item name must use alphanumeric characters, dashes, or underscores and not be quoted.

Cause all elements with the class name logbase to be displayed as superscript text. Blank { vertical-align: super; font-size: smaller; }

.logbase

What compound assignment operator makes $points become 2.5? $points = 5; $points ___ 2;

Hyperlinks may only contain text. True False

False

The box-shadow property creates a shadow for text. True False

False

The business logic of an SPA should generally be encoded in the front-end. True False

False

Web hosting companies generally charge more for hosting on Linux servers than for hosting on Windows servers. True False

False

Websites have either an IP address or a domain name, but not both.

False

With the introduction of IPv6, devices no longer us IPv4

False

A developer can drag the image that looks like a mobile device to modify the accelerometer's alpha (rotation around the z-axis), beta (left-to-right tilt), and gamma (front-to-back tilt) values. True False

True

A pinch gesture usually zooms in and out of the web page. True False

True

A valid keyframe list must define the starting (from) and ending (to) animation states. True False

True

An SVG image may be defined in a .svg file or in the HTML with the <svg> tag. True False

True

If the box-shadow uses the value inset, then the shadow appears inside the box. True False

True

If using transition-delay: 1s in the example above, the purple square would not increase in size until 1 second after the cursor hovered over the square. True False

True

The CSS below causes a paragraph to disappear when the mouse hovers over the paragraph. p { transition: opacity 500ms ease-in-out; } p:hover { opacity: 0; }

True

The Chrome screen emulator can display a mobile website in portrait or landscape. True False

True

The SCSS below results in CSS that sets a web page's background color to blue. $theme-color: blue; body { background-color: $theme-color; } true false

True

The mathematical forall symbol, ∀, can be written as ∀. True False

True

The pool control system periodically transmits summary data over the Internet to a pool service company's web server. True False

True

The rounded-circle class makes an image appear in an ellipse. True False

True

The web server detects mobile browsers by examining the User-Agent request header. True False

True

.special { position: fixed; left: 100px; top: 25px; } The text "123" is displayed on top of "ABC". <span class="special">ABC</span> <span class="special">123</span>

True The content of both spans are rendered at the same fixed position in the browser.

Having users enter dates, colors, email, and numbers using the specialized widgets is preferable when an appropriate widget is available. True False

True The specialized widgets help ensure that input is valid and speed up the data entry process.

("10" <=> "010") == 0 true false

True "10" is converted to 10, and "010" is converted to 10, and 10 == 10.

<ol> <li>Cats</li> <li>Dogs</li> <li>Hamsters</li> </ol> The list will be numbered 1., 2., 3. True False

True Ordered lists are numbered with numbers by default.

Progressive enhancement helps designers to simplify the amount of text displayed on a web page and remove unnecessary clutter. True False

True Progressive enhancement requires a great amount of planning to determine what is the most important content to display.

If the customer notices the low water level and calls, the company receptionist's browser can have the customer's pool status web page loaded by the time the receptionist answers the phone. True False

True The caller's phone number can be sent to the server and used to load the caller's pool status web page automatically.

The fragment identifier for the <p id="location"> opening tag is location. True False

True The fragment identifier is the same as an element's id attribute.

After the customer reports the water level, the receptionist could inform the caller that a service technician was already dispatched and was six minutes from arriving at the house. True False

True The web page could show which technician had been automatically dispatched by the problem reporting system. IoT devices in the technician's vehicle, such as GPS, can be used to show the vehicle location and predict arrival time.

Is the following a valid URL?http://www.nasa.gov/cubequest/details/#.VOaO_VPF9U9

Yes

Create a table cell with datum of "open".

An inline style uses curly braces ({}). True False

False Curly braces are not allowed in the style attribute.

Dark Green

Darkgreen is a named CSS color with the hexadecimal value #006400. Darkgreen has no red or blue components, so the color must be green. The value 7F is halfway between the darkest and lightest values, so 64 represents a darker color.

Which media type targets users who are blind? all screen speech

Speech

Which image tag attribute specifies the image's URL? url src alt

Src

small-caps

Place an equal amount of horizontal space between each grid item, including the grid edges. justify-content:________;

space-evenly space-evenlyplaces equal spacing around each grid item. An alternative valuespace-betweendoes the same asspace-evenlyexcept no space is left on the grid edges.

HTML

specifies document structure

strong indicates important text, and is displayed as bold

Cause all hyperlinks inside a table to be displayed with the bold font-weight attribute. Blank { font-weight: bold; }

table a

A DNS server's primary role is to convert

the domain name into an ip adress

Which statement produces a parse error? $owner = "Pam's"; $owner = 'Pam's'; $owner = 'Pam"s';

$owner = 'Pam's'; A single quote in a string delimited with single quotes must be escaped with a backslash: $s = 'Pam\'s';

Which media query is true for a viewport width 1000px width? (min-device-width: 500px) (max-width: 500px) (min-width: 500px)

(min-width: 500px)

Refer to the following HTML fragment. <ol class="numbers"> <li id="first">First number</li> <li id="second">Second number</li> <li id="third">Third number</li> </ol> <ul class="bullets"> <li>A <span class="bullet">bullet</span></li> <li>Another <span class="bullet">bullet</span></li> <li>Last <span class="bullet">bullet</span></li> </ul> What CSS selector matches the numbers class attribute?

.numbers

How many total HTTP requests does a browser send for a web page that does not use any other web resources?

Indicate what precedes the given list item when rendered by the browser.Valid answers are the word bullet, or 1., 2., 3 <ol> <li>Apples</li> <li>Oranges <ol> <li>Valencia</li> <li>Mandarin</li> </ol> </li> </ol> Valencia

Make the C item occupy the top 2 rows in the 2nd column. Grid has 3 rows and 3 columns. C is in the middle, top 2 rows. The 3rd row only has F and then 2 empty cells. #grid-item-c { grid-column: 2 / 3; grid-row: _______ ; }

1 / 3 The first number is the starting row line, and the second number is the ending row line.

Make the A item occupy the entire top row. #grid-item-a { grid-column: _______ ; }

1 / 4 The first number is the starting column line, and the second number is the ending column line.

If a web browser sends 20 HTTP requests to a web server, how many HTTP responses will the web server likely send to the web browser?

If a browser viewport is 400px wide and 300px high, how wide is an element with width:50vmax? 400px 100px 200px

200px

If a browser viewport is 400px wide, how wide is an element with width:50vw? 400px 200px 100px

200px

If the grid container has 10 grid items, what grid-template-columns value creates a grid with 2 rows and 5 columns? #grid-container { width: 600px; display: grid; grid-template-columns: _____; }

200px auto auto auto 200px

HTML5 standard published.

2014

WHATWG controls the HTML standard.

2019

An image that is 50 x 50 logical pixels will use how many total device pixels on a 3 DPR display? 250 22,500 1,000

22,500

What angle (direction of red arrow) creates the gradient below? background: linear-gradient(_______, blue, green);

225deg

What is the total <div> width? <style> div { width: 200px; padding: 10px; border: 2px solid green; margin: 5px; } </style> <div>How wide am I?</div>

234 pixels

What is $value? $value: 20pt + (10 / 2) ;

25pt

How many JavaScript files are necessary for some Bootstrap components to work? 1 3 4

IPv6 supports about how many IP addresses?

3.4x10^28

How many websites existed in 2001?

30 million

Where is the image located relative to the image's default location?<img src="world.jpg" style="position:relative; top:-30px"> 30 pixels higher 30 pixels lower No change

30 pixels higher -30px is a negative value, so the image is 30 pixels higher from the image's default location.

Where is the image located relative to the image's default location?<img src="world.jpg" style="position:relative; left:30px"> 30 pixels to the right 30 pixels to the left No change

30 pixels to the right 30px is a positive value, so the image is 30 pixels to the right of the image's default location.

Which status code is sent when the web server wants to redirect the browser to a different URL?

301 and 302 status codes are always accompanied by a Location header that indicates the new URL that the browser should access. Ex: "Location: http://w3c.org/new-location.html". 302 status codes are for URLs that may not redirect in the future

Which status code is sent when the web server compares the cached ETag with the server's ETag for a requested web resource, and the two ETags are identical?

304 When the ETags are equal, the web browser has an up-to-date cached copy of the web resource.

If a browser viewport is 300px high, how wide is an element with width:10vh? 300px 30px 150px

30px

What is the size of an IP address in IPv4?

32 bits

Refer to the following HTML, and determine if each element is a block or inline element. <p>Click on the "swoosh" to go to Nike Headquarters. <br> <a href="http://nike.com/"><img src="nike-swoosh.jpg" alt="Nike swoosh"></a></p> <p> <img> <a> <br>

<p> tag creates a block container that fills the width of the parent container. <img> inline The <img> tag does not contain other content. The <img> tag's width is determined by the tag's content and may not extend to the width of the <a> parent container. <a> The <a> tag only contains other inline content. The <a> tag's width is determined by the tag's content and may not extend to the width of the <p> parent container. <br> Inline The <br> tag does not hold any other content and does not have a width.

Which label is selected by input[type=radio] + label? <input type="checkbox"><label></label> <input type="radio"><label></label> <label></label><input type="radio">

block

Underline the first line in each blockquote. <blockquote>To be or not to be...</blockquote> { text-decoration: underline; }

blockquote::first-line

Allow the user to select some combination of red, blue, and green. <input type=" ">

color

What is the proper syntax to use a CSS variable called --section-color? color: --section-color; color: var(--Section-color); color: var(--section-color);

color: var(--section-color);

"bat" < "ball" True False

false The "t" in "bat" has an ASCII value greater than the first "l" in "ball".

Refer to the CSS below. .special { position: absolute; left: 100px; top: 25px; } If the "container" class uses static positioning, the <span> is positioned relative to the <div>. <body> <div class="container"> <span class="special">Special</span> </div> </body>

False An absolute positioned element is not positioned relative to a static positioned ancestor element, so the <span> is positioned relative to the document body.

The offset-x and offset-y must be a non-zero value. True False

False When the offsets are 0, the shadow appears to make the text glow.

The height property is often used in the viewport meta tag. True False

False Most web pages are expected to flow vertically and require vertical scrolling, so the height property is rarely set.

Refer to the CSS below. border-image: url(some-border.png) 50 repeat; If some-border.png is 150 x 150 pixels, the border image section is stretched on the sides. True False

False "repeat" repeats the image section. "stretch" stretches the image section.

The <p> tag can have another <p> tag inside. True False

False

The developer can change the emulated width and height when the emulator is in Device mode. True False

False

The transition property below makes the width take 3 seconds longer than the height to complete the transition. transition: width 3s, height 1s;

False

TypeScript code is executed by the web browser. True False

False

UI libraries always use JavaScript to govern the behavior of the UI widgets. True False

False

Web developers typically create web pages using new features available exclusively on a particular browser. True False

False

.special { position: fixed; left: 100px; top: 25px; } All elements using the "special" class scroll with the page contents. True False

False Fixed positioned elements remain in a fixed location and do not scroll.

Refer to the CSS below. border-image: url(some-border.png) 50 repeat; The width and height of a border image are specified by border-image-width and border-image-height. True False

False The border-width or border properties specify the width of an element's four borders. border-image-width and border-image-height specify the width and height of the image section used to render the border image.

The radial gradient below has a blue interior and a green exterior. radial-gradient(green, blue);

False The interior is green and the exterior blue.

"123" !== "123" true false

False "123" is identical to "123".

The Euro symbol, €, can be written as &euro. True False

False A semicolon is missing at the end of the entity specification.

Developers normally create 1x, 2x, and 3x SVG images to target various DPR devices. True False

False A single SVG image looks good on any DPR device.

Using transition-timing-function: linear causes a transition to take less time overall. True False

False All timing functions take an equal amount of time to complete a transition. The linear function uses a constant speed for the entire transition, unlike the other functions that animate more slowly or quickly at times.

Really small businesses are exempt from web accessibility requirements. True False

False Although some laws only apply to companies that provide services to federal and local government, nearly all businesses that serve the public must meet ADA provisions requiring effective communication with the disabled.

Two tags within the same HTML document may have the same id. True False

False Each id attribute must be unique within an HTML document, thus ensuring a URL with the fragment identifier refers to exactly one part of the document.

An <option> tag must have a value attribute.

False If the <option> tag does not have a value, the browser will send the option text as the value.

If animation-duration is assigned the value 0s, the animation occurs very quickly. True False

False No animation occurs unless a positive length value is assigned.

A developer that modifies an existing desktop website for a mobile device is using a progressive enhancement design strategy. True False

False Progressive enhancement starts with the design for the mobile device and then modifies the design for larger screens.

The text is horizontally centered in the web browser. <body> <div style="width:300px; margin:auto;">Some text</div> </body>

False The <div> is horizontally centered, but the text is left-aligned in the <div>. The text-align:center property horizontally centers text.

The web browser will always create a new window for hyperlinks whose target attribute is _blank. True False

False The browser can open the link in a new tab or window. Many modern browsers will open the link in a new tab instead of opening a new window.

Passwords from the password widget that are sent to the server using HTTP are safe from prying eyes. True False

False The browser doesn't display the password on the screen, but HTTP sends the password over the network as text, which is viewable by anyone watching the network traffic between the web browser and the server. To keep passwords secure, the form must use HTTPS.

The geolocation (latitude and longitude) of the emulated device is modified by moving the desktop computer to a different location. True False

False The developer types "Lat" and "Lon" values to change the emulated location of the device.

The sass command-line tool creates a .scss file from a .css file. True False

False The opposite is true: The sass tool creates a .css file from a .scss file.

Changing the ordered list to an unordered list with type="A" changes the list to A., B., C. True False

False The type attribute is deprecated for <ul> in HTML5. An unordered list may use CSS to change the bullet style.

If two elements are stacked on top of each other and both have margin:20px, the total margin between the two elements is 40px. True False

False Two vertical adjoining margins collapse into a single 20px margin.

The W3C Markup Validator warns that the HTML below is missing an attribute. What attribute is missing from <html>? <!DOCTYPE html> <html> <meta charset="UTF-8"> <title>Learning HTML</title> <body>A warning is not as serious as an error.</body> </html>

lang

Changing the device in the emulator changes the user agent in the "Network conditions" tab. True False

False Unless the user agent is selected automatically, the selected user agent is sent in HTTP requests regardless of what device is emulated.

The pool company would have to send a technician to the pool to change the control system settings. True False

False. IoT-based control systems can be built so that a technician can access and modify system settings via a web page from anywhere on the Internet.

Unlike the blind, people who are deaf do not need special accommodation for websites. True False

Fasle

Identify which CSS selector is used in each question. li ~ img Universal selector Multiple selector Child selector General sibling selector Adjacent sibling selector

General sibling li ~ img matches any img elements that follow an li element, where the li and img elements are siblings.

Gives this h1 heading a label, so that a function can find the heading to change the heading's color. Various HTML elements can be given an id, such as an h1, h2, h3, p, or other element.

body { background: green; } @media only screen and (min-width: 600px) { body { background: blue; } } @media only screen and (min-width: 800px) { body { background: red; } } What is the body's background color on an iPhone 8 in portrait mode with a viewport width of 375px? green blue red

green

Refer to the HTML below. <form> <input type="checkbox" name="check1" checked> <input type="checkbox" name="check2"> <input type="radio" name="radio1" value="1" checked> <input type="radio" name="radio2" value="2"> <input type="radio" name="radio3" value="3"> <input type="submit"> </form> Which attribute should be added for each widget to add labels to the form?

id The<label>tag requires that the element to which the label connects has an id attribute.

<p>We changed the <strong><em>font</strong></em> in this paragraph.</p> Valid Invalid

Invalid A tag opened inside another must be closed before the outside tag is closed: <strong><em>font</em></strong>

Indicate which of the following img tags are valid. <img src="smiley.gif"> Valid Invalid

Invalid Missing Alt

<a "https://cnn.com">CNN</a> Valid Not valid

Invalid Missing this part: href=

Indicate which of the following img tags are valid. <img src="sparky.png" alt="A picture of my dog, Sparky"></img> Valid Invalid

Invalid img is self contained

Provide the CSS value that correctly styles the example text as displayed. The following sentences are examples of a pangram, a sentence that contains all of the letters of the alphabet. The quick brown fox jumped over a lazy dog. Pack my box with five dozen liquor jugs. Jackdaws love my big sphinx of quartz. The five boxing wizards jump quickly. How vexingly quick daft zebras jump! Bright vixens jump; dozy fowl quack. Forsaking monastic tradition, twelve jovial friars gave up their vocation for a questionable existence on the flying trapeze. text-align:

Justify The justify alignment value stretches the spaces so each line of the text fills the width of the element.

LightGreen

Lightgreen is a named CSS color with the RGB values (144, 238, 144). The second value, representing green, is the highest and therefore strongest color component.

img:last-child

Matches any img element that is the last child of another element.

Is there a media type that specifically targets mobile devices? Yes No

Must media queries have at least one expression after the media type? Yes No

body { background: green; } @media only screen and (min-width: 600px) { body { background: blue; } } @media only screen and (min-width: 800px) { body { background: red; } } Does removing the keyword "only" from the media queries have any effect on the latest Chrome browser? Yes No

Are columns A and B ever on the same row? <div class="row"> <div class="col-sm-9">A</div> <div class="col-sm-4">B</div> </div>

No Since 9 + 4 = 13 which is > 12, the columns do not fit on the same row.

No The <div> tag requires a closing tag.

Assume the CSS below applies to each of the following. p span { background-color: yellow; } Will "text" appear highlighted? <span><p>text</p></span>

No The <span> element is outside the <p> element, so the <span> is not a descendant, and the selector does not match.

In the exercise above, the default radio buttons and checkboxes could have been hidden using the CSS display:none. Why is hiding the radio buttons and checkboxes with display:none not a good idea?

Screenreaders will think checkboxes are not visable

<title>

Tag that names the document.

Blue

The first two hexadecimal digits represent the red value, the second two digits the green value, and the last two digits the blue value. In #0000FF, the red (00) and green (00) values are both set to zero, and the blue value is set to the highest possible value (FF).

Which attribute inside the <label> tag is used to associate the label with a widget?

The for attribute contains the id attribute of the input element to be labeled.

Refer to the form below. <form method="POST" action="http://example.org/"> <input type="text" name="item"> <input type="text" name="price"> <input type="submit"> </form> What changes about the form data when enctype="multipart/form-data" is added to the <form> tag?

The form data is split into multiple parts instead of creating a single query string. The multipart/form-data is only necessary when submitting binary data with <input type="file">.

Below are reasons for using the alt attribute. Match the reason with the appropriate scenario. Handle Broken Image URLs

The image cannot be loaded from the specified location.

How will a website image that looks good on a standard display look like on a Retina display? The image will look pixelated or blocky. The image will look the same. The image will look sharper.

The image will look pixelated or blocky.

A polyfill is code that creates a browser fallback for a feature if the web browser does not support that feature. True False

True

A radial gradient is always an ellipse or circle. True False

True

A random website is more likely to have a visitor with low vision than a visitor who is totally blind. True False

True

A relational database can be used to store documents, objects, graphs, and key-value pairs. True False

True

A technician installs devices that measure and report water chemical concentrations, water level, pump status, and water flow through the filter system.

True

A transition can animate one or more CSS properties. True False

True

Developers use ASP.NET, Java, PHP, Python, Node.js, and Ruby on Rails to create web APIs. True False

True

Positive offset-x and offset-y make the shadow appear to the right and below the text, but negative values make the shadow appear to the left and above the text. True False

True

Refer to the CSS below. border-image: url(some-border.png) 50 repeat; 50 x 50 pixel sections of some-border.png are used to create the border image. True False

True

Refer to the CSS below. .special { position: absolute; left: 100px; top: 25px; } The <span> is displayed 100 pixels from the browser's left edge and 25 pixels from the browser's top edge. <body> <span class="special">Special</span> </body>

True

SCSS is syntactically different than the original Sass syntax. True False

True

SPAs generally result in less data being sent over the network than web applications developed with dynamically generated web pages. True False

True

mouse.jpg resizes when the <div> resizes. <div class="container-fluid"> <img src="mouse.jpg" class="img-fluid"> </div> True False

True

Refer to the CSS below. border-image: url(some-border.png) 50 repeat; If some-border.png is 50 x 50 pixels, then the border will have empty sides. True False

True Using the image's width and height for border-image-width and border-image-height shows the entire image in the border corners but does not leave any portion of the image to be used to display the border sides.

<a href="mailto:[email protected]">Get in touch</a> Loads a page over an unencrypted connection Encrypts the page load request and response Sends an email Opens a file

Sends an email

Refer to the HTML below. <form> <input type="checkbox" name="check1" checked> <input type="checkbox" name="check2"> <input type="radio" name="radio1" value="1" checked> <input type="radio" name="radio2" value="2"> <input type="radio" name="radio3" value="3"> <input type="submit"> </form> What is the minimum number of items that will be sent to the server?

1 Once a radio button is selected from a group, the browser will require one values to be selected from that group. The radio button cannot be unselected like a checkbox. So, the browser will minimally send the radio1 item.

Content-Length

number of bytes in the response's message body

What CSS Bootstrap class only affects an element's width? mb-0 w-50 table

w-50

What CSS Bootstrap class makes the text red? text-primary text-danger text-success

text-danger

text-decoration: underline

text-transform: capitalize

screen size

the diagonal measurement from one corner of the screen to the other

In what year did the number of Internet users surpass 3 billion?

2015

In what year did web browsing first become more likely on mobile rather than desktop?

2016

Flex Grow

Flex item property that indicates the growth factor of the flex item.

Flex-Shrink

Flex item property that indicates the shrink factor of the flex item.

What value is $points? $points = 4; $points /= 0;

INF

White

#FFFFFF

How many columns does A span? <div class="row"> <div class="col-sm">A</div> <div class="col-sm">B</div> </div>

6 The class col-sm does not have a number, so both columns have the same width and span half of the 12 columns that form a row.

What output is produced by the PHP script?<h1>This is a test</h1> echo "This is only a test"; <h1>This is a test</h1> echo "This is only a test"; <h1>This is a test</h1> This is only a test This is only a test

<h1>This is a test</h1> echo "This is only a test";

Create an empty table with the caption "Store Information".

<table><caption>Store Information</caption></table>

Which tag creates a widget capable of holding multiple lines of text?

Create a table cell with header of "hours".

<th> hours </th>

Create an empty table row with no content.

Which media query matches devices with a 320px width screen that are in landscape mode? @media screen and (device-width: 320px) and (orientation: landscape) { . . . } @media screen and (orientation: landscape) { . . . } @media screen and (device-width: 320px) { . . . }

@media screen and (device-width: 320px) and (orientation: landscape) { . . . }

Are human doctors or IBM's Watson more likely to keep up with new medical information in 2020? Human doctors IBM's Watson

Already in 2013, researchers estimated that a human doctor would need 160 hours per week to read the same amount of new information as Watson processed per week. As a result, by 2013 Watson already showed advantages in certain areas such as lung cancer diagnosis; Watson was correct 90% of the time, compared to 50% for human doctors.

A <fieldset> can group drop-down menus, buttons, and other widgets.

Any type of widget can be grouped in a <fieldset>. Fieldsets and legends benefit individuals that use assistive technologies like screen readers. CSS can be used to remove the rectangle if desired.

The W3C Markup Validator indicates the HTML below has an error. What deprecated tag is causing the error? <!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <title>Learning HTML</title> <body> <center>This page uses deprecated HTML.</center> </body> </html>

CSS should be used instead of <center> to center contents in a web page.

Last-Modified

Datetime the requested resource was last modified on the web server.

<picture> <source media="(min-width: 600px)" srcset="dog-wide.jpg, [email protected] 1.5x, [email protected] 2x"> <source media="(min-width: 400px)" srcset="dog.jpg, [email protected] 1.5x [email protected] 2x"> <img src="dog-narrow.jpg" srcset="[email protected] 1.5x, [email protected] 2x" alt="Dog"> </picture> What image is requested by a 1x device with width = 650px? dog-wide.jpg [email protected] dog-narrow.jpg

Dog Wide Screen with width = 650px has a minimum width of 600px, and dog-wide.jpg is requested because the other two images are for 1.5x and 2x screens.

td { background-color: yellow; } Element class id pseudo element descendant

Element

<a href="https://example.com/index.html">See example</a> Loads a web page over an unencrypted connection Encrypts the web page load request and response Sends an email Opens a file

Encrypts webpage

user agent

Identifies the browser making the request. Browsers often identify themselves using a unique string of characters. The User-Agent field may be used by a web server to respond back with different resources depending on which browser made the request. Ex: A desktop page may be sent back to a desktop Chrome browser, but a mobile web page may be sent back to an iPhone browser.

Server

Identifies the web server software that generated the response.

If Verdana is not available, the browser uses the Arial font for the <p> element. If neither Verdana nor Arial are available, the browser uses the generic font sans-serif.

onclick="changeTextColor('white')

Indicates that the JavaScript function changeTextColor() should be executed, with the value 'white'. Various functions can be called. Try replacingchangeTextColor('white')withalert('Hello'), and see what happens. alert() is a built-in JavaScript function.

Imput Type

Indicates which kind of widget is displayed by the browser.

<!DOCTYPE html>

Instruction to web browser that specifies the document type.

Determine if the following HTML is valid or invalid. <p>Mary had a  lamb. Its fleece was white as snow. Valid Invalid

Invalid

Determine if the following HTML is valid or invalid. You must read <em><cite>A Tale of Two Cities</em></cite>, one of the best selling books of all time.

Invalid

Determine if the following HTML is valid or invalid. <p>Roses are  red. Violets are  black.-->blue.</p> Valid Invalid

Invalid

figure img

Matches img elements contained in a figure element.

Assume the CSS below applies to each of the following. p span { background-color: yellow; } Will "text" in the first <li> element appear highlighted? <ol> <li>The <span>text</span> is highlighted.</li> <li>The text is not highlighted.</li> </ol>

No The <span> element in is not contained in a <p> element, so the <span> element is not a descendant, and the selector does not match.

Does the HTML follow the developer guidelines to always use closing tags and avoid self-closing tags? <address> John Smith 123 Main St. <br /> Anytown, USA </address> Yes No

No <br /> is a self-closing tag, but good practice is to just use <br>.

Which request method is used by the browser to submit web form data to the web server?

Post

Input Placeholder

Provides a hint to the user about the information being requested. Ex: A widget asking for the user's email address may set the placeholder to "Your email address".

The HTML that should be added to create a third button. That HTML can be placed just below: <button type="button" onclick="changeTextColor('green')">Green</button>

What HTTP header field is used to make a conditional request using a datetime?

The If-Modified-Since header field is used with the Last-Modified datetime to request that the web server send the requested resource if the resource has changed since the specified time. Ex: "If-Modified-Since: Wed, 01 Sep 2014 13:24:52 GMT" asks the web server to send the resource if the resource was modified after Sept 1, 2014 at 13:24:52 GMT.

Identify which CSS selector is used in each question. h1 + p Universal selector Multiple selector Child selector General sibling selector Adjacent sibling selector

The adjacent sibling selector consists of a selector, the plus character (+), and another selector. h1 + p matches the first p element following an h1 element, where the p and h1 elements are siblings.

Below are reasons for using the alt attribute. Match the reason with the appropriate scenario. Pass Validation

The alt attribute is required.

<em>

em indicates emphasized text, and is displayed as italics.

"123" === 123 true false

false

css

manages document presentation

.gov

top level domain

What is $value? $value: #ff1150 + 2;

#ff1352

HTML

Hypertext Markup Language

What grid-template-areas value makes the Article span 2 columns? "head head head" "nav article aside" "foot article foot" "head article head" "nav article article aside" "foot foot foot" "head head head" "nav article article" "foot foot foot"

"head head head" "nav article article" "foot foot foot" article appears twice in the second string, so Article spans 2 columns on the second row.

A single period can be used in a grid-template-areas value to represent an empty grid cell. Which grid-template-areas value places an empty grid cell under Nav? ". head head" "nav article aside" "foot foot foot" "head head head" "nav . aside" "foot foot foot" "head head head" "nav article aside" ". foot foot"

"head head head" "nav article aside" ". foot foot" The period is below nav, so the empty grid cell appears below Nav.

Which timing function makes the animation progress at the same speed the entire time? linear ease cubic-bezier

"linear" is the same speed throughout the animation.

What is $value? $value: #ff1150 - #001120;

#ff0030 #ff1150 - #001122 = ff - 00, 11 - 11, 50 - 20 = ff, 00, 30 = #ff0030.

Cause the element with the ID special to be displayed with the text color red. Blank { color: red; }

#special

Which variable is illegally named? $a1_ $null $2b_

$2b_ Variables may not start with a digit after $.

Which constant is illegally named? $A1_ _A1 TEST_23

$A1_ Constants may not begin with a $.

What tag is used for subchapter titles?

<h2>

2 > 10 || (3 % 2 != 2 && 5 > 0) true false

True

Is www.nasa.gov a valid URL?

If an image that is 50 x 50 logical pixels was modified for a 2 DPR display, how large is the new image? 50 x 50 25 x 25 100 x 100

100 x 100

<img src="dog-small.jpg" srcset="dog-medium.jpg 2x, dog-large.jpg 3x" alt="Dog"> A browser on a 3x screen downloaded dog-large.jpg, which was 300 x 225 pixels. What is the image size in logical pixels when displayed in the browser? 300 x 225 900 x 675 100 x 75

100 x 75 Because the screen is 3 DPR, the browser uses 300 / 3 = 100 logical pixels for the width and 225 / 3 = 75 logical pixels for the height.

If a column uses the class col-lg-6, how much of the row does the column occupy when the browser is 900px wide? 25% 50% 100%

100% The "lg" part of the class name means the column occupies the entire row when the browser is < 992px wide.

Which keyframe selector is equivalent to to? 0% 100% 50%

100% and to indicate the ending animation state.

What is $value? $value: random(3) * 100px; 0, 1, 2, or 3 1, 2, or 3 100px, 200px, or 300px

100px, 200px, or 300px

10pt

Put a 10 pixel gap between each row and 20 pixel gap between each column. grid-gap:________ ;

10px 20px The first number is the row gap (10px), and the second number the column gap (20px).

12 The<span>element uses the relative percentage font size of 120%, which is 120% of 10pt, or 12pt.

What is the total <div> height? <style> div { height: 100px; margin: 10px 5px; } </style> <div>How tall am I?</div

120 pixels : The total height of the element includes the content's height (100px) plus the thickness of padding (0px), border (0px), and margin on top (10px) and bottom (10px) sides of the element. Since the padding and border are not specified in the CSS rule, both have 0 thickness.

he default <strong> content width is 115px. What is the total <strong> width? <style> strong { width: 200px; margin: 5px; } </style> <strong>How wide am I?</strong>

125 Since<strong>is an inline element, thewidthproperty does not change the width. The total width is the content's width (115px) plus the margin thickness (2 × 5px).

<!DOCTYPE html> ( 1) <html lang="en"> ( 2) <title>Movies based on books</title> ( 3) <body> ( 4) <P>The following movies were based on books that ( 5) had been written previously. ( 6) <ol> ( 7) <li>The Wizard of Oz</li> ( 8) <li>Harry Potter and the Sorcerer's Stone</li> ( 9) <li>Willy Wonka and the Chocolate Factory</li> (10) </ol> (11) <p>Indicate which medium you think is better.</p> (12) <form action=http://example.org/bookVSmovie.html (13) method=post ><p>The Wizard of Oz</p> (14) <label for="wizOzBook">Book:</label> (15) <input type="radio" id="wizOzBook" name="wizOz" (16) value="wizBook" /> (17) <label for="wizOzMovie">Movie:</label> (18) <input type="radio" id="wizOzMovie" name="wizOz" (19) value="wizMovie" > (20) <p>Harry Potter and the Sorcerer's Stone:</p> (21) <label for="PotterBook">Book:</label> (22) <input type="radio" id="PotterBook" name="potter" (23) value="PotterBook" > (24) <label for="PotterMovie">Movie:</label> (25) <input type="radio" id="PotterMovie" name="potter" (26) value="PotterMovie" > (27) <p>Willy Wonka and the Chocolate Factory</p> (28) <label for="WonkaBook">Book:</label> (29) <input type="radio" id="WonkaBook" name="wonka" (30) value="WonkaBook" checked="checked" > (31) <label for="WonkaMovie">Movie:</label> (32) <input type="radio" id="WonkaMovie" name="wonka" (33) value="WonkaMovie" ><input type='submit'> (34) </form> (35) </body> (36) </html> Which line did not start a block element on a new line? 6 12 13 33

What is the total <div> width? <style> div { width: 100px; margin-left: 10px; margin-right: 15px; padding: 2px 5px 10px 20px; } </style> <div>How wide am I?</div>

150 pixels

The idea for generating links from within one document to other documents.

1945

The term HyperText invented.

1965

First web browser is created.

1990

The period when the web was first developed.

1990s

When was the first website published?

1991

The World Wide Web Consortium (W3C) created.

1994

When was Yahoo created?

1994

HTML 2.0 standard published.

1995

Indicate what precedes the given list item when rendered by the browser.Valid answers are the word bullet, or 1., 2., 3 <ol> <li>Apples <ol> <li>Red</li> <li>Green</li> </ol> </li> <li>Oranges</li> <li>Bananas</li> </ol> Oranges

Indicate what precedes the given list item when rendered by the browser.Valid answers are the word bullet, or 1., 2., 3 <ol> <li>Apples</li> <li>Oranges</li> </ol> Oranges

Refer to the HTML below. <form> <input type="checkbox" name="check1" checked> <input type="checkbox" name="check2"> <input type="radio" name="radio1" value="1" checked> <input type="radio" name="radio2" value="2"> <input type="radio" name="radio3" value="3"> <input type="submit"> </form> If the user clicks submit without changing anything in the form, how many items will be sent to the server?

2 The browser will send information for check1 and radio1, but not the other unchecked input widgets.

Make the B item occupy 2 rows and 2 columns in the bottom-right grid corner. Grid has 3 rows and 3 columns. B occupies bottom-right corner. #grid-item-b { grid-area: ______ ; }

2 / 2 / 4 / 4 The starting row and column lines are both 2, and ending row and column lines are both 4.grid-areais a shorthand property that can replace agrid-columnandgrid-rowdeclaration.

33 singles instead of doubles

How many websites existed in 2011?

350 million

In the example on the right, what z-index value would make the green square appear on top of the orange and blue squares? 1 2 4

4 Giving the green square a z-index greater than the orange and blue squares' z-index makes the green square appear on top.

Which status code is sent when the web server is denied permission to the requested URL?

403 forbidden frequently occurs when the URL corresponds to a directory that does not have directory listing permissions or a file that doesn't have read permissions.

Which status code is sent when the requested URL does not point to an existing resource on the web server?

404 can occur when the user mistypes a URL, a URL for a resource has changed, or a resource has been removed.

If #grid-container is modified, how wide is the second column? #grid-container { width: 600px; display: grid; grid-template-columns: 20% auto; }

480px

How many total HTTP requests does a browser send for a web page that contains four web resources: an image, a video, a CSS style sheet, and a JavaScript file?

Refer to the HTML below. <form> <input type="checkbox" name="check1" checked> <input type="checkbox" name="check2"> <input type="radio" name="radio1" value="1" checked> <input type="radio" name="radio2" value="2"> <input type="radio" name="radio3" value="3"> <input type="submit"> </form> What is the maximum number of items that can be sent to the server?

5 The name attribute for each radio button is different, so each radio button is in a different group. Thus, if the user checks all the boxes and radio buttons, the browser will send check1, check2, radio1, radio2, and radio3.

Which keyframe selector specifies the animation state when the animation is three quarters finished? 0% 50% 75%

75% is three quarters through the animation.

Change the text color to green for any text that is currently selected using the mouse. Blank { color: green; }

::selection

What selector must a CSS variable be declared in to have global scope?

:root

Write a heading for a book chapter titled "Introduction".

<h1>Introduction</h1>

Write an HTML fragment that creates a title for the fourth level of a document hierarchy. The title should be "Exquisite details".

<h4>Exquisite details</h4>

What does the DOM look like after the CSS and HTML below are rendered? span::before { content: "Before"; } <span>Test</span>

<span>BeforeTest</span> The ::before selector inserts the content immediately before the selected element's content.

Tag that surrounds presentational content in an HTML document.

<style>

Input Name

Allows the server to identify which data came from which widget.

body { background: green; } @media only screen and (min-width: 600px) { body { background: blue; } } @media only screen and (min-width: 800px) { body { background: red; } } Which of the media queries evaluate to true on a desktop browser that is 900px wide? Neither of the media queries. The second media query only. Both media queries.

Both media queries.

How many cars, machines, meters, and other IoT devices did Cisco, a major network equipment manufacturer, predict would be connected to the Internet in 2020?

Cisco predicts 49 billion IoT devices will be used in 2020. Both accurate measurement and prediction are very hard in such a rapidly growing field, so the trend is more important than the actual predicted numbers.

Before a TCP connection is created, the web browser performs a/an ______. HTTP request HTTP response DNS lookup

DNS The browser performs a DNS lookup so the browser can establish a TCP connection with the web server.

td img { background-color: yellow; } Element class id pseudo element descendant

Desendant

A website should serve a 3x image to a 2 DPR device even if a 2x image is available. True False

False

An <h3> tag should be placed inside a <p> tag. True False

False

Assuming no other CSS properties apply to the images below, the images appear directly next to each other. <img src="dog.jpg" class="img-fluid"> <img src="cat.jpg" class="img-fluid">

False

CSS front-end frameworks are required to build responsive websites that work well on mobile devices. True False

False

Color blindness is so rare that web developers do not have to consider the issue when selecting colors for a web page. True False

False

If <h1> text appears too big, <h2> or <h3> tags should be used to decrease the text size. True False

False

If a web server is down (such as powered off), the server may return a page saying to please try again later. True False

False

If disk cache is disabled, the cache remains disabled when the DevTools are closed. True False

False

RWD uses JavaScript to alter the page contents to fit the browser. True False

False

Relational databases will likely not be used for many web applications in the future. True False

False

SVG is ideal for photographs. True False

False

The pool company will not know that the water level is too low unless the customer calls or someone happens to check the system status web page. True False

Fasle When the company server receives data indicating that the water level is dangerously low, the server can create an entry in the problem-reporting system. Email and text messages can be automatically sent if the problem is not responded to quickly enough.

x=document.getelementbyid('Colorable')

Finds the element with id 'Colorable', and sets x to that element. x can then be used to change that element's attributes, like color. document.getElementById() is a built-in JavaScript function to find HTML elements, so the elements can be updated.

Justify-content

Flex container property that defines the alignment of the flex items.

flex-direction

Flex container property that indicates which direction the flex items are placed in the flex container.

<!DOCTYPE html> <html lang="en"> <title>Presidential Facts</title> <style> body { color: blue; } div { color: green; } </style> <body>  </body> </html> What color is the text? <div>George Washington did not have a middle name. Middle names were not common in the colonies until the early 19th century.</div>

Green

If all three squares are given the same z-index value of 5, which square appears on top? orange blue green

Green When all z-index values are equal, the browser renders each square in the order the squares appear in the HTML, as shown on the left side of the figure.

<body>

HTML content displayed by the browser.

Where can the HTTP header field If-None-Match be found?

HTTP Request: The browser sends the If-None-Match header field with the ETag to the web server in the HTTP request.

<!DOCTYPE html> <html lang="en"> <link href="hello.css" rel="stylesheet"> <style> p { color: black; } </style> <title>A Sample CSS Page</title> <body> <p>Hello, <span style="color: green">World</span>!</p> <p style="color: inherit">Good day</p> </body> </html> hello.css: body { color: red; } What color: Hello: World: Good day:

Hello: Black due to P /style World: green due to inline style Good day: good day red due to inline style inherent

HTTP

Hyperlink used to send requests and responses over the Internet without encryption.

https

Hyperlink used to send requests and responses that are readable only by the client and server.

FTP

Hyperlink used to transfer data files.

Could the following statements be true about an IoT-based system used to monitor a swimming pool for a pool service company?

I dont fukcing know

Which browser lost the most market share between 2010 and 2015? Safari Chrome IE (Internet Explorer)

<!DOCTYPE html> ( 1) <html lang="en"> ( 2) <title>Movies based on books</title> ( 3) <body> ( 4) <P>The following movies were based on books that ( 5) had been written previously. ( 6) <ol> ( 7) <li>The Wizard of Oz</li> ( 8) <li>Harry Potter and the Sorcerer's Stone</li> ( 9) <li>Willy Wonka and the Chocolate Factory</li> (10) </ol> (11) <p>Indicate which medium you think is better.</p> (12) <form action=http://example.org/bookVSmovie.html (13) method=post ><p>The Wizard of Oz</p> (14) <label for="wizOzBook">Book:</label> (15) <input type="radio" id="wizOzBook" name="wizOz" (16) value="wizBook" /> (17) <label for="wizOzMovie">Movie:</label> (18) <input type="radio" id="wizOzMovie" name="wizOz" (19) value="wizMovie" > (20) <p>Harry Potter and the Sorcerer's Stone:</p> (21) <label for="PotterBook">Book:</label> (22) <input type="radio" id="PotterBook" name="potter" (23) value="PotterBook" > (24) <label for="PotterMovie">Movie:</label> (25) <input type="radio" id="PotterMovie" name="potter" (26) value="PotterMovie" > (27) <p>Willy Wonka and the Chocolate Factory</p> (28) <label for="WonkaBook">Book:</label> (29) <input type="radio" id="WonkaBook" name="wonka" (30) value="WonkaBook" checked="checked" > (31) <label for="WonkaMovie">Movie:</label> (32) <input type="radio" id="WonkaMovie" name="wonka" (33) value="WonkaMovie" ><input type='submit'> (34) </form> (35) </body> (36) </html> Which guideline is violated in lines 7-9? Start block elements on new lines Indent nested elements consistently Separate content from presentation and functionality Validate HTML

Indent nested elements consistently

<!DOCTYPE html> ( 1) <html lang="en"> ( 2) <title>Movies based on books</title> ( 3) <body> ( 4) <P>The following movies were based on books that ( 5) had been written previously. ( 6) <ol> ( 7) <li>The Wizard of Oz</li> ( 8) <li>Harry Potter and the Sorcerer's Stone</li> ( 9) <li>Willy Wonka and the Chocolate Factory</li> (10) </ol> (11) <p>Indicate which medium you think is better.</p> (12) <form action=http://example.org/bookVSmovie.html (13) method=post ><p>The Wizard of Oz</p> (14) <label for="wizOzBook">Book:</label> (15) <input type="radio" id="wizOzBook" name="wizOz" (16) value="wizBook" /> (17) <label for="wizOzMovie">Movie:</label> (18) <input type="radio" id="wizOzMovie" name="wizOz" (19) value="wizMovie" > (20) <p>Harry Potter and the Sorcerer's Stone:</p> (21) <label for="PotterBook">Book:</label> (22) <input type="radio" id="PotterBook" name="potter" (23) value="PotterBook" > (24) <label for="PotterMovie">Movie:</label> (25) <input type="radio" id="PotterMovie" name="potter" (26) value="PotterMovie" > (27) <p>Willy Wonka and the Chocolate Factory</p> (28) <label for="WonkaBook">Book:</label> (29) <input type="radio" id="WonkaBook" name="wonka" (30) value="WonkaBook" checked="checked" > (31) <label for="WonkaMovie">Movie:</label> (32) <input type="radio" id="WonkaMovie" name="wonka" (33) value="WonkaMovie" ><input type='submit'> (34) </form> (35) </body> (36) </html> Which guideline is violated on line 2? Use closing tags Start block elements on new lines Indent nested elements consistently Use CSS for layout

Indent nesting The title element should be indented since the title is within the html element.

<a href="example.com/index.html">See example</a> Valid Invalid

Invalid The href attribute URL should include a scheme, such as https, when the URL includes a hostname.

<a href="http://example.com/index.html">See example</a> Loads a page over an unencrypted connection Encrypts the page load request and response Sends an email Opens a file

Loads a page over an unencrypted connection

Does the HTML follow the developer guidelines for block-level and inline elements? <h1>Olympics</h1><p>The IOC organises the modern summer and winter Olympic Games and Youth Olympic Games held every four years.</p> Yes No

No p needs a new line

<input type="checkbox" checked> Use quotes around attribute values Use double quotes No guideline violations

No violations

What does the element using the keyframes below look like at the end of the animation? @keyframes example { from { transform: rotate(-45deg) scale(0.5, 0.5); } to { transform: rotate(45deg) scale(1.5, 1.5); } }

Rotated 25 degrees and scaled larger

What does the <p> look like when the mouse clicks the element? p { transition: all 1s; } p:hover { transform: translate(10px, 0); } p:active { transform: scale(2, 2); }

Scaled Larger

Below are reasons for using the alt attribute. Match the reason with the appropriate scenario. Support assistive technology

Software, such as page readers, help users with vision or cognitive impairments.

A browser that is only capable of playing MP3 audio will download which file? <audio controls> <source src="sound.ogg"> <source src="sound.mp3"> </audio> sound.mp3 sound.ogg

Sound.mp3

Identify the steps used in an HTTPS transaction.

Step 1 The URL must begin with "https://". Correct Web server sends digital certificate to the browser. Step 2 The browser warns the user if the digital certificate is not from a trusted certificate authority. Correct The browser and web server initiate an "SSL handshake". Step 3 The browser and web server use the SSL handshake to generate session keys used to encrypt and decrypt information. Correct The browser and web server transmit encrypted information. Step 4 The encrypted information can only be decrypted by the browser and web server.

If a column uses the class col-lg-6, how much of the row does the column occupy when the browser is 1000px wide? 50% 60% 100%

The "lg" part of the class name indicates the class is for large devices. The column occupies 6/12 or 50% of the row when the browser is ≥ 992px wide.

<p>James Bond is known to drive the <span class="mfg">Aston Martin</span> DB5. Below are a few cars James Bond has driven in recent Bond films according to <a href="https://en.wikipedia.org/wiki/List_of_James_Bond_vehicles">Wikipedia</a>.</p> <ol> <li><cite>Casino Royale</cite> (2006) <ul> <li><span class="mfg">Bentley</span> 4.5 Litre</li> <li><span class="mfg">Aston Martin</span> DB5</li> </ul> </li> <li><cite>Quantum of Solace</cite> (2008) <ul> <li><span class="mfg">Aston Martin</span> DBS V12</li> </ul> </li> <li><cite>Skyfall</cite> (2012) <ul> <li><span class="mfg">Jaguar</span> XJ (X351)</li> <li><span class="mfg">Mercedes</span> S400</li> <li><span class="mfg">Aston Martin</span> DB5</li> </ul> </li> <li><cite>Spectre</cite> (2015) <ul> <li><span class="mfg">Aston Martin</span> DB10</li> </ul> </li> </ol> What selector matches all elements with the mfg class attribute?

The *.mfg and .mfg universal selectors match all elements with the mfg class attribute.

Which element can create a button with an image?

The <button> element gives developers more control over the button's appearance than the <input> element.

What CSS selector selects only text inputs? input input[type=text] input[type=text], select

The attribute selector selects only <input type="text"> elements.

What color is #thing's font right as the animation completes? #thing { animation: changeColors 4s ease 1s 2 reverse; } @keyframes changeColors { 0% { color:red; } 50% { color:blue; } 100% { color:green; } }

The animation direction is reverse, so the 100% keyframe is first, and the 0% keyframe is last. The 0% keyframe makes the font color red.

The child selector ol > li matches list items that are direct children of ordered lists, but will not match the list items of an unordered list.

How wide must the browser be to display A and B each occupying 50% of the row? <div class="row"> <div class="col-md-9 col-sm-6">A</div> <div class="col-md-3 col-sm-6">B</div> </div>

The col-sm classes apply when the browser is ≥ 576px wide, and the col-md classes apply when the browser is ≥ 768px wide.

What is the grid's width if the browser is 800px wide? <div class="container"> <div class="row"> <div class="col-sm-10">A</div> <div class="col-sm-2">B</div> </div> </div>

The container class makes the width 768px when the browser width is ≥ 768px and < 992px. The breakpoints 576px, 768px, 992px, and 1200px are used to determine the grid width.

Host

The domain name for the requested path. Some websites are hosted at the same IP address, so the Host field helps the web server determine which website's resource is being requested.

The first line is indented 20px to the right.

In the example above, what visual cues help the user to know that the blue rectangle with "Register" in the middle is a button that can be pressed? The button has rounded corners. The pointer icon appears when hovering over the button. The pointer icon appears, and the button color changes when hovering over the button.

The pointer icon and color change lets the user know the area is a clickable button.

cascading

The process of combining multiple style rules and resolving conflicting styles.

Mobile First

The technique of creating mobile websites first and then progressively enhancing them to create the desktop version.

In the example above, what happens if box-sizing:content-box is added to the input[type=text], select selector?

The text and drop down menu become wider

Identify which CSS selector is used in each question. *.hide Universal selector Multiple selector Child selector General sibling selector Adjacent sibling selector

The universal selector uses an asterisk (*) to match any tag name.

Which is NOT a required attribute for images? src alt title

Title

A 1x image looks pixelated on a 2 DPR device. True False

True

Refer to the CSS below. .special { position: absolute; left: 100px; top: 25px; } If the "container" class uses fixed positioning, the <span> will not scroll with the page contents. <div class="container"> <span class="special">Special</span> </div>

True Fixed elements do not scroll, so elements positioned relative to a fixed element do not scroll.

A zero spread-radius makes the shadow the same size as the box. True False

True Positive spread-radius values make the shadow grow bigger, and negative values make the shadow grow smaller.

Multiple shadows can apply to the same text. True False

True The CSS below shows two shadows applied to the same text.<p style="text-shadow: 0 0 3px red, 0 0 6px purple;">Two shadows</p>

A plug-in is often required to play media embedded in a web page using <embed> or <object>. True False

True Without the plug-in, the browser is unable to play the media.

("bat" <=> "ball") > 0 true false

True "bat" > "ball", so <=> returns a number > 0.

A website should use an external stylesheet to create styles that apply to all web pages. True False

True An external stylesheet can be imported into all the website's pages to keep the website's fonts, colors, etc. consistent. If a style must be changed in the future, updating the external stylesheet updates the entire website.

.special { position: fixed; left: 100px; top: 25px; } All elements using the "special" class are displayed 100 pixels from the browser's left edge and 25 pixels from the browser's top edge. True False

True Fixed positioning fixes the element's position in the browser.

In the example above, removing the background-repeat property causes the background image to display repeatedly on the search input. True False

True Setting background-repeat:no-repeat turns off the default repeating pattern.

The default value for the target attribute is _self. True False

True By default when a hyperlink is clicked, the web browser will open the hyperlink in the same tab or window.

If two elements are horizontally adjacent to each other and both have margin:20px, the total margin between the two elements is 40px. True False

True Horizontal margins do not collapse, so the margins combine to 40px.

A fluid layout widens to fit the browser's width. True False

True Most websites use fluid layouts because fluid layouts make optimal use of the entire browser window.

Setting the viewport meta tag property user-scalable=no disables zooming. True False

True Zoom is typically only disabled for games since zoom aids accessibility in most web pages.

Refer to the CSS below. .special { position: absolute; left: 100px; top: 25px; } Elements using the "special" class that do not have a positioned ancestor will scroll with the page contents. True False

True and who ****ing knows why

The audio element can play audio as soon as the audio file has downloaded to the browser. True False

True use autoplay attriubute

The size of the video displayed by a video element is configurable. True False

True width=""

<!DOCTYPE html> ( 1) <html lang="en"> ( 2) <title>Movies based on books</title> ( 3) <body> ( 4) <P>The following movies were based on books that ( 5) had been written previously. ( 6) <ol> ( 7) <li>The Wizard of Oz</li> ( 8) <li>Harry Potter and the Sorcerer's Stone</li> ( 9) <li>Willy Wonka and the Chocolate Factory</li> (10) </ol> (11) <p>Indicate which medium you think is better.</p> (12) <form action=http://example.org/bookVSmovie.html (13) method=post ><p>The Wizard of Oz</p> (14) <label for="wizOzBook">Book:</label> (15) <input type="radio" id="wizOzBook" name="wizOz" (16) value="wizBook" /> (17) <label for="wizOzMovie">Movie:</label> (18) <input type="radio" id="wizOzMovie" name="wizOz" (19) value="wizMovie" > (20) <p>Harry Potter and the Sorcerer's Stone:</p> (21) <label for="PotterBook">Book:</label> (22) <input type="radio" id="PotterBook" name="potter" (23) value="PotterBook" > (24) <label for="PotterMovie">Movie:</label> (25) <input type="radio" id="PotterMovie" name="potter" (26) value="PotterMovie" > (27) <p>Willy Wonka and the Chocolate Factory</p> (28) <label for="WonkaBook">Book:</label> (29) <input type="radio" id="WonkaBook" name="wonka" (30) value="WonkaBook" checked="checked" > (31) <label for="WonkaMovie">Movie:</label> (32) <input type="radio" id="WonkaMovie" name="wonka" (33) value="WonkaMovie" ><input type='submit'> (34) </form> (35) </body> (36) </html> Which guideline is violated on line 30? Use closing tags Use boolean attributes concisely Start block elements on new lines Indent nested elements consistently

Use boolean attributes concisely checked

<!DOCTYPE html> ( 1) <html lang="en"> ( 2) <title>Movies based on books</title> ( 3) <body> ( 4) <P>The following movies were based on books that ( 5) had been written previously. ( 6) <ol> ( 7) <li>The Wizard of Oz</li> ( 8) <li>Harry Potter and the Sorcerer's Stone</li> ( 9) <li>Willy Wonka and the Chocolate Factory</li> (10) </ol> (11) <p>Indicate which medium you think is better.</p> (12) <form action=http://example.org/bookVSmovie.html (13) method=post ><p>The Wizard of Oz</p> (14) <label for="wizOzBook">Book:</label> (15) <input type="radio" id="wizOzBook" name="wizOz" (16) value="wizBook" /> (17) <label for="wizOzMovie">Movie:</label> (18) <input type="radio" id="wizOzMovie" name="wizOz" (19) value="wizMovie" > (20) <p>Harry Potter and the Sorcerer's Stone:</p> (21) <label for="PotterBook">Book:</label> (22) <input type="radio" id="PotterBook" name="potter" (23) value="PotterBook" > (24) <label for="PotterMovie">Movie:</label> (25) <input type="radio" id="PotterMovie" name="potter" (26) value="PotterMovie" > (27) <p>Willy Wonka and the Chocolate Factory</p> (28) <label for="WonkaBook">Book:</label> (29) <input type="radio" id="WonkaBook" name="wonka" (30) value="WonkaBook" checked="checked" > (31) <label for="WonkaMovie">Movie:</label> (32) <input type="radio" id="WonkaMovie" name="wonka" (33) value="WonkaMovie" ><input type='submit'> (34) </form> (35) </body> (36) </html> Which guideline is violated in line 4? Use closing tags Start a block element on a new line Use lowercase for all tags and attributes

Use lowercase for all tags and attributes

<a href="course.html#Notes">Notes</a> Valid Invalid

Valid

<a href="file:///Users/example/index.html">Another example</a> Valid Invalid

Valid

<a href="https://cnn.com">News</a> Valid Not valid

Valid

<a href="https://example.com/index.html#History"> History</a> Valid Invalid

Valid

<a href="https://example.org/index.html"> <img src="https://example.org/picture.jpg" alt="Picture of cat"></a> Valid Invalid

Valid

<a href="https://www.youtube.com/watch?v=uu7XCEMdSHg">News</a> Valid Not valid

Valid

Determine if the following HTML is valid or invalid. <em>You must read <cite>A Tale of Two Cities</cite>, one of the best selling books of all time.</em> Valid Invalid

Valid

Determine if the following HTML is valid or invalid. <p>Bananas grow  on a tree.</p> Valid Invalid

Valid

Determine if the following HTML is valid or invalid. <p>This sentence does  contain a comment</p> Valid Invalid

Valid

Determine if the following HTML is valid or invalid. You <em>must</em> read <cite>A Tale of Two Cities</cite>, one of the best selling books of all time.

Valid

This is the first verse.<br/>The second verse begins on the next line. Valid Invalid

Valid <br/> is part of XHTML, a version of HTML that is legal for use with XML. Although <br/> is permitted in HTML5, good practice is to use <br>.

<P>A short paragraph.</P> Valid Invalid

Valid While uppercase tags are valid, good practice uses lowercase: <p> </p>.

<img src=birthday.jpg alt=Birthday> Valid Invalid

Valid quotes are not needed but recomended

Verdana If available to the browser, the Verdana font family is used for the <p> element. Otherwise, the browser will try Arial, and then the generic font sans-serif.

Affordences

Visual clues that guide the user in figuring out how to use an app. Affordances, a term invented by usability expert Donald Norman, are harder to implement for mobile devices. For instance, few mobile devices support a touch screen equivalent of hovering with a mouse. So, hovering-based interfaces like tooltips are unavailable on touch based devices.

Which code segment produces a notice error message? $count = 2; echo $COUNT; $count = 2; ECHO $count; Both code segments produce notice errors.

<!DOCTYPE html> <html lang="en"> <title>Presidential Facts</title> <style> body { color: blue; } div { color: green; } </style> <body>  </body> </html> What color is the text? <p style="color:yellow">George Washington was president from 1789 until 1797.</p>

Yellow

<picture> <source media="(min-width: 600px)" srcset="dog-wide.jpg, [email protected] 1.5x, [email protected] 2x"> <source media="(min-width: 400px)" srcset="dog.jpg, [email protected] 1.5x [email protected] 2x"> <img src="dog-narrow.jpg" srcset="[email protected] 1.5x, [email protected] 2x" alt="Dog"> </picture> Can the <source> element use the "sizes" attribute like the <img> does? Yes No

Yes

Assume the CSS below applies to each of the following. p span { background-color: yellow; } Will "text" appear highlighted in both <span> elements? <p> <span>text</span> <span><em>text</em></span> </p>

Yes

Assume the CSS below applies to each of the following. p span { background-color: yellow; } Will "text" appear highlighted? <p><em><span>text</span></em></p>

Yes

Does the HTML follow the developer guidelines to consistently indent nested elements? <tr> <td>Hematocrit</td> <td>34.9-44.5%</td> <td>38.8-50.0%</td> </tr>

Yes

Does the HTML follow the developer guidelines to use boolean attributes concisely? <select> <option selected>Pick an option below</option> <option>Lions</option> <option>Tigers</option> <option>Bears</option> <option>Oh, my!</option> </select>

Yes

Must PHP statements be terminated by a semicolon? Yes No

Yes

Should column classes always be nested inside of a row class? Yes No

Yes

A drop-down menu only allows one option to be selected.

Yes If the multiple attribute is set in the <select> tag, the drop-down menu changes into a list box. Only a list box allows users to select multiple options.

Does the HTML follow the developer guidelines for block-level and inline elements? <label for="city">City:</label> <input type="text" name="city" id="name"> Yes No

Yes Neither <label> nor <input> are block elements, so these elements may appear on the same line. However, each element is nearly a full-line and putting both elements on the same line impairs readability.

p>We have updated our company logo to <img src="new-logo.jpg" alt="New company logo"> from the older logo of <img src="old-logo.jpg" alt="Old company logo"></p>

Yes The <p> tag holds content and is closed, but the <img> tag does not require a closing tag.

Assume the CSS below applies to each of the following. p span { background-color: yellow; } Will "text" appear highlighted?

Yes The descendant selector matches the <span> element contained in the <p> element, so "text" will appear highlighted.

Does the following HTML pass the HTML validator with no errors or warnings? <!DOCTYPE html> <html lang="en"> <title>Test page</title> <p>Does this page pass the validator test?</p> </html>

Yes all good

Does the HTML follow the developer guidelines to separate content from presentation and functionality? <html> <link rel="stylesheet" href="main_style.css"> <body> <p>A page with style!</p> </body> </html>

Yes linked stylesheet

What does the code output? $test = "adios"; echo "$test test";

adios test

Center each grid items vertically in the grid. ________: center;

align-content Thealign-contentproperty can also use valuesstartandendto align the grid items flush to the starting edge or ending edge of the grid.

time widget

allows entering time and makes sure its valid

datetime-local

allows input of date and time widget

month widget

allows month and year

week widget

allows week and year

Create a border for images where the alt attribute starts with test. <img src="pic1.jpg" width="50" height="50" alt="testing"> img[ ] { border: red 1px solid; }

alt^="test" Selects img elements if the word test appears at the beginning of the alt attribute.

Provide the CSS value that correctly styles the example text as displayed. Gears and Pulleys The untold story of power transference. text-align:

center

The W3C Markup Validator indicates the HTML below has an error. What attribute is missing from <meta>? <!DOCTYPE html> <html lang="en"> <meta> <title>Learning HTML</title> <body>Some HTML tags have attributes.</body> </html>

charset

Identify which CSS selector is used in each question. p > img Universal selector Multiple selector Child selector General sibling selector Adjacent sibling selector

child selector p > img matches any img element that is contained directly inside a p element.

cite, span, a The multiple selectorcite, span, amatches all cite, span, and a elements.

<img src="dog400.jpg" sizes="(min-width: 700px) 30vw, (min-width: 500px) 60vw, 100vw" srcset="dog200.jpg 200w, dog400.jpg 400w, dog800.jpg 800w, dog1600.jpg 1600w, dog2000.jpg 2000w"> What image is requested by a 1x device with width = 600px? dog200.jpg dog400.jpg dog800.jpg

dog400.jpg

<img src="dog400.jpg" sizes="(min-width: 700px) 30vw, (min-width: 500px) 60vw, 100vw" srcset="dog200.jpg 200w, dog400.jpg 400w, dog800.jpg 800w, dog1600.jpg 1600w, dog2000.jpg 2000w"> What image is requested by an old browser that does not know what the "sizes" and "srcset" attributes are? dog400.jpg dog800.jpg dog2000.jpg

dog400.jpg An old browser will ignore attributes the browser doesn't recognize and use the "src" attribute to download the image.

<img src="dog400.jpg" sizes="(min-width: 700px) 30vw, (min-width: 500px) 60vw, 100vw" srcset="dog200.jpg 200w, dog400.jpg 400w, dog800.jpg 800w, dog1600.jpg 1600w, dog2000.jpg 2000w"> What image is requested by a 3x device with width = 800px? dog800.jpg dog1600.jpg dog2000.jpg

dog800.jpg Screen with width = 800px has a minimum width of 700px, so image width in logical pixels needed = 800px × 30% = 240px. Image width in device pixels needed = 240px × 3 = 720px, so the best available image is dog800.jpg.

<img src="dog400.jpg" sizes="(min-width: 700px) 30vw, (min-width: 500px) 60vw, 100vw" srcset="dog200.jpg 200w, dog400.jpg 400w, dog800.jpg 800w, dog1600.jpg 1600w, dog2000.jpg 2000w"> What image is requested by a 2x device with width = 400px? dog200.jpg dog400.jpg dog800.jpg

dog800.jpg Screen with width = 400px doesn't match either media query, so image width in logical pixels needed = 400px × 100% = 400px. Image width in device pixels needed = 400px × 2 = 800px, so the best available image is dog800.jpg

<picture> <source media="(min-width: 600px)" srcset="dog-wide.jpg, [email protected] 1.5x, [email protected] 2x"> <source media="(min-width: 400px)" srcset="dog.jpg, [email protected] 1.5x [email protected] 2x"> <img src="dog-narrow.jpg" srcset="[email protected] 1.5x, [email protected] 2x" alt="Dog"> </picture> What image is requested by a 2x device with width = 400px? dog.jpg [email protected] dog-narrow.jpg

[email protected] Screen with width = 400px has a minimum width of 400px, and [email protected] is chosen for a 2x device.

cnn.com is an example of a/an _____.

domain name

The var_dump(variable) function outputs the data type of a variable. What is the output of the code below? $x = 1.23; var_dump($x);

float(1.23) 1.23 has a decimal place, so 1.23 is a floating point number.

Refer to the HTML below. <form action="https://google.com/"> </form> To which server will the browser send the form data? Which method will the browser use to communicate with the server?

google.com GET because it is default when unspecified

Add a CSS declaration to #grid-container so the first row is 20 pixels tall and the second row is 30 pixels tall. __________: 20px 30px;

grid-template-rows The grid-template-rows property sets the height of the first 2 rows to 20px and 30px. The height of the grid container is larger than the combined height of the grid items, so the grid container's background color displays at the grid bottom.

<h3>

h indicates a heading. h1 is first-level heading. h2 is the second-level heading and is displayed a little smaller, h3 is the third-level and is displayed even smaller, but usually slightly larger than normal paragraph text.

Cause all heading 1 text to be displayed with the bold font-weight attribute. Blank { font-weight: bold; }

Does the HTML follow the developer guidelines to use boolean attributes concisely? <div hidden="hidden"> Yes No

hidden is a boolean attribute, and should not be assigned as value. <div hidden> should be used.

Which scheme should a URL use to provide a secured HTTP connection to a web server? http https

https

What tag includes a picture in a web page? <image> <img> <pict>

img

Provide the CSS display value that correctly styles the following HTML as displayed. <style> .animal { background: yellow; width: 50px; height: 40px; display: ...; } </style> My favorite breed of <span class="animal">cat</span> is Russian Blue. 1) My favorite breed of cat (yellow) is Russian Blue. display:

inline

Which CSS selector selects only checkboxes that are checked? input:checked input[type=checkbox]:focus input[type=checkbox]:checked

input[type=checkbox]:checked

Refer to the form below. <form method="GET" action="http://example.org/"> <input type="text" name="item"> <input type="text" name="price"> <input type="submit"> </form> 1) What is the query string if the user submits "bananas" and "2.50" in the text boxes? What URL does the browser request if the user submits "bananas" and "2.50" in the text boxes?

item=bannanas&price=2.50 http://example.org?item=bannanas&price=2.50

<ol class="numbers"> <li id="first">First number</li> <li id="second">Second number</li> <li id="third">Third number</li> </ol> <ul class="bullets"> <li>A <span class="bullet">bullet</span></li> <li>Another <span class="bullet">bullet</span></li> <li>Last <span class="bullet">bullet</span></li> </ul> What CSS selector matches all the <li> elements?

li The element selector li matches the <li> elements of the ordered and unordered lists.

Make the first letter uppercase in all list items. <li>Bread</li> { text-transform: uppercase; }

li::first-letter

Create a combo box that uses the datalist with id "states". <input ="states">

list

What URL plays a YouTube video automatically? https://www.youtube.com/embed/g4hvUvBmoaA https://www.youtube.com/embed/g4hvUvBmoaA?autoplay=1 https://www.youtube.com/embed/g4hvUvBmoaA?autoplay=1&mute=1

make it muted so people dont get anoyyed

What CSS declaration sets the margin to have a uniform space of 20 pixels?

margin:20px

Ensure that the date entered will not be greater than the end of 2025. <input type="date" ="2025-12-31">

max

What CSS Bootstrap class only affects an element's margin? mb-0 width table

mb-0

Ensure the user types a valid number between 0 and 10. <input type="" min="0" max="10">

number

Does a 304 response generally contain a message body?

no 304 indicates the cached content is up-to-date, so re-sending the same content to the browser is unnecessary.

Does the following HTML pass the HTML validator with no errors or warnings? <!DOCTYPE html> <html lang="en"> <h1>Test page</h1> <p>Does this page pass the validator test?</p> </html>

no Although the <head> tag is not required and will be generated automatically by the browser, the <title> tag is required, so the validator generates an error.

Does the HTML follow the developer guidelines to separate content from presentation and functionality? <html> <style>p { color: blue }</style> <body> <p>Once in a blue moon!</p> </body> </html>

no An embedded style separates style from content within the HTML, but an external style sheet allows CSS presentation to be shared by multiple pages. So, an external style sheet is preferred over embedded styles.

Does the HTML follow the developer guidelines to use lowercase for tags and attributes? <img Src="https://apple.com/apple.jpg"> Yes No

no Attributes should be lowercase, including the first character.

Does the HTML follow the developer guidelines to use lowercase for tags and attributes? <H1>Table of Contents</H1> Yes No

no Even <h1> tags should use lowercase. Although HTML tags may be lowercase or uppercase, most web developers only use lowercase tags.

Does the HTML follow the developer guidelines to provide labels and placeholders? May we add you to our mailing list? <br> <label for="optInYes">Yes</label> <input placeholder="Add me" type="radio" name="optIn" id="optInYes" value="true"> <label for="optInNo">No</label> <input placeholder="Do not add me" type="radio" name="optIn" id="optInNo" value="false">

no Placeholders cannot be used with radio buttons. Placeholders are only needed for elements that allow placeholders.

Does the HTML follow the developer guidelines to use boolean attributes concisely?

no The disabled attribute is a boolean attribute that is assigned a value. The concise usage is: <button type="submit" disabled>

Does the HTML follow the developer guidelines for block-level and inline elements? <h1>Olympics</h1> <p>The <em>IOC</em> organises the modern Olympic Games and Youth Olympic Games, held in summer and winter, every four years. The first Summer Olympics organised by the IOC was held in Athens, Greece, in 1896</p> Yes No

no While the <h1> and <p> block tags start on new lines, <em> is an inline tag and and may continue on the same line.

Does the HTML follow the developer guidelines to consistently indent nested elements? <form> <label for="name">Name:</label> <input type="text" id="name" name="name"> <label for="address">Address:</label> <input type="text" id="address" name="address"> <label for="city">City:</label> <input type="text" id="city" name="city"> </form>

no inconsistent

Does the HTML follow the developer guidelines to separate content from presentation and functionality? <button onclick="return process_data()">Process Data</button> Yes No

no javascript in the code

Does the HTML follow the developer guidelines to consistently indent nested elements? The all-time top grossing movies domestically<ol> <li>Avatar</li> <li>Titanic</li> <li>Jurassic World</li> </ol>

no li isnt indented

Does the HTML follow the developer guidelines to provide labels and placeholders? <input type="text" name="favoriteSport" id="sport"> Yes No

no there is no placeholder

ol, ul The multiple selectorol, ulmatches ordered and unordered lists.

Add a red asterisk at the end of each paragraph. <p>Turn the switch on.</p> { content: "*"; color: red; }

p::after

What CSS declaration changes the right padding to be 10 pixels wide?

padding-right: 10px

What CSS declaration changes the top and bottom padding to be 20 pixels and right and left to be 30 pixels?

padding: 20px 30px

<!DOCTYPE html> ( 1) <html lang="en"> ( 2) <title>Movies based on books</title> ( 3) <body> ( 4) <P>The following movies were based on books that ( 5) had been written previously. ( 6) <ol> ( 7) <li>The Wizard of Oz</li> ( 8) <li>Harry Potter and the Sorcerer's Stone</li> ( 9) <li>Willy Wonka and the Chocolate Factory</li> (10) </ol> (11) <p>Indicate which medium you think is better.</p> (12) <form action=http://example.org/bookVSmovie.html (13) method=post ><p>The Wizard of Oz</p> (14) <label for="wizOzBook">Book:</label> (15) <input type="radio" id="wizOzBook" name="wizOz" (16) value="wizBook" /> (17) <label for="wizOzMovie">Movie:</label> (18) <input type="radio" id="wizOzMovie" name="wizOz" (19) value="wizMovie" > (20) <p>Harry Potter and the Sorcerer's Stone:</p> (21) <label for="PotterBook">Book:</label> (22) <input type="radio" id="PotterBook" name="potter" (23) value="PotterBook" > (24) <label for="PotterMovie">Movie:</label> (25) <input type="radio" id="PotterMovie" name="potter" (26) value="PotterMovie" > (27) <p>Willy Wonka and the Chocolate Factory</p> (28) <label for="WonkaBook">Book:</label> (29) <input type="radio" id="WonkaBook" name="wonka" (30) value="WonkaBook" checked="checked" > (31) <label for="WonkaMovie">Movie:</label> (32) <input type="radio" id="WonkaMovie" name="wonka" (33) value="WonkaMovie" ><input type='submit'> (34) </form> (35) </body> (36) </html> Which guideline is violated on line 16? Avoid self-closing tags Use double quotes Indent nested elements consistently Provide labels and placeholders

self closing tag

What <iframe> attribute indicates the URL of the web page to display in the iframe? link src href

src

Ensure that the value will change by multiples of 100. <input type="range" ="100">

step

How many times will the animation below run?animation: move 4s ease 1s 2 reverse; once twice infinite

twice

Set the text color for input buttons of type submit. <button type="submit">Submit</button> button[ ]{ color: green; }

type="submit"

Set the input area width for any text input elements to 300 pixels. <input type="text" name="firstName"> input[ ] { width: 300px; }

CS Final

Ensembles d'études connexes

GU Exam

Blood quiz/assignment

Unit 4 Test

Replication, Transcription, and Translation (Biology)

Psychology Chapter Two Terms DUMBED DOWN

PA Property & Casualty License Practice Exam

Astronomy Test 3

Macroeconomics test 9/10

Chapter 15- Financial Systems: Accounts Receivable

NUR236 EXAM 1

Nur 237 - test 1 (Q&A)

Macro Quiz Answers

Marvel Characters and Their Actors

Banking/Financial Services

Komunikacija

Preparing An Income Statement

RAD-111 Chapter 4: G

LBST 1105 CHRIS JARRETT UNCC

7th Grade Exams: All the things

Life Insurance Basics 7%