Fall 2023 WDD 230 Final Exam Prep
File Path Question: To link to a target file in the directory above or in a sibling path the invoking HTML file, what syntax is used in the file reference? Example: If a file named index.html was inside a subfolder named products and needed to reference an image inside a subfolder named images, the reference could be completed properly using which of the following choices to fill in the blank provided in the href property given here? href="___/images/sunset.png" :-| < /: .. >
..
Given the following HTML code snippet: <main> <h2>The Blue Mountain Express</h2> <ul class="linklist"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </main> Which of the following CSS selectors only selects the list item elements in the unordered list without error? .linklist li .linklist, ul, li h2 ul .linklist li main ul h2, ul, .linklist, li
.linklist li
Given the following HTML code snippet: <main> <section class="linklist"> <h2>WDD 230: Assignment Portal</h2> <ul> <li>Lesson 02: <a href="#">Assignment Link</a></li> <li>Lesson 03: <a href="#">Assignment Link</a></li> </ul> </section> </main> Which of the following CSS rule headings only selects the list item elements in the unordered list without error? .linklist, h2, ul, li .linklist, ul, li main section ul .linklist ul li .linklist h2 ul li
.linklist ul li
Which of the following code snippets will horizontally and vertically center the content of children elements within the parent container, .parent-selector? .parent-selector { margin: 0 auto; text-align: center; vertically-align: middle; } .parent-selector { display: flex; justify-content:center; align-items: center; } .parent-selector { display: flex; justify-content: full; vertically-align: 50%; } .parent-selector { display: flex; text-align:center; vertically-align: middle; }
.parent-selector { display: flex; justify-content:center; align-items: center; }
Using the following CSS, provide the correct CSS comment syntax to make the words "Class Selectors" a valid CSS comment. Class Selectors .highlight { background-color: rgba(255, 242, 0, 0.4); } .active { text-decoration: overline; }
/**Class Selectors**/
Finish the following HTML table markup by filling in the blank. <tr> <td>Product 345</td> <td>Product 231</td> <td colspan="2">Product 333<_____> </tr>
/td or </td>
Given the following HTML snippet, match each of the following to its corresponding label/definition. <section class="temple highlight"> <h3>Salt Lake Temple</h3> <p>The Salt Lake Temple is a landmark and symbol for The Church of Jesus Christ of Latter-day Saints. </p> <p>The purpose of this temple and all other Latter-day Saint temples is to help all of God's children come closer to Jesus Christ. </p> </section> Labels: 1) <section>, 2) highlight, 3) class, 4) </p>, 5) the whole snippet given, 6) <h3>Salt Lake Temple</h3>, 7) Salt Lake Temple Options: content, section element, a nested element, attribute, a closing tag, class attribute value, an opening tag.
1) an opening tag. 2) class attribute value. 3) attribute. 4) a closing tag. 5) section element. 6) a nested element. 7) content.
Which of the following HTML elements is an inline-level element by default? (Mark all that apply) img ol div hr a nav
1) img 2) a
Given the following HTML markup snippet and corresponding CSS styling, fill in the blank with the correct grid-row declaration value for the third block's (one with the image): <div class="gridlayout"> <div class="item">1</div> <div class="item">2</div> <div class="imgitem"> <img src="https://placekitten.com/190/300"> </div> <div class="item">4</div> </div> .gridlayout { display: grid; align-items: center; justify-content: center; grid-gap: .25rem; } .item { grid-column: 2/3; } .imgitem { grid-row: ______; }
1/4
Given the following HTML form snippet of markup, which of the following user inputs would meet the regular expression rule written in the pattern attribute? <input type="text" name="code-mark" pattern="[A-Za-z19]{5}" title="The Code Mark"> 1cat9 AA195 ten1 A28
1cat9
Given that the parent items is a CSS grid, how many columns will this <aside> span? aside { border: 1px solid #eee; padding: 2rem; text-align: center; grid-column: 1 / 3;}
2
Which of the following is the correct way to tell the browser how much space to reserve for the image while it loads to help prevent cumulative layout shifts? 1) <img src="images/frontier.jpg" width="300px" height="250px"> 2) <img src="images/frontier.jpg" alt="Frontier Decorative Backing" width="300" height="250"> 3) <img src="images/frontier.jpg" alt="Frontier Decorative Backing" style="width: 300px; height: 250px;"> 4) <img src="images/frontier.jpg" alt="Frontier Decorative Backing" width="300px" height="250px">
2) <img src="images/frontier.jpg" alt="Frontier Decorative Backing" width="300" height="250">
Finish this statement about responsive design. CSS media query breakpoints should be based upon ________. 1) the contemporary devices and device classes that are on the market such as the newest iPhone, most used tablet, etc. 2) the site content itself and the site layout. 3) the operating systems with the most users. 4) the most popular mobile device brands sold by the top three carriers.
2) the site content itself and the site layout.
About what % reduction of file size was discoverd when coverter the Landscape image in the activty from JPG to WebP?
40%
Which of the following code snippets is the correct way to write an HTML comment? ♫ Place a storefront picture here ♫ /* Place a storefront picture here */ -> Place a storefront picture here <- <!-- Place a storefront picture here --> // Place a storefront picture here
<!-- Place a storefront picture here -->
HTML comments are not displayed in the generated browser document, but they can help provide explanatory, development references in your HTML markup. Make the text *** Call to Action *** in the following HTML example snippet a valid HTML comment. *** Call to Action *** <aside class="cta">Join Now!</aside>
<!--*** Call to Action ***-->
Make the following content into an HTML comment. This is an HTML comment.
<!--This is an HTML comment-->
Write the document type declaration markup statement for an HTML5 file. Be sure to include the appropriate opening and closing brackets < >.
<!DOCTYPE html>
Which of the following is an element that specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of the pre-defined options as they input data into this interface. <select> <textarea> <datalist> <keygen>
<datalist>
Rewrite the following div element start tag using an appropriate, semantic HTML5 tag, and be sure to include the opening and closing brackets < >. <div id="footer">
<footer>
Which of the following HTML elements wraps all the content on the entire page and is sometimes known as the root element? <title> <body> <html> <head> <!doctype html>
<html>
Rewrite the following HTML statement to make the input field a required field. You must be exact when typing the answer to get full credit so be careful on how you type out your markup. <input type="text" name="unit">
<input type="text" name="unit" required="required"> or <input type="text" name="unit" required>
Which of the following is the most commonly used form element? <input> <fieldset> <textarea> <button>
<input>
Which of the following is the correct way to reference a font from the Google Font API? <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <link src="https://fonts.googleapis.com/css?family=Montserrat"> script src="https://fonts.googleapis.com/css?family=Montserrat"> <link src="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
What HTML5 element lets you define zero or more <source> elements, followed by one <img> element, optionally intermixed with script-supporting elements, essentially allowing you to define more than one image based on the view and browser support. <picture> <picture></picture> picture
<picture></picture>
Which of the following HTML snippets will produce the following table structure of data? __________________________________ High: 90 Temperature ----------- Low: 70 __________________________________ <table class="dataA"> <tr> <td colspan="2">Temperature</td> <td>High: 90</td> <td>Low: 70</td> </tr> </table> <table class="dataA"> <tr> <td>Temperature</td><td></td></tr> <tr> <td>High: 90</td> <td>Low: 70</td> </tr> </table> <table class="dataA"> <tr> <td rowspan="2">Temperature</td></tr> <tr> <td>High: 90</td> <td>Low: 70</td> </tr> </table> <table class="dataA"> <tr> <td rowspan="2">Temperature</td> <td>High: 90</td> </tr> <tr> <td>Low: 70</td> </tr> </table>
<table class="dataA"> <tr> <td rowspan="2">Temperature</td> <td>High: 90</td> </tr> <tr> <td>Low: 70</td> </tr> </table>
What character(s) is/are used to designate the start of a media query in CSS markup? ! <!-- @ { $
@
Another student is getting an HTML validation error on this page. What feedback would you provide? Check all that apply. <link href="styles/base.css" rel="stylesheet" ><link href="styles/larger.css">
A link element is missing the rel attribute.
Given that we have a div element with the class of 💪. The only content of this element is the text "Center Me". Complete the following CSS rule by filling in the blanks (labeled A, B, and C) to ensure that the content is both vertically and horizontally centered as shown. .💪 {display: ____A____; align-items: ___B___; _____C_____: center;}
Answer 1:flex Answer 2:center Answer 3:justify-content
Should not be used on the web as it is not a compressed image format leading to very large files.
BMP
What advice would you give a student that says their overlay section of text is appearing on the bottom, right corner of the document versus on the bottom, right corner of the element that contains the text and on which they wish to overlay the text using position: absolute? The text overlay needs to have CSS declarations that used screen width and screen height calculations. The text overlay must be fixed at the bottom using position: parent. Make sure the body CSS rule has a position property defined. Be sure the element container has position: relative declared.
Be sure the element container has position: relative declared.
Which of the following choices completes this statement at the blank? Device-pixel ratio is the number of device pixels per ______________ pixel. HTML browser srcset CSS
CSS
HTML tables can be used as an effective and desired layout structure for web pages given how easy they are to markup. True False
False
HTML tags are case sensitive. For example, <Main> is different than <main>. True False
False. (These are the same thing, however, always use lowercase HTML. HTML does not require lowercase tags, but we require a lowercase HTML standard which is supported by the industry. Some stricter document types, like XHTML, require lowercase).
How many columns will be displayed on the screen given the following code snippets? <div class="wrapper"> <div class="col1">One</div> <div class="col2">Two</div> <div class="col3">Three</div> <div class="col4">Four</div> <div class="col5">Five</div> </div> .wrapper { display: grid; grid-template-columns: 1fr 2fr 1fr 1fr; }
Four (4)
Simple images and animations and is older (1987)
GIF
Which of the following is a web-based, version-control, and collaboration system that will be used in this course to provide a viewable domain for your work? - W3C - GitHub - Visual Studio Code - WHATWG - SitePoint
GitHub
Which of the following technologies are considered to be CORE web technologies and found on most Frontend Web Design and Developer positions under requirements? Bootstrap Node PHP HTML React jQuery CSS JavaScript
HTML, CSS, JavaScript
What is the name of the API used in this week's Progressive Loading activity?
Intersection Observer
Most popular choice and widely used image type for lossy compression of still images/photographs.
JPEG
Consider the css-tricks.com article, which references the use of the IntersectionObserver JavaScript object labeling it as cumbersome. A new attribute has been introduced by Google and supported by the Chrome 75+ browser named loading with three different values. The concept of using an HTML attribute and value of loading="lazy" and the browser being able to support in versus requiring JavaScript by the user is called which of the following? External Lazy Loading Native Lazy Loading Phishing Lazy Loading Embedded Lazy Loading
Native Lazy Loading
Preferred for more precise reproduction of source images or when transparency is needed and it produces better compression.
PNG
A reliable and realistic representation of your key audience segments for reference.
Personas
One of your peers is confused as to why these JavaScript statements do not work as intended. They report that when a valid chapter is entered into the HTML input field with an id of "favchap" the message on the screen is wrong saying that the favorite chapter is something like [object HTMLInputElement]. And when they do not enter anything into the input field, the message is still outputting the "Thank you. your favorite chapter is [object HTMLInputElement]".What advice would you give them? Check all the apply. const message = document.querySelector('#message'); const input = document.querySelector('#favchap'); if (input !== "") { message.innerHTML = `Thank you. Your favorite chapter is ${input}.`; } else { message.innerHTML = `Please enter a chapter.`; }
Reference the value property of the #favchap input element, not just the element.
Finish this statement: If a web icon can be represented using vector graphics, use _______ since it scales across various resolutions and sizes, so it's perfect for responsive design and has good browser support. PNG JPEG GIF SVG
SVG
Ideal for interface elements, icons, and diagrams that can support many sizes with accuracy.
SVG
Describes the visitors purpose in visiting and using the site of which the site content can provide the answers.
Scenarios
What does the :: syntax in the CSS rule selector do? For example, .active::before {content: "⚙️";margin-top: .5rem;} Selects the next sibling element as a CSS combinator. Separates two properties in order for JavaScript to reference one or the other. Selects a pseudo-element of the selected element. References a data source of the element that is selected.
Selects a pseudo-element of the selected element.
Attempts to provide scope to the website in describing what services it provides.
Site Map
A student has posted a question about their code not working. The message indicates the following when attempt to render their page and look at the DevTools console output. Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at util.js:45:5 What advice would you give this student? The util.js file is not referenced properly in the HTML document. addEventListener is incorrect syntax and cannot be read. The element targeted with the addEventListener method does not exist as named. The type of the HTML element is not found and is of the wrong type.
The element targeted with the addEventListener method does not exist as named.
A member of your group wants help with their media-query-large.css file. The <h1> element's color is not turning red in the larger view as intended. Which of the following feedback statements should you give them? Check all that apply. @media (min-width: 38rem) {} h1 {color: red;}
The h1 tag in not inside the media query.
Why would a web developer want to consider using a normalize.css file or a reset.css file? Check all that apply. They speed up the page load time. Guarantees that your site will pass the W3C validation for styling. They provide a consistent starting point for your CSS styling across different browsers. Makes it easier to ensure all browsers render your site the same way.
They provide a consistent starting point for your CSS styling across different browsers. Makes it easier to ensure all browsers render your site the same way.
If meta tags for social media, e.g., open graph, tags are missing from the HTML document, how to social media sites like Facebook determine the preview image? The first image located in the body section is used. An algorithm determines that most common pixel structure and uses a random image from the set. An image is not used. A basic placeholder is used instead. They use heuristics to make a best guess about the image given the content.
They use heuristics to make a best guess about the image given the content.
A CSS comment is used to add explanatory notes to the code or to prevent the browser from interpreting specific parts of the style sheet. CSS comments have no effect on the layout and style of the document. - MDN CSS Comments can be used to traverse multiple lines as shown here: /* The comment below is used to disable specific styling */ /* span { color: blue; font-size: 1.5em; } */ True or False?
True
Provides examples of the fonts to be used and where they are to be applied.
Typography
Best compression option for images and animated images with higher color depths.
WEBP
What is the name of the browser extension that you are required to install for this class? We will use this extension to help us validate HTML and CSS as well as check links and accessibility plus much more!
Web Developer
A simple layout diagram.
Wireframe
Here is a screenshot of a fellow student's Inspection of an image using the browser's DevTools when hovering over the <img> src attribute. What feedback should you provide give the data provided? Check all that apply.
Your image file size is too large, try reducing the quality using an image editing program. The rendered aspect ratio of the image is not correct. The image is stretched, blurry, and/or pixelated (this is not shown in the popup). Keep the aspect ratio the same. Your image pixel dimensions are way too large for what is actually needed on the page. Reduce the image's dimensions to a more manageable size.
A favicon can help users quickly identify the site as they scan through search results. A favicon should be visually representative of the website's brand. What size of favicon does Google use/recommend?
a multiple of 48px square
With the position: ______________ declaration set for a selected element, the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor if there is one.
absolute
Google Fonts makes product and web pages run faster by safely caching fonts without compromising users' privacy or security. Google Fonts is an API or ______________________.
application programming interface
The _______________ attribute specifies that the input field should automatically get focus when the page loads.
autofocus
What CSS property sets one or more background images on an element?
background-image
What is the default display property of a paragraph (<p>) element? inline grid table block flex
block
What CSS property allows us to clear floats that precede the selected element(s) in the HTML structure? unfloat clear end position z-index
clear
Given the following JS code snippet with variables, rewrite the entire statement using a template literal. Here is an example of the output desired: "There are 54 days until Christmas!"You can assume that all the variables used in the concatenated expression have been declared and are ready to use. You must include a closing semicolon. const daysUntil = "There are " + daycount + " days until " + targetEvent + "!";
const daysUntil = `There are ${daycount} days until ${targetEvent}!`;
Write the CSS declaration that applies the Flex box layout to the selector. Note that the standard way to write a declaration in this class is to use one space after the colon and be sure to include the semi-colon in your declaration.
display: flex;
Write the CSS declaration that applies the Grid layout to the selector. Note that the standard way to write a declaration in this class is to use one space after the colon and be sure to include the semi-colon in your declaration.
display: grid;
A _______________ is a small, iconic image that represents your website.
favicon
Which of the following CSS Flexible Box Layout properties allows us to set the direction of the flex container items into a single column? flex-basis flex-wrap flex-direction flex-grow
flex-direction
The following screenshot captures a paragraph <p> wrapping around an image <img>. Complete the CSS declaration by filling in the blank with the appropriate property declaration that supports this layout. (image is placed in the right side, wrapped by text). p img { __________: right; margin: 1em; }
float
Given the following HTML markup snippet: <ul> <li>Unordered item</li> <li>Unordered item <ol> <li>Item 1</li> <li>Item 2</li> </ol> </li> </ul> and the following CSS rules written in the given order: ul ol li { color: forestgreen;} ul li {color: red;} ol + li {color: blue;} What color will be assigned to the ordered list items after rendering?
forestgreen
Which of the following CSS Grid Layout properties is a shorthand to create a gutter or alley between grid cells? grid-area gutter / grid-auto-gutter gap / grid-gap alley / grid-alley grid-margin
gap / grid-gap
Which of the following is more suited for layouts in two dimensions? Float Grid Flexbox Inline Block
grid
Part of an HTML document that is not displayed in the web browser.
head
An HTML element that contains introductory content.
header
An HTML element that has six levels.
heading
Optimization is the process of trying to find the magical balance between ______________and file size.
image quality
Which of the following file and folder names are appropriate for the web and the standards of this class? Check all that apply. images/temple.webp Images/temple.JPG chamber/home page.html scripts/weather.js scripts/#counter.js resources/img/profile.png
images/temple.webp scripts/weather.js
Which of the following is a self-closing HTML tag? a ul div aside body img
img
Which of the following uses the correct CSS element selector syntax for a CSS declaration? image { padding: 1em; border: 1px solid black; } pict { padding: 1em; border: 1px solid black; } img { padding: 1em; border: 1px solid black; } pic { padding: 1em; border: 1px solid black; }
img { padding: 1em; border: 1px solid black; }
Which of the following units of measure in CSS are absolute units if any? rem in px pt
in, px, pt.
What is the default display value of an <img> element? table block inline flex grid
inline
Progressive loading of assets on a page is also known as __________ _____________.
lazy loading
To save a name as a local storage item that could be used later, you would use which of the following statements? localStorage.save("name", 'Pablo '); localStorage.storeName('Pablo '); localStorage.setItem("name", 'Pablo '); document.save.localStorage('Pablo');
localStorage.setItem("name", 'Pablo ');
The CSS box model refers to the conceptual, rectangular area that exists on HTML elements. The box model has four, basic components listed below.Match each component to its correct order of appearance from the outermost part of the rectangle model to the innermost part of the model. Labels: padding margin content border Options: outermost: first second third innermost: last
margin = outermost: first. border = second. padding = third. content = innermost: last.
________ _________ let you adapt your site or app depending on the presence or value of various device characteristics and parameters and are a key component of responsive design. As an example, they can shrink the font size on small devices, increase the padding between paragraphs when a page is viewed in portrait mode, or bump up the size of buttons on touchscreens.
media queries
Each input field must have a _________________ attribute to be submitted. If this attribute is omitted, the data of that input field will not be sent.
name
A reset, reboot, or ___________ CSS file is used to reduce browser inconsistencies by making browsers render elements consistently and in line with modern standards.
normalize
const outputElement = document.querySelector('#output'); Write a JavaScript line of code that assigns the outputElement a class named 'highlight' using the classList property.
outputElement.classList.add('highlight');
Which CSS property is used to control the spacing between the content and the border of an element?
padding
Which of the following snippets correctly references an external JavaScript file name myScript.js located in a subfolder named js in HTML? <link href="js/script.js" type="text/javascript"> <src js="js/script.js"></src> <link href="js/script.js" ></link> script src="js/script.js"></script
script src="js/script.js"></script
Complete this thought. All of the following CSS properties add to an element's width except___________ . the border the padding the margin
the margin
Which of the following input types would be the best choice for displaying choices to a user if they are only allowed to select one? type="range" type="radio" type="checkbox" type="select"
type="radio"
Given the following HTML markup snippet: <ul> <li>Unordered item</li> <li>Unordered item <ol> <li>Item 1</li> <li>Item 2</li> </ol> </li> </ul> Which of the following CSS selectors selects the outer, unordered list items and not the embedded ordered list items? ul > li ul + li ul li ul ~ li
ul > li
Which of the following JavaScript variable declaration statements has a function scope versus a block scope? We should avoid using this variable statement. var def let const
var
The __________ is the framed area on a display screen and each responsive web page needs to have a meta tag defined for this property.
viewport
What is the name of the UX accessibility and design principle of providing visual or other media clues to make it easy for users to navigate a site or application and locate the information they need? Hint: Review the activity instructions in the responsive menu learning activity. Here is an example showing the Solutions menu item as underlined and blue:
wayfinding
A key concept behind responsive design is fluidity and proportionality as opposed to fixed width layouts. Using relative units for measurements can help simplify layouts and prevent accidental creation of components that are too big for the viewport. Which of the following is an example of a fixed width CSS declaration? width: 100%; width: 420px; width: 420rem; width: 100em;
width: 420px;
