HTML/CSS Crash Course

Question 1

What is hypertext

Answer 1

text with links

Question 2

What does markup language mean

Answer 2

text that is marked up so you know what it is supposed to do. Like this <h1>Title Page</h1>

Question 3

What are the different attributes for input?

Answer 3

text, password, checkbox, radio, submit, button, email, number, date, file, hidden, search, url, tel.

Question 4

What are the common semantic html tags

Answer 4

<semantic>
article, section, header, main, nav, aside, footer
</semantic>

Question 5

How do you know you’re using semantic html correctly?

Answer 5

There is a clear understanding of the structure of the page without needing visuals from the browser.

Question 6

What does the <pre> tag do?

Answer 6

The preformatted text tag. This tag preserves whitespace, which can be useful when indentation and newlines need to be preserved.

Question 7

What are <tr> and <td>?

Answer 7

tr is a single row in the table, td is a single piece of data in the table

Question 8

What would one use to group the table head and table body

Answer 8

<thead> and <tbody>
</tbody></thead>

Question 9

What is the scope attribute used for?

Answer 9

It tells someone using a screen reader if the table heading is for the row or column. <th scope='col'>Budget</th>

Question 10

What is <th>?

Answer 10

The heading of the data. This tells you what the data you’re looking at is. ie budget, spending, etc

Question 11

How would you make a title for the table?

Answer 11

<caption>
</caption>

Question 12

What is the name attribute used for in an input

Answer 12

It is used for form submission, the name is the key in the key value pair sent to the server.
It is also used when grouping inputs for a radio button.
Also form data retrieval with JavaScript, ie document.forms[“myForm”][“username”].value. where username is the name value.

Question 13

What is the for attribute used for in the label tag?

Answer 13

It is used to associate that label with an input with that id.
for=”username” in the label for id=”username” in the input.

Question 14

What is an attribute selector?

Answer 14

[type=”submit”] would select all elements with the type attribute set to “submit”. [type] on it’s own would select all elements with a type regardless of the value.

Question 15

What is the special syntax that can be used with attribute selectors?

Answer 15

[href*=”blahblah”] would select and href with “blahblah” at any location.
[href^=”blahblah”] would select and href with “blahblah” at the beginning.
[href$=”blahblah”] would select and href with “blahblah” at the end.

Question 16

What is a descendent combinator?

Answer 16

selector1 selector2 {
this selects all elements that match selector2 that
are descendents of selector1
}

Question 17

What is a child combinator?

Answer 17

selector1 > selector2 {
this selects all elements that match selector2 that
are a direct child of selector1
}

Question 18

What is a sibling combinator?

Answer 18

selector1 ~ selector2 {
this selects all elements that match selector2
and are a sibling of an element matching selector1
}

Question 19

What is an adjacent sibling combinator?

Answer 19

selector1 + selector2 {
this selects all elements that match selector2
and have an element matching selector1 directly before
them in the dom.
}

Question 20

Pseudo-classes in CSS

Answer 20

Pseudo-classes are used in CSS to define special states of an element. They allow you to apply styles based on user interaction, an element’s position, or other conditions. Pseudo-classes are prefixed with a single colon (:).

button:hover {
color: blue;
}

Question 21

Pseudo-elements in CSS

Answer 21

Pseudo-elements are used in CSS to style specific parts of an element or to insert virtual elements for styling purposes. They allow you to target and style sub-parts of an element, such as the first line or before and after its content. Pseudo-elements are prefixed with a double colon (::), though a single colon (:) can be used for backward compatibility with older browsers.

p::first-line {
font-weight: bold;
}

p::before {
content: “Something before the paragraph”
}

p::after {
content: “Something after the paragraph”
}

::marker {
color: blue;
}

Question 22

What are the weighted specificity of selectors in CSS?

Answer 22

Inline styles: 1000
IDs: 100
Classes: 10
Pseudo-Classes: 10
Attributes: 10
Elements: 1
Pseudo-Elements: 1

Question 23

What is the difference between setting font-size in em or rem?

Answer 23

em is relative to the parent’s font size and rem is relative to the root font size. If not set the default root is 16px. You can change this by setting the font size of html or setting :root { font-size: ??px }

Question 24

What is %, vw, and vh?

Answer 24

