HTML Flashcards

1
Q

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

A

<head>
</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>
</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

Inside <html> element

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

Tell the browser what version of HTML you’re using.

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

Give five examples of HTML element types.

A

<title>
<head>
<body>
<p>
<img></img>
</p></body></head></title>

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

Attributes provide additional information about the contents of an element.

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

©

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

always appear to start on a new line in the browser window.

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

always appear to 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

Take up full width of the containing block - 100%. Height determined by content - Auto.

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

width - auto
height - auto

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

<ol> lists where each item in the list is numbered.
<ul> lists that begin with a bullet point (rather than characters that indicate order).
</ul></ol>

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

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

A

Block

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

What HTML tag is used to link to another website?

A

<a></a>

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

What is an absolute URL?

A

starts with
the domain name for that site, and can be followed by the path to a specific page. If no page is specified, the site will display the homepage.

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

What is a relative URL?

A

link to files within your own files.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
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
17
Q

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

A

use 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
18
Q

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

A

Repeat the ../ 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
19
Q

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

A

just use the file name. (Nothing else is needed.)

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

What is the purpose of an HTML form element?

A

refer to different elements that allow you to collect information from visitors to your site.

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

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

A

inline

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

What purpose do the thead and tbody elements serve?

A

to show the difference from the first row and the rest of the data in the table

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

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

A

declaration block
property
value
Selector

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

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

A

.selector

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

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

A

name of the element

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

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

A

selector

Pound sign
Octothorpe

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

What CSS properties make up the box model?

A

margin
padding
border
height
width

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

Which CSS property pushes boxes away from each other?

A

margin

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

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

A

padding

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

What is a pseudo-class?

A

a class that comes about from a special state on the page.

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

What are CSS pseudo-classes useful for?

A

user interaction and less work when loading in data.

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

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

A

row

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

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

A

no wrap

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

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

A

because they are block elements

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

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

A

row

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

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

A

containers rows columns

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

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

A

at least one

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

What is the purpose of a container?

A

a boundary for content

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

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

A

it will move relative to where it should exist on the page

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

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

A

its removed from the document flow

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

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

A

it appears in where it normally would, or relative to it normal position based on properties set

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

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

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

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

A

appear on the page with in its nearest non static ancestor

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

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

A

set the containing block to position:relative

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

What are the four box offset properties?

A

top

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

What is the purpose of variables?

A

to store data for the future

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

How do you declare a variable?

A

var
let
const

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

How do you initialize (assign a value to) a variable?

A

=

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

What characters are allowed in variable names?

A

letters
numbers
$
_

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

What does it mean to say that variable names are “case sensitive”?

A

the same word with different capitalization will not be the same variable

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

What is the purpose of a string?

A

to hold text

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

What is the purpose of a number?

A

math

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

What is the purpose of a boolean?

A

if a state is true or false

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

What does the = operator mean in JavaScript?

A

assigns a value

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

How do you update the value of a variable?

A

name of variable = value

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

What is the difference between null and undefined?

A

null is intentionally empty
undefined usually means something i missing

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

Why is it a good habit to include “labels” when you log values to the browser console?

A

without it just prints a value with out context

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

What data type is returned by an arithmetic operation?

A

a number

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

What is string concatenation?

A

combining strings

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

What purpose(s) does the + plus operator serve in JavaScript?

A

addition or concatenation

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

What data type is returned by comparing two values (<, >, ===, etc)?

A

boolean

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

What does the += “plus-equals” operator do?

A

adds or concatenate and assigns

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

What are objects used for?

A

to store like data

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

What are object properties?

A
65
Q

How do you remove a property from an object?

A
66
Q

What are the two ways to get or update the value of a property?

A

.notation
[] notation

67
Q

What are arrays used for?

A

lists of things in order

68
Q

How are arrays different from “plain” objects?

A

they are in order

69
Q

What number represents the first index of an array?

A

[0]

70
Q

What is the length property of an array?

A

.length

71
Q

Why do we log things to the console?

A

to see what our code is doing while its running

72
Q

What is a method?

A

function that is stored withing a object

73
Q

How is a method different from any other function?

A

a function attached to an object

74
Q

How do you remove the last element from an array?

A

.pop()

75
Q

How do you round a number down to the nearest integer?

A

Math.floor()

76
Q

How do you generate a random number?

A

Math.random()

77
Q

How do you delete an element from an array?

A

.splice()

78
Q

How do you append an element to an array?

A

.push()

79
Q

How do you break a string up into an array?

A

.split()

80
Q

Do string methods change the original string? How would you check if you weren’t sure?

A

no strings are immutable.
try it or console.log

81
Q

Is the return value of a function or method useful in every situation?

A

No

82
Q

What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?

A

MDN

83
Q

What is the purpose of a loop?

A

repeat a code block until a condition is no longer met

84
Q

What is the purpose of a condition expression in a loop?

A

tells the loop when to stop

85
Q

What is the purpose of a condition expression in a loop?

A

tells the loop when to stop

86
Q

What does “iteration” mean in the context of loops?

A

how many times the code block ran

87
Q

When does the condition expression of a while loop get evaluated?

A

at the beginnning of each iteration of the loop

88
Q

When does the initialization expression of a for loop get evaluated?

A

only once

89
Q

When does the condition expression of a for loop get evaluated?

A

before each iteration of the code block

90
Q

When does the final expression of a for loop get evaluated?

A

at the end of each iteration of the loop

91
Q

Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?

A

break

92
Q

What does the ++ increment operator do?

A

