HTML Flashcards

1
Q

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

A

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

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

html

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

What is the purpose of a declaration?

A

The declaration tells the web browser what html version the document is written in.

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

Give 5 examples of HTML element tags.

A
  • head
  • body
  • img
  • div
  • p
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

to give each element its own additional/unique information

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, trademark

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

block-level elements take up the whole line

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

inline elements only take up space they only need

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

width is 100% of the viewport and height is the height of the content

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 is width of the content and height is also the height of the content

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

ordered lists with numbers while unordered lists with dots

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

What HTML tag is used to link to another website?

A

anchor tag

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

What is an absolute URL?

A

points to an external application / location

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

What is a relative URL?

A

relative URLs’ path generally refers to a resource on the same machine as the current document.

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

../

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

/

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

../../

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

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

it represents a document section containing interactive controls for submitting information

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

input, label, select, button, textarea

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

Give 3 examples of type attributes for HTML input elements

A

text, radio, checkbox

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

Is an HTML 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
25
Q

What are the six primary HTML elements for creating tables?

A

table, thead, tbody, tr, th, td

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

What purpose do the thead and tbody elements serve?

A

help distinguish between the main content and the first / last rows

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

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

A
  1. Academic grades

2. Restaurant customers

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

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

A

selector, declaration, property, value

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

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

A

.

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

In CSS, how do you select elements by their type?

A

element name

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

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

A

#

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

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

A

color keywords, rgb color values, hexadecimal color values

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

What CSS properties make up the box model?

A

content (width, height), padding, border, margin

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

What is a pseudo-class?

A

class that allows you to change the appearance of elements when a user is interacting with them.

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

What are CSS pseudo-classes useful for?

A

event based styling

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

Name at least two units of type size in CSS

A

pixels, rem

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

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

A

font-family property

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

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

A

nowrap

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

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

A

they are block level elements

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

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

A

static

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

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

A

It doesn’t

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

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

A

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

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

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

A

It is removed from the document flow entirely (They don’t exists)

any sibling elements will shift to the empty space

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

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

A

gets positioned within the nearest non-static ancestor element

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

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

A

you can set the parent element’s position to relative.

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

What are the four box offset properties?

A

top, bottom, left, right

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

What is the purpose of variables?

A

they are used to store information to be referenced and manipulated

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

How do you declare a variable

A

variable keyword: var, let, const

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

What characters are allowed in variable names?

A

letter, $, _, numbers (but not in the beginning)

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

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

A

variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.

i.e. data does not equal Data

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

What is the purpose of a string?

A

storing and manipulating text

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

What is the purpose of a boolean?

A

comparison (making decisions)

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

What does the = operator mean in JavaScript?

A

assignment

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

how do you update the value of a variable?

A

variable name and then an “=” with the new value.

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

What is the difference between null and undefined?

A

null means “no value” whereas undefined means that “the variable has not been declared, or has not been given a value”

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

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

A

so we know the context of that value

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

Give five examples of JavaScript primitives.

A

number, string, boolean, null, undefined

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

What data type is returned by an arithmetic operation?

A

number

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

What is string concatenation?

A

putting strings together

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

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

A

concatenation

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

What data type is returned by comparing two values?

A

boolean

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

What does the += operator do?

A

you add the value of the variable to the value and reassign that value to the variable.

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

What are objects used for?

A

storing property and values

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

What are object properties?

A

a simple association between name and value

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

Describe object literal notation.

A

var student = {

}

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

How do you remove a property from an object?

A

delete operator

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

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

A

dot notation, bracket notation

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

What are arrays used for?

A

it is used to store different elements, often when we want to store list of elements and access them by a single variable

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

Describe array literal notation.

A

var myArray = [ ] ;

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

How are arrays different from “plain” objects?

A

ordered (indexed), have a .length property

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

What number represents the first index of an array?

A

0

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

What is the length property of an array?

A

.length: returns the amount of elements in the array

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

How do you calculate the last index of an array?

A

myArray[myArray.length - 1]

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

What is a function in JavaScript?

A

set of statements that performs a task or calculates a value

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

Describe the parts of a function definition.

A

function keyword, parameters, function code block

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

Describe the parts of a function call.

A

functionName(parameter);

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

When comparing them side-by-side, what are the differences between a function call and a function definition?

A

parameters vs arguments, no function keyword, no codeblock

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

Why are function parameters useful?

A

you can reuse the function for any other relevant situation

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

What two effects does a return statement have on the behavior of a function?

A

ends the function, returns control of the calling function