You can set a % with is the percentage relative to the parent container. vw is a percentage of the viewport, so 50vw would be 50% of the viewport. vh is the same, but viewport height.

Question 25

What is ch used for?

Answer 25

It’s specifically best to set the paragraph length. A ch of 60 would set the max characters on a line of a paragraph to 60. Keeping this between 50 - 70 is best.

Question 26

CSS Display Values: inline, block, and inline-block

Answer 26

inline: Elements flow within the current line, without starting a new line. Width and height properties do not apply. Examples: <span>, <a>.</a></span>

block: Elements take up the full width available, starting on a new line and forcing following content to a new line. Width and height properties apply. Examples: <div>, <p>, <h1>-<h6>.

inline-block: A hybrid of inline and block. Elements flow within the current line, like inline, but can have width and height set, like block.

Question 27

When do the margins collapse and take the larger of the two margins instead of adding the margins of elements together?

Answer 27

When it’s top or bottom margins. Adjacent horizontal margins are added together.

Question 28

What does this do in your CSS?

• { box-sizing: border-box; }

Answer 28

Child elements are not able to overflow their parents. If the parent is 100px and the child is set to 110px, it will not expand outside the parents 100px.

Question 29

CSS Position: static

Answer 29

The default position value. Elements are positioned according to the normal flow of the document.

Question 30

CSS Position: relative

Answer 30

Elements are positioned relative to their normal position. Offsetting properties (top, right, bottom, left) will move the element from its normal position.

Question 31

CSS Position: absolute

Answer 31

Elements are positioned relative to the nearest positioned ancestor (not static). If no positioned ancestors, it’s positioned relative to the viewport. Offsetting properties determine its final position.

Question 32

CSS Position: fixed

Answer 32

Elements are positioned relative to the viewport, meaning they stay in the same place even if the page is scrolled. Offsetting properties determine its final position.

Question 33

CSS Position: sticky

Answer 33

A hybrid of relative and fixed. Elements are positioned based on the user’s scroll position. They “stick” in place within a container until a certain scroll point.

You must also specify at least one of top, bottom, left, or right fit sticky positioning to work.

Question 34

Flexbox

Answer 34

A layout model known as the Flexible Box Layout Module. Useful for building responsive designs with row or column layouts. Elements can be made a flex container with display: flex, and its direct children become flex items.

Question 35

Flex Container: flex-direction

Answer 35

Determines the main-axis direction. Values:

row
column
row-reverse
column-reverse

Question 36

Flex Container: justify-content

Answer 36

Positions elements along the main-axis. Values:

flex-start
flex-end
center
space-around
space-between
space-evenly

Question 37

Flex Container: align-items

Answer 37

Positions elements along the cross-axis. Values:

flex-start
flex-end
center
baseline
stretch

Question 38

Flex Container: flex-wrap

Answer 38

Determines if items wrap to new lines. Values:

wrap
nowrap
wrap-reverse

Question 39

Flex Container: align-content

Answer 39

Positions lines along the cross-axis when items wrap. Values:

flex-start
flex-end
center
space-around
space-between
stretch

Question 40

Flex Container: flex-flow

Answer 40

A shorthand for flex-direction and flex-wrap.

Question 41

Flex Container: gap

Answer 41

Space between flex items. Can use row-gap and column-gap for specific directions

Question 42

Flex Item: align-self

Answer 42

Overrides the align-items value of the flex container.

Question 43

Flex Item: flex-basis

Answer 43

Initial size of the item along the main-axis.

flex-basis is useful when you want flex items to start from a certain size, but still want them to grow or shrink in relation to other items in the flex container.

Question 44

Flex Item: flex-grow

Answer 44

Determines if the item grows into extra space. Larger values take more space proportionally.

Question 45

Flex Item: flex-shrink

Answer 45

Determines if an item shrinks when items are too large for the container.

Determined the “share” of shrinking each item. If item1 has 1 and item2 has 3, the proportion of shrinking would be 25% vs 75%. So if it needed to shrink 100px the first world shrink 25px and the second item would shrink 75px.

Question 46

Flex Item: flex

Answer 46

Shorthand for flex-grow, flex-shrink, and flex-basis.

Question 47

Flex Item: order

Answer 47

Changes the order of the flex item amongst others. Default is 0.