HTML & CSS Flashcards
What uses 6 hexadecimal digits to represent colors, two each for red (R), green (G), and blue (B) components.
Hex Codes
What digit is the lowest number in hex code, and represents a complete absence of color.
Zero
What is the highest number in hex code, and represents the maximum possible brightness?
F Digit
What can #FF0000 be abbreviate to?
F00 is the same color interpretation as #FF0000
With RGB you specify the _____ of each color with a number between 0 and 255.
brightness
With _____ _____ there is no need to design a mobile version of a website. It will look good on devices with screens of any width.
responsive design
You can add Bootstrap to any app by adding what code to the top of your HTML?
Normally, your button elements with a class of btn are only as wide as what?
the text that they contain
How would I stretch a button to fill a page’s entire horizontal space and causing any elements following it to flow onto a “new line” below the block?
With bootstrap’s class=”btn-block” added to my button in HTML.
Example:
Submit
What Bootstrap class is the main color used in an app?
class=”btn-primary”
What is Bootstrap’s class=”btn-primary” useful for?
For highlighting actions you want your user to take.
What 2 classes does Bootstrap’s class=”btn-primary” need in order to work?
- class=”btn”
2. class=”btn-block”
What Bootstrap button class is used to call attention to optional actions that the user can take?
class=”btn-info”
What 2 classes does Bootstrap’s class=”btn-info” need in order to work?
- class=”btn”
2. class=”btn-block”
What Bootstrap class is used to notify users that the button performs a destructive action, such as deleting a cat photo.
btn-danger
What 2 classes does Bootstrap’s class=”btn-danger” need in order to work?
- class=”btn”
2. class=”btn-block”
Bootstrap uses a _____ _____ system
responsive grid
What benefit does Bootstrap’s responsive grid system have?
It makes it easy to put elements into rows and specify each element’s relative width.
Most of Bootstrap’s classes can be applied to a HTML _____ element.
<div></div>
What does it mean by Bootstrap’s col-md-* class?
md = medium screen size * = a number specifying how many columns wide the element should be
You can use _____ to create inline elements.
spans
By using the _____ element, you can put several elements together, and even style different parts of the same element differently.
span
What is the HTML code to add Font Awesome to any app?
*Add link to the top of HTML doc
What element is used for icons in Font Awesome?
the “i” element
You add the Font Awesome classes to what _____ element to turn it into an icon?
“i”
Example:
<i></i>
Can you can use Bootstrap’s col-xs-* classes on HTML form elements?
yes
What is a benefit of using Bootstrap’s col-xs-* on HTML form elements?
radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is.
What does Bootstrap’s class=”text-primary” do for HTML?
Changes color to the primary text color of the web page.
Example:
<h3>jQuery Playground</h3>
What does Bootstrap’s class=”text-center” do for HTML?
Centers the assigned HTML text
Example:
<h3>jQuery Playground</h3>
What div class should I use to make sure all content on a web page is mobile-responsive?
<div></div>
Example:
<div>
<h3>jQuery Playground</h3>
</div>
What Bootstrap class is used to create a Bootstrap row for inline elements?
<div></div>
What Bootstrap class can create a visual sense of depth for columns?
Well Class
<div class="well"></div>
What is the basic Bootstrap code to add a button to HTML?
Does every class in HTML need to have a corresponding CSS?
No, we can use classes for the sole purpose of selecting those elements more easily using jQuery
When do we modify HTML elements without needing to actually change them in HTML?
When jQuery is used