86
Q

Why do we log things to the console?

A

To check if the output is what we want.

87
Q

What is a method?

A

method is a function value that is assigned to a property in an object.

88
Q

How is a method different from any other function?

A

method is stored in an object

89
Q

How do you remove the last element from an array?

A

.pop()

90
Q

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

A

Math.floor( )

91
Q

How do you generate a random number?

A

Math.random( )

92
Q

How do you delete an element from an array?

A

.shift( ) & .pop( ) & .splice( )

93
Q

How do you append an element to an array?

A

.push( )

94
Q

How do you break a string up into an array?

A

.split( )

95
Q

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

A

No, console.log original string

96
Q

Roughly how many strings methods are there according to the MDN Web docs?

A

51

97
Q

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

A

no

98
Q

Roughly how many array methods are there according to the MDN Web docs?

A

38

99
Q

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

A

M D N

100
Q

Give 6 examples of comparison operators.

A

, >, ===, !==

101
Q

What data type do comparison expressions evaluate to?

A

boolean

102
Q

What is the purpose of an if statement?

A

it’s how computers make decisions

103
Q

Is else required in order to use an if statement?

A

no

104
Q

Describe the syntax (structure) of an if statement.

A

if (conditional) {

}

105
Q

What are the three logical operators?

A

&&, | |, !

106
Q

How do you compare two different expressions in the same condition?

A

logical operators

107
Q

What is the purpose of a loop?

A

as long as the conditional is true, it runs the code block

108
Q

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

A

stopping the loop

109
Q

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

A

one execution of the loop code block

110
Q

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

A

before the code block executes

111
Q

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

A

before anything

112
Q

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

A

after the initialization expression and before the loop code block

113
Q

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

A

after each code block is run

114
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;

115
Q

What does the ++ increment operator do?

A

increment the value by 1

116
Q

How do you iterate through the keys of an object?

A

for in loop

117
Q

What are the four components of “the Cascade”?

A

Source order, Inheritance, Specificity, Important

118
Q

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

A

the order in which you write your code matters.

119
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

inheritance

120
Q

List the three selector types in order of increasing specificity.

A

type, class, id

121
Q

Why is using !important considered bad practice?

A

it messes with specificity

122
Q

Why do we log things to the console?

A

To check if we get the desired output

123
Q

What is a “model”?

A

representation of something larger (not the original thing)

124
Q

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

A

HTML

125
Q

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

A

JavaScript object

126
Q

What is a DOM Tree?

A

objects that branch out modeling the DOM

127
Q

Give two examples of document methods that retrieve a single element from the DOM.

A

.querySelector( ), .getElementById( )

128
Q

Give one example of a document method that retrieves multiple elements from the DOM at once

A

.querySelectorAll( )

129
Q

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

A

so you can manipulate it in the future

130
Q

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

A

console.dir( )

131
Q

Why would a tag need to be placed at the bottom of the HTML content instead of at the top?

A

you need the HTML to load first

132
Q

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

A

string selector, element object

133
Q

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

A

string, NodeList

134
Q

What is the purpose of events and event handling?

A

handle user interactions

135
Q

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

A

no

136
Q

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

A

addEventListener

137
Q

What is a callback function?

A

when a function gets passed in as an argument

138
Q

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

A

event object

139
Q

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

A

is where the event occurred

140
Q

What is the difference between these two snippets of code?

A

The second one calls the function meaning it will be executed before the event listener gets called

141
Q

What is the className property of element objects?

A

class value take from the html element

142
Q

How do you update the CSS class attribute of an element using JavaScript?

A

className, classList

143
Q

What is the textContent property of element objects?

A

the text inside the elements

144
Q

How do you update the text within an element using JavaScript?

A

textContent, innerText, innerHTML

145
Q

Is the event parameter of an event listener callback always useful?

A

no

146
Q

Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?

A

more complicated

147
Q

Why is storing information about a program in variables better than only storing it in the DOM?

A

so we can use it again in the future

148
Q

What does the transform property do?

A

applies a 2D or 3D transformation to an element

149
Q

Give four examples of CSS transform functions.

A

rotate, scale, translate, skew

150
Q

The transition property is shorthand for which four CSS properties?

A

delay, duration, property, timing-function

151
Q

What event is fired when a user places their cursor in a form control?

A

‘focus’

152
Q

What event is fired when a user’s cursor leaves a form control?

A

‘blur’

153
Q

What event is fired as a user changes the value of a form control?

A

‘input’

154
Q

What event is fired when a user clicks the “submit” button within a ?

