Week 1 Flashcards

1
Q

Where do you put non-visible content about the HTML document?

A

<head> element
</head>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Where do you put visible content about the HTML document?

A

<body> element
</body>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Where do the <head> and <body> tags go in a valid HTML document?

A

The <head> goes after <html> and before <body>. <body> goes after the <head> and before the closing tag </html>.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is the purpose of a <!DOCTYPE> declaration?

A

To let the browser know which version of HTML we are using and for this case we are using HTML5.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Give 5 examples of HTML element types?

A

<head>, <body>, <a>, <html>, <p>
</p></html></a></body></head>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is the purpose of HTML attributes?

A

The purpose of the HTML attributes is to provide more information about the contents of an element by adding attributes to change anything about the contents.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Give an example of an HTML entity (escape character).

A

Copyright symbol: © or ©

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

How do block-level elements affect the document flow?

A

Elements that will always appear on a new line. Takes a block out of the document.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

How do inline elements affect the document flow?

A

Elements that continue on the same line as their neighbouring elements.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What are the default width and height of a block-level element?

A

The default height of a block-level element is the height of the content. The default width of a block-level element is the length of the page. The width and height can also be adjusted using CSS styling.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What are the default width and height of an inline element?

A

The default width and height of an inline element is according to the element that it is in.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is the difference between an ordered list and an unordered list in HTML?

A

An ordered list (<ol>) numbers the list. The unordered list (<ul>) puts the list into bullet points.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Is an HTML list a block element of an inline element?

A

A block element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What HTML tag is used to link to another website?

A

<a> tag</a>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is an absolute URL?

A

Has the https and is the entire link to another website

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is a relative URL?

A

When you are linking to other pages within the same site, you do not need to specify the domain name in the URL. You can use a shorthand known as relative URL. It does not have https

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

How do you indicate the relative link to a parent directory?

A

Use ( ../ ) to indicate the folder above the current one, then follow it with the file name.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

How do you indicate the relative link to a child directory?

A

The name of the child folder, followed by a forward slash, then the file name,

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

How do you indicate the relative link to a grand parent directory?

A

Use ( ../ ) twice: ( ../../ ) to indicate that you want to go up two folders (rather than one), then follow it with the file name.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

How do you indicate the relative link to the same directory?

A

Use the file name.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What is the purpose of an HTML form element?

A

The purpose is to collect information from visitors to your site.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Give 5 examples of form control elements.

A

Text input, Password input, Text Area, Radio Buttons, Checkboxes, Drop-down Boxes, Submit Buttons, Image Buttons, Uploading Files

23
Q

Give 3 examples of type attribute values for HTML <input></input> elements.

A

“text”, “password”, “radio”, “checkbox”, “file”, “submit”, “image”, “date”, “email”, “url”, “search”

24
Q

Is an HTML <input></input> element a block element or an inline element?

A

Inline element

25
Q

What are the 6 primary HTML elements for creating tables?

A

<table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>
</tfoot></tbody></thead></th></td></tr></table>

26
Q

What purpose do the <thead> and <tbody> elements serve?

A

<thead> -- The headings of the table should sit inside this element. It is used to group header content in an HTML table.

<tbody> -- The body should sit inside this element. Is used to group the body content in an HTML table.
</tbody></thead>

27
Q

Give 2 examples of data that would lend itself well to being displayed in a table.

A

Financial Reports, TV Schedules, Sports Results

28
Q

What are the names of the individual pieces of a CSS rule?

A

Selector, Curly Braces, Declaration block, Property, Value

29
Q

In CSS, how do you select elements by their class attribute?

A

Use ( . ) the period before the class attribute.
Ex: .class

30
Q

In CSS, how do you select elements by their tag name?

A

Use the tag name and nothing else.

Ex: If we are trying to select <p> element, we write p as our selector.

31
Q

In CSS, how do you select an element by its id attribute?

A

Use the (#) hashtag before the id attribute.

Ex: #id

32
Q

Name 3 different types of values you can use to specify colors in CSS.

A

Color name, Hex code, RGB values, Hue, Saturation, Brightness

33
Q

What CSS properties make up the box model?

A

Height, Width, Border, Margin, Padding, Content

34
Q

Which CSS property pushes boxes away from each other?

A

Margin

35
Q

Which CSS property add space between a box’s content and its border?

A

Padding

36
Q

What is a pseudo-class?

A

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user’s pointer hovers over the button and this selected button can then be styled.

37
Q

What are pseudo-classes useful for?

A

Highlight User’s Position

38
Q

Name two types of units that can be used to adjust font-size in CSS.

A

%, em , px

39
Q

What CSS property controls the font used for the text inside an element?

A

font-family

40
Q

What is the default flex-direction of a flex container?

A

Row

41
Q

What is the default flex-wrap of a flex container?

A

No wrap. Tries to fit everything on 1 line.

42
Q

Why do two div elements “vertically stack” on one another by default?

A

Because they are block elements

43
Q

What is the default flex-direction of an element with display: flex?

A

Row

44
Q

What are the three primary components of a page layout? (Which helper classes do you need?)

A

Container, Row, Column

45
Q

What is the minimum number of columns that you should put in a row?

A

1

46
Q

What is the purpose of a container?

A

The purpose of the container is to fill it with content. We use it on <div> elements and not <body> elements because body elements have their own container settings so it will mess it up.

47
Q

What is the default value for the position property of HTML elements?

A

Static

48
Q

How does setting position: relative on an element affect document flow?

A

Relative positioning moves an element in relation to where it would have been in normal flow.

49
Q

How does setting position: relative on an element affect where it appears on the page?

A

It will still stay in the normal flow but can be moved using offset properties (left, right, top, bottom properties).

50
Q

How does setting position: absolute on an element affect document flow?

A

The box is taken out of normal flow and no longer affects the position of other elements on the page.

51
Q

How does setting position: absolute on an element affect where it appears on the page?

A

The box will appear at the top of the page and can be adjusted using offset properties to specify where the element should appear in relation to its containing element.

52
Q

How do you constrain an absolutely positioned element to a containing block?

A

Absolutely positioned elements position themselves within the first non-static (relative) ancestor they have.

53
Q

What are the four box offset properties?

A

left, right, bottom. top