HTML Flashcards

1
Q

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

A

In the head element

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

In the body element

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

In the 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

To tell what type of document the file is and which version of html to use

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

What is the purpose of HTML attributes?

A

To attach extra information to elements

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

How do block-level elements affect the document flow?

A

Block elements starts on a new line, take up the entire width of the page and elements after it starts on a new line

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

How do inline elements affect the document flow?

A

Inline only takes up space as needed

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

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

A

Width is 100% and height is auto

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

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

A

Width and height are auto

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

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

A

Ordered lists is numbered and unordered lists use bullet points

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

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

A

Block element

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

What is an absolute URL?

A

The full URL address

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

What is a relative URL?

A

A URL without the domain name, partial directory

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

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

A

../(file name)

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 child directory?

A

(child directory name)/(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 grand parent directory?

A

../../(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 the same directory?

A

file name

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

What is the purpose of an HTML form element?

A

collect data from user

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

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

What are the six primary HTML elements for creating tables?

A

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

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

Organizing and formatting information

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

selector, declaration block, property, property value

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

.(class name)

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 type?

A

element name

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

(id name)

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

content, border, margin, padding

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

Defining a special state of an element

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

styling elements in specific cases

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

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

A

font-family

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

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

A

div elements are block elements

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

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

A

Does not affect the flow

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

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

A

Does not affect the position of its appearance

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

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

A

It takes it out of the flow

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

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

A

It appears on the first non-static element from the parental hierarchy

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

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

A

make the containing block non-static

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

What is the purpose of variables?

A

To hold values to be used later

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

How do you declare a variable?

A

var (variable name)

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

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

A

using the = assignment operator

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

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

A

the variable must be spelled exactly or else it will be considered a different variable

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

What is the purpose of a string?

A

to hold any series of characters

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

What is the purpose of a number?

A

for calculation and counting

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

What is the purpose of a boolean?

A

for comparison that gives a define answer to determine the next course of action

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

What does the = operator mean in JavaScript?

A

to assign a value to a variable

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

How do you update the value of a variable?

A

assign the variable a new value

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

What is the difference between null and undefined?

A

null is purposely assigning no value, undefined is declaring a variable without assigning a value

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

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

A

for other people and yourself to know which variables the values belong

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

What is string concatenation?

A

combining strings to form one string

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

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

A

concatenating strings and adding numbers

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

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

A

adding/concatenating the value to the value of the variable

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

What are objects used for?

A

to organize data into groups without any specific order

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

What are object properties?

A

the variables in the object

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

Describe object literal notation.

A

{ properties }

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

How do you remove a property from an object?

A

using the delete operator

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

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

A

the . and []

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

What are arrays used for?

A

creating ordered lists of information

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

Describe array literal notation.

A

[]

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

How are arrays different from “plain” objects?

A
  • information within the array has an order

- arrays do not have alpha numerical property names

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

What is the length property of an array?

A

returns how much elements are in the array

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

How do you calculate the last index of an array?

A

array.length - 1

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

What is a function in JavaScript?

A

A re-usable block of code that performs a specific task

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

Describe the parts of a function definition.

A

function keyword, function name(optional), parentheses, parameter, code block, return statement(optional)

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

Describe the parts of a function call.

A

function name with parentheses

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

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

A

function call does not have the keyword function, does not have any code block, not followed by the {} and passes actual values

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

What is the difference between a parameter and an argument?

A

parameter is the name of the value and argument is the value being passed in

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

Why are function parameters useful?

A

it allows functions to be used in more than one way

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

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

A

function stops after reaching the return statement and the function must produce a value

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

Why do we log things to the console?

A

for debugging and checking the values

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

What is a method?

A

a function that is a property of an object

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

How is a method different from any other function?

A

it needs the object to access the method while a function doesn’t

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

How do you remove the last element from an array?

A

pop()

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

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

A

Math.floor()

84
Q

How do you generate a random number?

A

Math.random()

85
Q

How do you delete an element from an array?

A

splice()

86
Q

How do you append an element to an array?

A

push()

87
Q

How do you break a string up into an array?

A

split()

88
Q

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

A

Some methods probably does. Check MDN documentation and log the return value of the method if it has one

89
Q

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

A

no

90
Q

What data type do comparison expressions evaluate to?

A

boolean

91
Q

What is the purpose of an if statement?

A

for decision making. getting different results based on the conditions

92
Q

Is else required in order to use an if statement?

A

No

93
Q

Describe the syntax (structure) of an if statement.

A

key word if, the condition inside parentheses, { code block } , optional else

94
Q

What are the three logical operators?

A

||, &&, !

95
Q

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

A

&&, ||

96
Q

What is the purpose of a loop?

A

to run a block of code a certain amount of time

97
Q

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

A

To stop the loop

98
Q

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

A

executing the loop’s code block once

99
Q

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

A

before the loop starts and before each iteration

100
Q

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

A

after the initialization and before the first iteration

101
Q

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

A

before each iteration

102
Q

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

A

at the end of each iteration

103
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

104
Q

What does the ++ increment operator do?

A

increments the variable by 1

105
Q

How do you iterate through the keys of an object?

A

using a for in loop

106
Q

What are the four components of “the Cascade”.

A

source order, inheritance, specificity and important

107
Q

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

A

lower rules have more priority than higher rules

108
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 from parent element

109
Q

List the three selector types in order of increasing specificity.

A

id, class, element

110
Q

Why is using !important considered bad practice?

A

Makes debugging difficult

111
Q

What is a “model”?

A

a representation or imitation of something

112
Q

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

A

html document

113
Q

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

A

javascript object

114
Q

What is a DOM Tree?

A

a model showing the relationship between the different nodes that makes up the root node

115
Q

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

A

In case it needs to be used multiple times and will not have to query for it each time

116
Q

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

A

.dir()

117
Q

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

A

the html must be loaded and read first to create a model(DOM tree)

118
Q

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

A

takes in a string argument with a value of a css selector and returns the first element it finds

119
Q

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

A

takes in a string with a value of a css selector and reurns a node list of all the matching element it finds

120
Q

What is the purpose of events and event handling?

A

purpose of event to perform certain tasks when the user do interact with certain parts of the web page

121
Q

What do [ ] square brackets mean in function and method syntax documentation?

A

it means optionals parameter/argument

122
Q

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

A

.addEventListener()

123
Q

What is a callback function?

A

a function passed as an argument

124
Q

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

A

an object that contains the information of the event

125
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 reference to the element that fired the event

- check mdn for more information

126
Q

What is the difference between these two snippets of code?

  • element.addEventListener(‘click’, handleClick)
  • element.addEventListener(‘click’, handleClick())
A
  • replaces handClick with the definition

- replaces handleclick() with the return of the function

127
Q

What is the className property of element objects?

A

the property that gets and sets the class name of an element

128
Q

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

A

first get the reference to the element and then use the className property

129
Q

What is the textContent property of element objects?

A

returns all readable text within the element

130
Q

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

A

assigning a new value to the textContent

131
Q

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

A

no

132
Q

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

A

easier to access the data if stored in variables, do not have to keep querying the DOM

133
Q

What does the transform property do?

A

allows the element to be shown differently

134
Q

Give four examples of CSS transform functions.

A

translate, rotate, skew, scale

135
Q

The transition property is shorthand for which four CSS properties?

A

duration, delay, property, timing-function

136
Q

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

A

Focus

137
Q

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

A

Blur

138
Q

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

A

Input

139
Q

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

A

submit

140
Q

What does the event.preventDefault() method do?

A

The method prevents the current page from refreshing

141
Q

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

A

Refresh the current page

142
Q

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

A

elements property

143
Q

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

A

value property

144
Q

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

A

No

145
Q

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

A

.appendChild()

146
Q

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

A

a string with the value of a property name and another string used for the property value

147
Q

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

A
  • create new element

- query for an element and append the created element to it

148
Q

What is the textContent property of an element object for?

A

gets and sets the texts of the element

149
Q

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

A

viewport meta element

150
Q

What is the event.target?

A

the element where the event is fired from

151
Q

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

A

bubbling

152
Q

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

A

tagName property

153
Q

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

A
  • takes in a css selector name

- returns closest ancestor that matches the css selector name

154
Q

How can you remove an element from the DOM?

A

.remove()

155
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 click event to the parent/ancestor node of the new elements

156
Q

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

A

the element and its child will not be rendered

157
Q

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

A

css selector string for an argument and returns boolean

158
Q

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

A

getAttribute()

159
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

has to manually add in the addEventListener for the new tab

160
Q

What is a breakpoint in responsive Web design?

A

The points where the media queries are used to restructure the layout of the wbpage

161
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

percentages scales with width of the screen while pixels do not

162
Q

If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the
CSS rules for the smaller min-width will “win”. Why is that?

A

source order

163
Q

What is JSON?

A

JavaScript Object Notation is a JS object format in a text file

164
Q

What are serialization and deserialization?

A
  • serialzation is converting an Object memory into bytes

- deserialzation is converting bytes into an Object memory

165
Q

Why are serialization and deserialization useful?

A
  • serialization makes it easier to store and transfer

- deserialization makes the information easier to work with

166
Q

How do you serialize a data structure into a JSON string using JavaScript?

A

JSON.stringify()

167
Q

How do you deserialize a JSON string into a data structure using JavaScript?

A

JSON.parse()

168
Q

How do you store data in localStorage?

A

localStorage.setItem(string variable name, value)

169
Q

How to you retrieve data from localStorage?

A

localStorage.getItem(string variable name)

170
Q

What data type can localStorage save in the browser?

A

string

171
Q

When does the ‘beforeunload’ event fire on the window object?

A

right before the current page switch to a new page

172
Q

What is a method?

A

A function definition that is assigned to a property of an object

173
Q

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

A
  • method definition has the keyword function followed by the parentheses followed by curly braces
  • method call has the method name after a dot and not open curly braces after the parentheses
174
Q

How is a method different from any other function?

A

must use dot notation to show where the function comes from

175
Q

Describe method definition syntax (structure).

A

function keyword followed by parentheses with optional parameters inside, followed by the opening curly brace with the code block inside and then the closing curly brace

176
Q

Describe method call syntax (structure).

A

object variable name followed by the dot followed by the method name, then the parentheses with optional parameters

177
Q

What is the defining characteristic of Object-Oriented Programming?

A

Objects can have both data and methods in it

178
Q

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

A

Abstraction, Inheritance, Encapsulation, Polymorphism

179
Q

What is “abstraction”?

A

Defining a concept/model of something that is real

180
Q

What does API stand for?

A

application programming interface

181
Q

What is the purpose of an API?

A

It only shows what the user needs to use and hide the rest of the functions/methods

182
Q

What is this in JavaScript?

A

An implicit parameter of all JavaScript functions.

183
Q

What does it mean to say that this is an “implicit parameter”?

A

It will still be included in the parameter of the function even though the programmer did not include it as one

184
Q

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

A

call time

185
Q

What kind of inheritance does the JavaScript programming language use?

A

prototype inheritance

186
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

JavaScript follows the prototype chain

187
Q

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

A

It’s parents/ancestor protype object

188
Q

What does the new operator do?

A
  • creates a blank object
  • sets the prototype of the blank object
  • the object gets sets as this
  • returns this if no object is returned
189
Q

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

A

Prototype

190
Q

What does the instanceof operator do?

A

compares the object to see if it has the same constructors and returns a boolean value

191
Q

What is a “callback” function?

A

a function passed as an argument for another function

192
Q

Besides adding an event listener callback function to an element or the document, what is one way to
delay the execution of a JavaScript function until some point in the future?

A

setTimeout()

193
Q

How can you set up a function to be called repeatedly without using a loop?

A

setInterval()

194
Q

What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?

A

0 seconds

195
Q

What do setTimeout() and setInterval() return?

A

Returns an intervalID which is a positive integer

196
Q

What is a client?

A

a piece of software or application that allows user to request services

197
Q

What is a server?

A

providers of resources or services

198
Q

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

A

GET request

199
Q

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

A
  • HTTP method
  • Request target
  • HTTP version
200
Q

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

A
  • protocol version
  • status code
  • status text
201
Q

What are HTTP headers?

A

additional information to be passed along with the HTTP request/response

202
Q

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

A

No

203
Q

What is AJAX?

A

A technique to request data from a server and load the data into part of the site without needing to refresh

204
Q

What does the AJAX acronym stand for?

A

Asynchronous JavaScript and XML

205
Q

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

A

JSON

206
Q

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

A

load

207
Q

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

A

They share the same prototype