Review questions

pdf

School

University of the Fraser Valley *

*We aren’t endorsed by this school

Course

145

Subject

Computer Science

Date

Jan 9, 2024

Type

pdf

Pages

10

Uploaded by GeneralKingfisher3554

Report
Review Questions Multiple Choice 1. Which meta tag is used to configure display for mobile devices? a. viewport b. handheld c. mobile d. screen ANSWER: (a) 2. Which of the following properties configures proportional flexible items? a. flex b. flex-wrap c. align-items d. justify ANSWER: (a) 3. Which of the following is a container element used to configure responsive images? a. display b. flex c. picture d. link ANSWER: (c) 4. Which of the following values would you assign to the display property to configure a flexbox container? a. grid b. flex c. flexbox d. block ANSWER: (b) 5. Which of the following is optimized for responsive twodimensional page layout? a. CSS absolute positioning b. CSS Display Layout
c. CSS Grid Layout d. CSS Flexible Box Layout ANSWER: (c) 6. Which of the following is a conditional that can be used to test for support of a CSS property? a. feature query b. support query c. media query d. property query ANSWER: (c) 7. Which of the following properties configures whether flex items are displayed on multiple lines? a. flex-direction b. flex-wrap c. flex-template d. flex-basis ANSWER: (b) 8. Which of the following properties identifies a CSS selector as a grid container? a. grid b. directive c. display d. grid-template ANSWER: (c) 9. Which of the following properties associates a grid item (HTML element) with a named area of the grid? a. grid-name b. grid-item c. grid-area d. grid ANSWER: (c) 10. Which of the following properties configures empty space between grid tracks? a. align
b. grid-gap c. gutter d. grid-template ANSWER: (b) Fill in the Blank 1. The property is a shorthand property that combines the grid-template-areas, grid-template-rows, and grid- templatecolumns properties. ANSWER: (grid-template) 2. determine the capability of the mobile device, such asbrowser viewport dimensions and resolution. ANSWER: (media queries) 3. When using flexbox to vertically and horizontally center text within an element, set both the and properties to the value center. ANSWER: (align-item, justify-content) 4. The property is a shorthand property that configures both the flex-direction and the flex-wrap. ANSWER: (flex flow) 5. The purpose of the attribute is to provide a method for a browser to display different images depending on specific criteria. ANSWER: (srcset) Apply Your Knowledge 1. PREDICT THE RESULT. Carefully examine the code below for a responsive web page. Consider how the web page will display in a browser with a narrow viewport (less than 600 pixels). Sketch a wireframe of the page and label it “Mobile.” Consider how the web page will display in a typical desktop browser viewport. Sketch a wireframe of the page. Label it “Desktop.”
Your preview ends here
Eager to read complete document? Join bartleby learn and gain access to the full version
  • Access to all documents
  • Unlimited textbook solutions
  • 24/7 expert homework help
