Part I:  HTML
1. What is a block element and how does it flow on the screen?
A block element is a 2-dimensional element that flows vertically on the screen. Blocks use up the full available width and always start on a new line.

2. What is an inline element and how does it flow on the screen?
An inline element is a 1-dimensional element that flows horizontally and wraps when its content fills the available width. Inline elements flow left to right and are not effected by width and height properties. Their width and height are determined by their content. Also vertical margin properties have no effect on inline elements whereas horizontal margins do.

3. What box model properties are unavailable for inline elements?
Width, height, margin-top, margin-bottom

4. List 3 inline elements that are most commonly used?
a, img, span

5. What are semantic tags and why use them?
Tags that describe their purpose or content. Proper HTML coding (semantic coding) is using HTML5 tags that describe the structure of the page and HTML4 tags that property describe their content.

6. What are 2 grouping tags (one inline, one block)
inline: span, block: div

7. Write the HTML5 tags we use to structure a page, in the order you might use them?
header, main, section, article, aside, footer

8. What is the difference between a tag and an element?
An element consists of opening and closing tags and potentially any content contained within whereas a tag is just the portion of the HTML inside the angle brackets

9. What is the box model (Explain it)?
The box model defines how elements are sized, bordered, and spaced internally and externally. An element's total width, for example, is it's content width (width property) plus it's right and left padding plus its right and left border. Margin is the space between elements and padding is the inside space of an element between the element's border and it's content.

10. How does the box-sizing: border-box; rule modify the box model?
box-sizing: border-box; re-defines the width and height properties to include padding and border. Thereby, increasing the padding or border takes space away from the content.

12. On form tags such as input, what attribute links a label to the form element?
The for="value" attribute in the label element is linked to the "id="value" attribute on the form field tag such as an input tag, as long as both values match.

13. Are input, button and textarea block or inline tags?
They are inline tags

14. What is the viewport meta tag used for?
The viewport meta tag tells the browser that the website is responsive and at what size to initially display the site.

Part II:  CSS
13. How do you separate multiple CSS selectors in the same rule set?
With a comma

14. In the following selector, what does the space mean between the tag names?
   section p { property: value; }
The space means "inside of" or "descendant of" (reading right to left). Eg, all p tags that are inside of (or descendants of) section tags

15. How do you select the 2nd paragraph tag in CSS without modifying the HTML:
<main>
    <h1>Welcome</h1>
    <p>Hi</p>
    <p>Hello</p>
    <p>Hey</p>
</main>

p:nth-of-type(2) { ... }

16. Write the CSS to show the menu items only when hovering over the nav
<nav>
	<h2>MENU</h2>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

nav li { display: none; }
nav:hover li { display: block; }

17. Which category of CSS properties are all inherited?
Font and text properties

18. What do the units vw and vh mean?
Viewport widths and viewport heights (on a scale of 100). 1 vw is 1% of the available viewport width for example.

19. How do you set a top-margin to 2% of a site's width?
margin-top: 2vw;

20. What are the 2 methods we've used to make block elements flow horizontally; what are the side effects of each method?
a) display: inline-block
- extra spacing between elements treated as characters can be removed by setting the font-size to 0 on the parent
b) float: left or right
- Unfloated sibling that follows must be cleared to the corresponding left or right (or both)
- Parent elements require clearfix to assume the height of their children (to avoid height collapse)

21. What are collapsing margins and how do you address them?
Collapsing margins occur most commonly when:
a) a bottom margin of an element is followed by a top margin of a sibling.
- In this case, the total margin between the elements is the max of the two margins instead of the sum
- This can be corrected by floating the elements
b) a first child element has margin-top inside it's parent, and the margin is placed outside the parent instead
- This can be corrected by placing any upper "barrier" such as padding-top or border-top on the parent

22. Write the CSS property: value to make an inline element flow vertically?
display: block;

23. Write the CSS property: value to horizontally center a fixed-width block element inside a parent?
margin: 0 auto;

24. Write the CSS property: value to vertically center a this text if the section tag's height is 100px:
<section>Hello</section>

line-height: 100px;

25. In which HTML tag rule set is it good practice to place all font/text default properties in CSS and why?
body

26. For floated elements inside a parent, how do we fix the parent's height from
   collapsing? State the answer and write the CSS.
clearfix applied directly to the element's selector or a class that is added to the element:
::after {
    content: "";
    clear: both;
    display: table;
}

27. What CSS property: value; is used to stop a unfloated element from sliding
   up and behind it's floated, previous sibling?
clear: left, right or both;

28. position: relative positions an element is relative to what?
It's static position

29. For non-static positioning, what additional properties are required?
At least one vertical and one horizontal property
top, bottom and left, right

30. The position (eg, properties top, bottom, left or right) of absolute-positioned elements are in reference to what?
The first non-static ancestor

31. What do each of these selectors mean? (state what is selected for each)
article>p    /* all p tags that are immediate children of article tags */
nav li:nth-child(2):hover   /* the 2nd li, when hovered, inside a nav tag */
p::after  (and what property is the partner to this selector)  /* content: url(); or content: "string"; */
p+img   /* all image tags that immediately follow (sibling) p tags */
input[type="radio"]  /* all input tags with the attribute type="radio" (eg, all radio buttons) */

32. How do you set default styles in a website so the box model values are predictable for all elements across multiple browsers?
Use a reset such as normalize.css or Eric Meyer's reset.

33. How do you use google fonts and from which file to you access them (HTML or CSS)?
Use the @import rule to embed them in the CSS file so that all style information remains in the CSS file