increments value by 1

93
Q

How do you iterate through the keys of an object?

A

for in loop

94
Q

What are the four components of “the Cascade”.

A

source order
inheritance
specificity
!important

95
Q

What does the term “source order” mean with respect to CSS?

A

the order the rules appear in the actual stylesheet

96
Q

How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?

A

inherit

97
Q

Why is using !important considered bad practice?

A

it overrides all other rules

98
Q

Why do we log things to the console?

A

verify data is there

99
Q

What is a “model”?

A

a representation or recreation of something

100
Q

Which “document” is being referred to in the phrase Document Object Model?

A

the html document

101
Q

What is the word “object” referring to in the phrase Document Object Model?

A

data

102
Q

What is a DOM Tree?

A

the tree

103
Q

Why might you want to assign the return value of a DOM query to a variable?

A

so you dont have query the entire document every time

104
Q

What console method allows you to inspect the properties of a DOM element object?

A

console.dir()

105
Q

Why would a

 tag need to be placed at the bottom of the HTML content instead of at the top?
A

the js needs to load after the all the html has loaded

106
Q

What does document.querySelector() take as its argument and what does it return?

A

a css selector
the element

107
Q

What does document.querySelectorAll() take as its argument and what does it return?

A

a css selecter
a node list

108
Q

What is the purpose of events and event handling?

A

if something happened do something

109
Q

Are all possible parameters required to use a JavaScript method or function?

A

no

110
Q

What method of element objects lets you set up a function to be called when a specific type of event occurs?

A

addEventListener

111
Q

What is a callback function?

A

passing a function around as an argument

112
Q

What object is passed into an event listener callback when the event fires?

A

an event object with all the details of the event

113
Q

What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?

A

the area in the

114
Q

What is the className property of element objects?

A

the class attribute in the html

115
Q

Does the document.createElement() method insert a new element into the page?

A

no

116
Q

How do you add an element as a child to another element?

A

parent.appendChild(child)

117
Q

What do you pass as the arguments to the element.setAttribute() method?

A

the name of the attribute, the new value

118
Q

What is the textContent property of an element object for?

A

changing or viewing the text within an element

119
Q

What is the event.target?

A

the element that triggered the event

120
Q

Why is it possible to listen for events on one element that actually happen its descendent elements?

A

so that those events can be delegated

121
Q

What DOM element property tells you what type of element it is?

A

.tagName

122
Q

What does the element.closest() method take as its argument and what does it return?

A

css selector as a string

123
Q

How can you remove an element from the DOM?

A

.remove()

124
Q

If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?

A

add the eventListener to the parent

(event delegation)

125
Q

What is the event.target?

A
126
Q

What is the affect of setting an element to display: none?

A
127
Q

What does the element.matches() method take as an argument and what does it return?

A
128
Q

How can you retrieve the value of an element’s attribute?

A
129
Q

At what steps of the solution would it be helpful to log things to the console?

A

all of them!

130
Q

If you were to add another tab and view to your HTML, but you didn’t use event delegation, how would your JavaScript code be written instead?

A
131
Q

What is a method?

A

a function defined to a property of an object

132
Q

How can you tell the difference between a method definition and a method call?

A

method call follows the name of the object after a ‘.’

133
Q

How is a method different from any other function?

A
134
Q

What is the defining characteristic of Object-Oriented Programming?

A

objects can contain both data (as properties) and behavior (as methods).

135
Q

What are the four “principles” of Object-Oriented Programming?

A

Abstraction
Encapsulation
Inheritance
Polymorphism

136
Q

What is “abstraction”?

A

being able to work with (possibly) complex things in simple ways.

137
Q

What does API stand for?

A

application programming interface

138
Q

What is the purpose of an API?

A

it is a way for computer programs to communicate with each-other

139
Q

What kind of inheritance does the JavaScript programming language use?

A

prototypal inheritance

140
Q

What is a prototype in JavaScript?

A

an object that all created instances can use

141
Q

If an object does not have it’s own property or method by a given key, where does JavaScript look for it?

A

prototype

142
Q

What is a client?

A

it requests content or service from a server.
they initiate communication sessions with servers, which await incoming requests.

143
Q

What is a server?

A

providers of a resource or service

144
Q

Which HTTP method does a browser issue to a web server when you visit a URL?

A

GET

145
Q

What three things are on the start-line of an HTTP request message?

A

An HTTP method
The request target
The HTTP version

146
Q

What three things are on the start-line of an HTTP response message?

A

The protocol version
A status code
A status text

147
Q

What are HTTP headers?

A

let the client and the server pass additional information with an HTTP request or response

148
Q

Where would you go if you wanted to learn more about a specific HTTP Header?

A

MDN

149
Q

Is a body required for a valid HTTP request or response message?

A

NO

150
Q

What is AJAX?

A

a programming practice of building complex, dynamic webpages using a technology known as XMLHttpRequest.

151
Q

What does the AJAX acronym stand for?

A

Asynchronous JavaScript And XML

152
Q

Which object is built into the browser for making HTTP requests in JavaScript?

A

XMLHttpRequest.

152
Q

What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?

A

‘load’

153
Q

What is a code block?

A

code with in curly braces

154
Q

What does block scope mean?

A

that the scope of the variables is only with in that codeblock

155
Q

What is the scope of a variable declared with const or let?

A

block scope

156
Q

What is the difference between let and const?

A
157
Q

Why is it possible to .push() a new value into a const variable that points to an Array?

A
158
Q

How should you decide on which type of declaration to use?

A