ALL Answers in Code HS Web Design (Picasso)
cant copy so it is the 3rd answer (trust me)
<div class="container"> <div class="jumbotron text-center"> <h1>Bootstrap Site</h1> </div> <p> Lorem ipsum... </p> </div> The above code will result in which of the following sites?
Smart Phone
<div class="row"> <div class="col-sm-6">1</div> <div class="col-sm-6">2</div> </div> What is the largest device that will display this row in stacked columns?
Tablet
<div class="row"> <div class="col-sm-6">1</div> <div class="col-sm-6">2</div> </div> What is the smallest device that will display these columns side by side?
All of the above
A POV statement contains:
red, green, blue
All of the colors you see on a computer screen are the result of a mixture of the same three colors. What are those colors?
<img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Big_and_little_dog.jpg">
An image is hosted at https://upload.wikimedia.org/wikipedia/commons/6/62/Big_and_little_dog.jpg Which of the following is the proper HTML code to display this image on your webpage?
Inside about.html: <head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
Assume you have two files for your website, and these files exist in the same folder: about.html style.css Which of the following is the proper way to apply the CSS code inside style.css to the about.html file?
Inside home.html: <head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
Assume you have two files for your website, and these files exist in the same folder: home.html style.css Which of the following is the proper way to apply the CSS code inside style.css to the home.html file?
<a href="about.html">About This Site</a>
Assume you have two files for your website, and these files exist in the same folder: index.html about.html Which of the following is the proper way to link to the about.html page from the index.html page?
Select by id name, select by class name, select by tag name
CSS rules have a selector that defines which HTML elements the rule applies to. We've learned about the following CSS Selectors: Select by tag name Select by class name Select by id name Which of the following ranks the selectors from highest precedence to lowest precedence?
"container"
Fill in the blank: All site content needs to be inside a ________ div to make the content responsive.
.container
Fill in the Blank: Contents of a navbar need to go inside a _______ div.
Dropdown menus
Fill in the blank: ________ are a great way to pack more options into a navigation bar while keeping the interface clean and simple.
10px
For the given div, what is the size of the right padding? div { width: 10px; height: 10px; padding: 15px 10px 5px 20px; }
<ul>
Inspect the menu item that says "The Museum" at the top of the page. What did this web developer use to create the navigation bar?
div > h1 { ... }
How can I select all h1 tags that are immediate children of div tags?
12
How many columns fit in a single row in the Bootstrap grid system?
caNT copy so its answer 2
How will the following HTML be displayed on a webpage? <table border="1"> <tr> <th>Book</th> <th>Author</th> </tr> <tr> <td>Charlotte's Web</td> <td>E.B. White</td> </tr> <tr> <td>Beloved</td> <td>Toni Morrison</td> </tr> </table>
Importance, Specificity, Order
In what order does the Cascade look at factors to determine which CSS rule to follow?
#8CF5F5
Inspect the body. What is the background color?
header
Inspect the large picture in the middle of the page. What class does this element have?
The picture gets bigger.
Inspect the picture of Karel, which is the first picture on the page. When you look at its style, you should see it has the width:250px Click on 250px. Change it to 800px. What happens?
logo_homepage
Inspect the picture of the duck in the middle of the page. You should see that it is actually a link (<a>). What is this a tag's class?
Yes
Open Calvin's homepage in a new tab or window: http://calvin.codehs.me/ Have you opened http://calvin.codehs.me/ in a new tab or window?
Yes
Open https://start.duckduckgo.com in a new window. You will need to refer to it to answer the following questions. Did you open https://start.duckduckgo.com in a new window or tab?
Yes
Open the website for the Nelson Mandela Metropolitan Art Museum in a new tab (link below). http://www.artmuseum.co.za/ Did you open the website in a new window?
<table border="1"> <tr> <th>Title</th> <th>Artist</th> <th>Length</th> </tr> <tr> <td>CD Jam</td> <td>Rooney Pitchford</td> <td>3:55</td> </tr> <tr> <td>Memory</td> <td>Tom Misch</td> <td>5:41</td> </tr> </table>
Suppose you are making a music streaming website and you want to make a page that displays a user's music library. Which of the following is the proper HTML code to create the following table:
red
Suppose you have the following CSS rules: p { color: green; } .fire { color: red; } #title { color: blue; } What font color will the following HTML element have after being styled by the given CSS: <h1 class="fire">Welcome!</h1>
blue
Suppose you have the following CSS rules: p { color: green; } .fire { color: red; } #title { color: blue; } What font color will the following HTML element have after being styled by the given CSS: <p class="fire" id="title">Hello World!</p>
green
Suppose you have the following CSS rules: p { color: green; } .fire { color: red; } #title { color: blue; } What font color will the following HTML element have after being styled by the given CSS: <p class="title">My First Paragraph</p>
Any browser on any device will be able to view your webpage, because all browsers and devices on the Internet agree to use the same protocols for sending, receiving, and viewing webpages.
Suppose you have written a web page using HTML and CSS and it is hosted at the URL yourdomain.com/home.html Which of the following statements is true about which devices can view your website?
Any browser on any device will be able to view your webpage, because all browsers and devices on the Internet agree to use the same protocols for sending, receiving, and viewing webpages.
Suppose you have written a web page using HTML and it is hosted at the URL yourdomain.com/home.html Which of the following statements is true about which devices can view your website?
Testing what small CSS changes will do to the site presentation
The Inspector would be a useful tool for which of the following tasks?
7
The image below shows a rectangle that is split into equal parts. If the width of the entire rectangle is 21, what is the width of one of the smaller rectangles?
True
True or False: An image can have more than one CSS filter.
False
True or False: As long as you cite your sources, you can put any image you find online on your website.
True
True or False: Bootstrap example websites can be used as a starter template for your own projects.
False
True or False: If a selector's display property is set to none, selected elements will still take up space on the page.
False
True or False: If you are adding your own CSS sheet, make sure your CSS file comes before the Bootstrap CSS file.
False
True or False: If you go through the design cycle correctly, you only need to go through the cycle once.
False
True or False: If you use Bootstrap's framework for your site, you can't add your own CSS rules.
False
True or False: In the case that two conflicting rules have the same order and specificity, the rule that is written first will be applied.
False
True or False: It is important to avoid a beginner's mindset in design research, because you should already know a lot about your user and their needs.
False
True or False: It is impossible to have more than one jumbotron on a given page.
False
True or False: It is plagiarism to copy code from Bootstrap examples to your own website.
False
True or False: It is possible to embed any website inside IFrames.
True
True or False: None of the changes you make in the Inspector will be saved.
False
True or False: Only CSS has online documentation because it is a more complex language than HTML.
False
True or False: Only people who are new to Bootstrap need to look at documentation.
False
True or False: The majority of the world has access to the Internet.
False
True or False: The number of columns in a row depends on the device that the website is being viewed on.
False
True or False: You can only transition one property at a time.
False
True or False: You will learn everything there is to know about HTML and CSS from CodeHS.
<table>
Use the inspector to inspect one of the exhibit tiles at the bottom of the page. What did this web developer use to create these tiles?
Repeated code makes it harder to read and edit
What is the reasoning behind the Don't Repeat Yourself principle?
HTML pages embedded inside of other HTML pages
What are IFrames?
All of the above
What are some ways to cut down on repetitive code in your website?
Hyper Text Markup Language
What does HTML stand for?
Uniform Resource Locator
What does URL stand for?
A program on your computer that allows you to visit websites
What is a browser?
Anything physical that lets a user interact with your idea
What is a prototype?
Hello (big) Hello (medium) Hello (small)
What is generated from the following HTML code <h1>Hello</h1> <h3>Hello</h3> <h6>Hello</h6>
pg-index
What is the ID of the body tag?
All of the above
What is the Internet?
<a href="#" class="btn btn-default">Button</a>
What is the correct way to add a default-styled button to an <a> tag?
.container-fluid constantly updates to fit the width of the window, while .container will update occasionally as the window is resized.
What is the difference between .container and .container-fluid?
<span> is used to group and style inline elements, while <div> creates a line break
What is the difference between <span> and <div>?
codehs.com
What is the domain name of the URL https://codehs.com/hourofcode?
www.example.com
What is the domain of this URL: www.example.com/home.html
Gain empathy and understanding for the group you are designing for
What is the first step of the Design Cycle?
The URL: You type the URL for the web page into your browser
What is the first step of viewing a web page as described in the video?
italic
What is the font-style of the span with the ID css? It can be found in the second paragraph, around the word "CSS".
Rendering the Page: Your browser takes the resource and renders it in the browser window
What is the fourth step of viewing a web page as described in the video?
Create a line break on the resulting webpage
What is the function of the <br> tag?
The Cascade determines which CSS rules will be applied when multiple rules for an item are contradictory.
What is the function of the Cascade in CSS?
All of the above
What is the function of the div tag?
Use your findings from the empathy phase to come up with one specific problem that needs to be solved for your users
What is the goal of the "define" step of the design cycle?
/codehs
What is the path of the URL www.twitter.com/codehs?
Explore as many possible solutions as possible
What is the purpose of the ideate step of the design process?
To get your ideas out of your head and into the physical world so you can explore them and test them out
What is the purpose of the prototype step of the design process?
1. Bread 2. Milk 3. Eggs
What is the result of the following HTML code: <ol><li>Bread</li> <li>Milk</li> <li>Eggs</li> </ol>
Define a specific problem to solve
What is the second step of the design cycle after you develop empathy for your users?
The Request: The browser sends a message to a server requesting a resource
What is the second step of viewing a web page as described in the video?
The Response: The server sends a response to the browser with the resource attached
What is the third step of viewing a web page as described in the video?
block
What is the value for the attribute display for the <h1> tag that says "Welcome to Calvin's Homepage"?
<input> in the search bar
What kind of element has the ID search_form_input_homepage ?
A server
What machine listens for HTTP requests to come in to a website's domain?
40%
What percentage of the world population has access to the Internet?
510
Which decimal value is equal to the binary number 1012?
#logo { font-size: 60px; }
Which of the following CSS rules will select the HTML element with the id logo and set the font size for that element to 60 pixels?
<h1 style="background-color:blue;">Hello</h1>
Which of the following HTML code snippets is the proper way to set the background color of an <h1> tag to be blue?
<table border="1"> <tr> <th>Name</th> <th>Score</th> </tr> <tr> <td>Karel</td> <td>32</td> </tr> </table>
Which of the following HTML code snippets will generate the following table?
<ul> <li>Apples</li> <li>Bananas</li> <li>Oranges</li> </ul>
Which of the following HTML code snippets would produce the following web page: Apples Bananas Oranges
All of the above
Which of the following actions will help you avoid violation of copyright laws?
img { filter: grayscale(100%); }
Which of the following applies a grayscale filter to all images?
img { animation: grayscaleFilter 10s; }
Which of the following applies an animation named grayscaleFilter over 10 seconds to every img tag?
img.inverted { filter: invert(100%); }
Which of the following applies the invert filter to all images with the class "inverted"?
I, II, and III only
Which of the following are examples of browsers:
I and II
Which of the following are good testing methods? I - Have the user constantly talk through their experience II - Follow up with questions for your user III - Show pride in your prototype (ie "This is really cool right?")
The domain specifies where the browser's request should be sent. The path specifies exactly what file is being requested..
Which of the following best describes the difference between the domain and path of a URL?
The title of the webpage
Which of the following classifies as metadata about a webpage?
img { height: 200px; }
Which of the following code snippets will select all <img> tags on a page and give them a height of 200 pixels?
.alert { color: red; }
Which of the following code snippets will select all HTML elements with the class "alert" and set their color to be red?
<a href="https://codehs.com/" class="thumbnail"> <img src="codehs_logo.jpg" alt="CodeHS Logo"> </a>
Which of the following correctly creates a thumbnail of the CodeHS logo that links to https://codehs.com?
<div class="intro"> <h2>Welcome</h2> <p>Hi, welcome to my page.</p> </div>
Which of the following correctly uses div to style multiple elements the same way?
<div class="container"> <div class="jumbotron"> <h1>This text will be in a jumbotron</h> </div> </div>
Which of the following creates a responsive jumbotron on your website?
<div class="table-responsive"> <table class="table"> ... </table> </div>
Which of the following creates a table that is responsive to screens of different sizes?
@keyframes change-color { from {color: green;} to {color: red;} }
Which of the following defines an animation change-color that changes the font color from green to red?
@keyframes increase-font { from {font-size: 5px;} to {font-size: 20px;} }
Which of the following defines an animation increase-font that increases the font size from 5px to 20px?
border: 10px 5px 10px 5px
Which of the following defines border thickness so that the top and bottom borders are 10px thick and left and right borders are 5px thick?
Seek to understand your users with interviews and other research
Which of the following describes the empathy step of the design cycle?
<nav class="navbar-nav navbar-right"> <div class="container"> ... </div> </nav>
Which of the following does not correctly create a navigation bar?
Users can avoid targeted discrimination in an online forum.
Which of the following does not demonstrate a harmful consequence of increased anonymity on the Internet?
Potential solutions
Which of the following does not need to be included in a POV statement?
I, III, IV
Which of the following falls under the role of a web designer?
Shoot down ideas that aren't considered good ideas
Which of the following is NOT a good method for a group brainstorm?
Correct your user if they are using your prototype incorrectly
Which of the following is NOT a good testing method?
Judge each idea as good or bad during the brainstorm
Which of the following is NOT a useful strategy for group brainstorming?
Protocol
Which of the following is a term that describes "a widely agreed upon set of rules that standardize communication between machines"?
h1 { color: blue; }
Which of the following is a valid CSS rule?
p { color: red; }
Which of the following is a valid CSS rule?
<h1>
Which of the following is a valid HTML tag?
All of the above
Which of the following is a valid color in HTML?
Firefox
Which of the following is an example of a browser?
The title of the webpage
Which of the following is an example of metadata about a webpage?
Emojis
Which of the following is not a Bootstrap component covered in this unit?
Selecting the correct browser to use for the sites you want to visit
Which of the following is not a concern that has come out of the widespread adoption of the Internet?
background
Which of the following is not a part of the box model?
hidden
Which of the following is not a property that can hide the visibility of an element?
The user types in their login credentials.
Which of the following is not a step required to view a web page?
Explain the correct solution to your user
Which of the following is not a strategy to help build empathy for your users?
Educate
Which of the following is not part of the Design Cycle?
The majority of the world has access to the Internet.
Which of the following is not true about the Internet?
A government filtering search results to limit the access of information and suppress discussion amongst its citizens
Which of the following is related to the issue of censorship on the Internet?
<a href="https://google.com"> Click Me </a>
Which of the following is the correct HTML code to create a hyperlink that displays and links to google.com?
<h1>Content Affected by Tag</h1>
Which of the following is the proper format for an HTML tag?
It is metadata about the webpage
Which of the following is true about the title of a webpage?
<img src="https://codehs.com/static/img/logo.png">
Which of the following lines of HTML code will insert an image into a webpage?
div > a { ... }
Which of the following selects all a tags that are immediate children of div tags?
div .footer { ... }
Which of the following selects all elements with the class footer that are inside of divs?
p.alert { color: red; }
Which of the following selects all p tags with the class alert and makes them red?
img:hover { width: 350px; height: 350px; }
Which of the following selects images as the mouse hovers over them and sets their size to 350px by 350px?
appearance: off
Which of the following settings will not make an element invisible?
I only
Which of the following statements are true about styling your web pages with CSS: I. Styling with CSS is more scalable than using style= on each HTML tag that you want to style II. You can create styles with CSS that are not possible using style= on an HTML tag
<th>
Which of the following tags defines a table header?
<tr>
Which of the following tags defines a table row?
<div class="page-header"> <h1> This is the header <small> This is the subtext </small> </h1> </div>
Which of the following will correctly display a page header with subtext?
h2::after { content: "!"; }
Which of the following will insert an exclamation point after every h2 element?
h1 { color: green; transition: color 2s; } h1:active { color: red; }
Which of the following will result in a smooth transition from green to red as the mouse clicks on h1 tags?
<div class="btn-group-vertical"> <a href="#" class="btn btn-default">Left</a> <a href="#" class="btn btn-default">Middle</a> <a href="#" class="btn btn-default">Right</a> </div>
Which of the following will result in this button grouping? (left, middle, right)
p::first-letter { color: blue; }
Which of the following will turn the first letter of all p elements blue?
h1:hover { color: blue; }
Which of the following will turn the h1 tag blue as the mouse hovers over it?
Embedding a map from Google Maps in your website
Which of the following would you use an IFrame for?
profile.html
Which page should the following nav-tabs be added to? <ul class="nav nav-tabs"> <li><a href="home.html">Home</a></li> <li class="active"><a href="profile.html">Profile</a></li> <li><a href="messages.html">Messages</a></li> </ul>
A web designer
Who creates the look and feel of a website?
All of the above!
Who might need to look something up in HTML/CSS documentation?
A web designer
Who thinks about the best way to display information on the site?
A web developer
Who writes the HTML and CSS that brings the site to life?
All of the above
Why do we use CSS?
All of the above
Why is it important to avoid repetitive code while creating a website?
It helps you avoid applying your own assumptions to a situation.
Why is it important to maintain a beginner's mindset while building empathy for your user?
All of the above
Why is testing necessary?
All of the above
Why might you decide to use a dropdown menu on your website?
<div>
You are trying to apply the same style to several different elements in a block, with line breaks before and after. Which tag should you use?
There would no longer be a smooth transition for the image:hover rule.
img { width: 100px; height: 100px; transition: width 2s, height 2s; } img:hover { width: 200px; height: 200px; } What would be the resulting difference if the line transition: width 2s, height 2s; was removed from the first CSS rule?