A

‘submit’

155
Q

What does the event.preventDefault( ) method do?

A

prevent any default actions from events

156
Q

What does submitting a form without event.preventDefault() do?

A

refreshes the page

157
Q

What property of a form element object contains all of the form’s controls?

A

element property

158
Q

What property of a form control object gets and sets its value?

A

value property

159
Q

What is one risk of writing a lot of code without checking to see if it works so far?

A

not knowing where your error is

160
Q

What is an advantage of having your console open when writing a JavaScript program?

A

You can immediately recognize an error or incorrect output

161
Q

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

A

no

162
Q

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

A

appendChild()

163
Q

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

A

the attribute name and the value of that attribute

164
Q

What steps do you need to take in order to insert a new element into the page?

A

create the element, append it to an already existing element

165
Q

What is the textContent property of an element object for?

A

to change the text value of the element

166
Q

Name two ways to set the class attribute of a DOM element.

A

setAttribute( ), className

167
Q

What are 2 advantages of defining a function to create something (like the work of creating a DOM tree)?

A

reusable, easy to change

168
Q

Give two examples of media features that you can query in an @media rule

A

hover, width

169
Q

Which HTML meta tag is used in mobile-responsive web pages?

A

viewport meta tag

170
Q

What is the event.target?

A

a reference to the object onto which the event was dispatched

171
Q

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

A

event bubbling

172
Q

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

A

.nodeName

173
Q

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

A

a css selector, the closest element

174
Q

How can you remove an element from the DOM?

A

remove( )

175
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 an eventListener to the parent element

176
Q

What is a breakpoint in responsive Web Design?

A

the point in which the page changes layout due to media queries

177
Q

What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?

A

there are other large range of screens. If we use hard set px it only looks nice on the desired screen size

178
Q

What is a method?

A

It is a function stored as a property in an object

179
Q

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

A

method call: has parentheses and dot notation

method definition: has function keyword and a code block

180
Q

Describe method definition syntax (structure)

A

method: function ( ) { code }

181
Q

Describe method call syntax (structure)

A

obj.method( )

182
Q

How is a method different from any other function?

A

It is is stored in an obj rather than a variable.

183
Q

What is the defining characteristic of Object-Oriented Programming?

A

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

184
Q

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

A

Abstraction, Encapsulation, Inheritance, Polymorphism

185
Q

What is “abstraction”?

A

To make something complicated into something simple

186
Q

What does API stand for?

A

Application programming interface

187
Q

What is the purpose of an API?

A

communication between softwares

188
Q

What is this in JavaScript?

A

An implicit parameter of a function

189
Q

What does it mean to say that this is an ‘implicit parameter’?

A

It means that even though we don’t see the keyword this, it’s implied (built-in) inside of the function.

190
Q

When is the value of this determined in a function; call time or definition time?

A

call time

191
Q

How can you tell what the value of this will be for a particular function or method definition?

A

There is no way to find out what this is

192
Q

How can you tell what the value of this is for a particular function or method call?

A

the object on the left side of the dot

193
Q

What kind of inheritance does the JavaScript programming language use?

A

prototypal inheritance

194
Q

What is a prototype in JavaScript?

A

an object that contains properties and methods that can be used by other objects

195
Q

How is it possible to call methods on strings, arrays, and numbers even though those methods don’t actually exist on objects, arrays, and numbers?

A

prototypal inheritance

196
Q

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

A

look at the prototype in the prototype chain

197
Q

What does the new operator do?

A

Creates a new instance of an object that contains the prototype’s properties

198
Q

What property of JavaScript functions can store shared behavior for instances created with new?

A

prototype property

199
Q

What does the instanceof operator do?

A

tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object

200
Q

What is a client?

A

a piece of computer hardware that accesses a service made available by a server as part of the client-server model of computer networks.

201
Q

What is a server?

A

a piece of computer hardware or software that provides functionality for other programs or devices, called “clients”

202
Q

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

A

GET

203
Q

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

A

HTTP method, request target (usually URL), HTTP version

204
Q

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

A

protocol version (usually HTTP/1.1), status code, status text

205
Q

What are HTTP Headers?

A

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

206
Q

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

A

MDN

207
Q

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

A

no

208
Q

What is AJAX?

A

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

209
Q

What does the AJAX acronym stand for?

A

stands for Asynchronous JavaScript and XML

210
Q

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

A

XMLHttpRequest()

211
Q

What event is fires by XMLHttpRequest objects when they are finished loading the dat from the server?

A

load

212
Q

An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?

A