<!DOCTYPE html> <html lang="en"> <head> <title>Predict the Result</title> <meta charset="utf-8"> <style> body { background-color: #EAEAEA; color: #636363; font-family: Verdana, Arial, sans-serif; } #wrapper { background-color: #D5EDB3; } header { color: #FFFFFF; text-shadow: 3px 3px 3px #333; padding: 1em; } #content { background-color: #FFFFFF; } nav { width: 150px; padding: 1em; } main { padding: 1em 2em; } aside { padding: 1em; } @media (min-width: 600px) { #content { display: flex; flex-wrap: nowrap; } } </style> </head> <body> <div id="wrapper"> <header> <h1>Trillium Media Design</h1> </header> <div id="content"> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="products.html">Products</a> </li>
<li><a href="services.html">Services</a> </li> <li><a href="clients.html">Clients</a> </li> <li><a href="contact.html">Contact</a> </li> </ul> </nav> <main> <p>Our professional staff takes pride in its working relationship with our clients by offering personalized services that listen to their needs, develop their target areas, and incorporate these items into a website that works. </p> </main> <aside> <p>Get monthly updates and free offers. Contact <a href="mailto:me@trilliummediadesign.com">Trillium< /a> to sign up for our newsletter.</p> </aside> </div> </div> </body> </html>
ANSWER:
Your preview ends here
Eager to read complete document? Join bartleby learn and gain access to the full version
  • Access to all documents
  • Unlimited textbook solutions
  • 24/7 expert homework help
2. FILL IN THE MISSING CODE. This responsive web page should be configured so that the appearance of the main navigation changes depending on whether the page is displayed on a mobile device or on a typical desktop browser. When displayed on a viewport that is less than 600 pixels, the navigation should display above the main content with each navigation link on its own line. When displayed on a typical browser viewport, the navigation should display to the left of the main content using CSS grid layout. CSS properties and values, indicated by "_" (underscore), are missing. ANSWER TEXT IN RED WAS MISSING <!DOCTYPE html> <html lang="en"> <head> <title>Predict the Result</title> <meta charset="utf-8"> <style> body { background-color: #EAEAEA; color: #636363; } #wrapper { background-color: #D5EDB3; height: 100vh; } header { color: #FFFFFF; text-align: center; text-shadow: 3px 3px 3px #333; } nav ul { display: flex; flex-wrap: grid ; list-style-type: none; padding-left: 0; } nav ul li { width: 100%; padding: .5em; text±align: center; border-bottom: 1px solid #636363; } nav ul li a { display: block; text-decoration: none; } main { padding: 1em 2em; } @media ( min-width: 600px ) { header { grid-area: header; } nav { display : nav; } main { grid-area: main; } #wrapper { display: grid ; grid-template: " grid-area : header" 100px "nav main"
/ 150px 1fr ; } } </style> </head> <body> <div id="wrapper"> <header> <h1>Trillium Media Design</h1> </header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="products.html">Products</a> </li> <li><a href="services.html">Services</a> </li> <li><a href="clients.html">Clients</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <p>Our professional staff takes pride in its working relationship with our clients by offering personalized services that listen to their needs, develop their target areas, and incorporate these items into a website that works. </p> </main> </div> </body> </html> 3. FIND THE ERROR. The page below is intended for the navigation area to display on the right side of the browser window. What needs to be changed to make this happen? ANSWER: “nav” was spelled wrong.
CORRECT CODE: <!DOCTYPE html> <html lang="en"> <head> <title>Find the Error</title> <meta charset="utf-8"> <style> body { background-color: #d5edb3; color: #636363; } header { grid-area: header; } nav { grid-area: nav ; } nav ul { list-style-type: none; } nav ul a { text-decoration: none; } main { grid-area: main; padding: 1em 2em; background-color: #FFFFFF; } #wrapper { display: grid; grid-template: "header header" "nav main" / 1fr 120px; } </style> </head> <body> <div id="wrapper"> <header> <h1>Trillium Media Design</h1> </header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="services.html">Services</a> </li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <p>Our professional staff takes pride in its working
Your preview ends here
Eager to read complete document? Join bartleby learn and gain access to the full version
  • Access to all documents
  • Unlimited textbook solutions
  • 24/7 expert homework help
relationship with our clients by offering personalized services that listen to their needs, develop their target areas, and incorporate these items into a website that works. </p> </main> </div> </body> </html>

Related Documents

4-3 Assignment.docx
3-3 Assignment.docx
Lesson 2.docx
LastRecitationProxy.pdf
PythonExerciseSep18Class.py
Screen Shot 2023-12-17 at 4.19.16 PM.png
Review Questions Ch 11.pdf
Review questions.docx
practice5(lab5).pdf
Review questions0.docx
Review questions and apply your knowledge.pdf
book.pdf
Recommended textbooks for you
Text book image
Microsoft Windows 10 Comprehensive 2019
Computer Science
ISBN:9780357392607
Author:FREUND
Publisher:Cengage
Text book image
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
Text book image
Programming with Microsoft Visual Basic 2017
Computer Science
ISBN:9781337102124
Author:Diane Zak
Publisher:Cengage Learning
Text book image
EBK JAVA PROGRAMMING
Computer Science
ISBN:9781337671385
Author:FARRELL
Publisher:CENGAGE LEARNING - CONSIGNMENT
Text book image
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L
Text book image
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:9781337508841
Author:Carey
Publisher:Cengage
SEE MORE TEXTBOOKS
Recommended textbooks for you
Text book image
Microsoft Windows 10 Comprehensive 2019
Computer Science
ISBN:9780357392607
Author:FREUND
Publisher:Cengage
Text book image
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning
Text book image
Programming with Microsoft Visual Basic 2017
Computer Science
ISBN:9781337102124
Author:Diane Zak
Publisher:Cengage Learning
Text book image
EBK JAVA PROGRAMMING
Computer Science
ISBN:9781337671385
Author:FARRELL
Publisher:CENGAGE LEARNING - CONSIGNMENT
Text book image
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L
Text book image
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:9781337508841
Author:Carey
Publisher:Cengage
SEE MORE TEXTBOOKS