Quiz Questions 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

Inside the HTML element. head goes first then body .

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

First thing on the HTML doc, it declares which type of HTML the webpage is using.

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

Give five examples of HTML element tags.

A

<p>, <a>, <span>, , <div></div></span></a></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

They provide additional information about the element, either editing it or adding more details.

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

& = & or &, < = < 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

They take up the whole width of the page. Must start on new 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

They take up as much width as needed, like the span element.

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

Height is a high as the parent, width is the entire page.

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

both are as much as what the parent element size is.

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 are ordered using numbers, unordered list use bullet points or other characters to list

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

It is a block level 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

The ‘anchor’ tag, <a></a>

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

What is an absolute URL?

A

URL that points to a specific system and to a specific part

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

What is a relative URL?

A

URL that is within the same site

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

by using the ‘..’ notation followed by ‘/’, to go out of the current file you are in.

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

by naming the child directory followed by ‘/’.

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

like indicating the parent but with ‘../../’ notations.

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

Simply using the file/directory 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 form element is the place where form controls should be placed in. The area/place where interactive controls are entered.

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

Give five examples of form control elements.

A

input, label, button, select, textarea

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

Give three examples of type attributes for HTML elements.

A

‘text’, ‘password’, ‘radio’

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

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

A

They are inline elements.

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

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

A

The rule set and declaration block

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

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

A

Using the period or dot notation followed by the name

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

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

A

Using the name of the tag or type. i.e p, body, h1 etc.

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

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

A

Using the # before the name of the id

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

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

A

The RGB, Hex code, color name, also there is HSL(hue, saturation, lightness)

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

What CSS properties make up the box model?

A

Margin, border, padding, content

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

Which CSS property pushes boxes away from each other?

A

The margin

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

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

A

The padding

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

What is a pseudo-class?

A

It is a special keyword we can apply to CSS selectors

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

What are CSS pseudo-classes useful for?

A

Gives the selector a certain functionality or certain action depending on the pseudo class.

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

Name at least two units of type size in CSS.

A

Pixels (px), em, rem, percentage. 16px is 1rem and is usually default.

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

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

A

The font-family

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

What are the four components of “the Cascade”.

A

Source order, Inheritance, Specificity, !important

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

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

A

The ruleset or selector put last takes precedence.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
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 provides that functionality.

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

List the three selector types in order of increasing specificity.

A
  1. Type selectors (h1, body, p, and pseudo elements)
  2. Class selectors (.example, attribute selectors)
  3. ID selectors (#example).
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

Why is using !important considered bad practice?

A

Makes debugging difficult and overall considered bad practice.

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

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

A

A row.

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

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

A

No wrap which is a row, all in one line

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

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

A

Because they are block level elements

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

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

A

Static or normal flow

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 document flow?

A

It does not affect the document flow.

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

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

A

It does not affect where it appears, unless we use offset properties to move them.

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 document flow?

A

It removes it from the document flow.

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

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

A

Yes, it will move it relative to the closest parent depending on where it was originally.

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

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

A

By setting the containing block or parent element to position other than static.

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

What are the four box offset properties?

A

Top, bottom, right, left.

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

What is the purpose of variables?

A

To store data

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

How do you declare a variable?

A

Using the assignment operator ‘=’ with ‘var’, ‘const’ and ‘let’

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

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

A

The assignment operator ‘=’.

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

What characters are allowed in variable names?

A

$, _ , any character. Can not start with numbers but can use numbers in.

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

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

A

Can have two variables with the same spelling but different, coolname is not the same as coolName.

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

What is the purpose of a string?

A

To use text

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

What is the purpose of a number?

A

For calculations needed in the program

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

What is the purpose of a boolean?

A

Y or N answers or True or False.

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

What does the = operator mean in JavaScript?

A

To assign stuff

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

How do you update the value of a variable?

A

Use the variable name and assignment operator to a different value.

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

What is the difference between null and undefined?

A

Null is an intentional lack of value, undefined is a value that was never assigned.

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

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

A

To better clarify when debugging.

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

Give five examples of JavaScript primitives.

A

Strings, Booleans, Numbers, null, undefined

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

What is string concatenation?

A

Combines strings together

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

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

A

Addition of number data types and concatenation of strings.

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

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

A

A boolean.

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

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

A

Adds the value and updates the variable.

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

What are objects used for?

A

Group together variables and functions to create a model. Used to model real world objects as well.

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

What are object properties?

A

They are called keys, they are variables attached to an object.

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

Describe object literal notation.

A

Listing out the key and value pair inside the curly brace

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

How do you remove a property from an object?

A

Using the delete operator and accessing the property in the object

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

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

A

Dot notation or bracket notation.

75
Q

What are arrays used for?

A

Storing a list of data in order

76
Q

Describe array literal notation.

A

Using and listing out each property inside brackets

77
Q

How are arrays different from “plain” objects?

A

Arrays are numerically indexed in the order they are listed.

78
Q

What number represents the first index of an array?

A

Index of 0.

79
Q

What is the length property of an array?

A

The total number of items in the array.

80
Q

How do you calculate the last index of an array?

A

Length - 1.

81
Q

What is a function in JavaScript?

A

They do things in the program, perform some sort of action or calculation.

82
Q

Describe the parts of a function definition.

A

Function keyword, function (optional) name, the (optional) parameters, the code block, end of the code block.

83
Q

Describe the parts of a function call.

A

Function name with passing arguments in place of the parameters.

84
Q

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

A

To call a function we simply write out the function name with () and arguments if needed

85
Q

What is the difference between a parameter and an argument?

A

Parameters are placeholders when defining the function, arguments are the values we are placing in the parameter to run the function with.

86
Q

Why are function parameters useful?

A

It is a variable local to the function. Allows us to pass arguments to it.

87
Q

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

A

It outputs a value from the function and also stops the code block from running any further.

88
Q

Why do we log things to the console?

A

To check if the code is working.

89
Q

What is a method?

A

A function which is attached to an object.

90
Q

How is a method different from any other function?

A

Method is just associated to an object.

91
Q

How do you remove the last element from an array?

A

Use the .pop() method.

92
Q

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

A

Using the Math.floor() method.

93
Q

How do you generate a random number?

A

Using the Math.random() method.

94
Q

How do you delete an element from an array?

A

Using the splice(), shift() or pop() method.

95
Q

How do you append an element to an array?

A

Using the push() method.

96
Q

How do you break a string up into an array?

A

Using the .split() method.

97
Q

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

A

No, you can check using the console.log.

98
Q

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

A

Mid thirties.

99
Q

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

A

No, things like pop or shift arent as useful

100
Q

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

A

30 plus

101
Q

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

A

MDN

102
Q

Give 6 examples of comparison operators.

A

, >=, <=, ==, ===

103
Q

What data type do comparison expressions evaluate to?

A

Boolean

104
Q

What is the purpose of an if statement?

A

To check if a condition is true or false.

105
Q

Is else required in order to use an if statement?

A

No, it is not required.

106
Q

Describe the syntax (structure) of an if statement.

A

if (…..) {

}

107
Q

What are the three logical operators?

A

&& (and), || (or), ! (not)

108
Q

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

A

&& or ||

109
Q

What is the purpose of a loop?

A

To run block of code a certain amount of times or until a condition is met.

110
Q

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

A

Checks the condition if it is true whether to run or not

111
Q

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

A

The process of the loop looping

112
Q

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

A

Before the code is run and at the end of each iteration.

113
Q

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

A

At the start of the loop.

114
Q

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

A

Before each iteration.

115
Q

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

A

At the end of each iteration.

116
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’, will not exit the function but will stop the loop from running.

117
Q

What does the ++ increment operator do?

A

increases it by 1.

118
Q

How do you iterate through the keys of an object?

A

a ‘for in’ loop and looking for the variable.

119
Q

Why do we log things to the console?

A

Verify what code is doing, debugging etc

120
Q

What is a “model”?

A

a representation of something

121
Q

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

A

The document node

122
Q

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

A

The collection of objects in javascript

123
Q

What is a DOM Tree?

A

The model of the HTML contents on the browser

124
Q

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

A

querySelector(), getElementById()

125
Q

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

A

querySelectorAll(), getElementsByClassName()

126
Q

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

A

When using it more than once, basically to save time

127
Q

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

A

console.dir()

128
Q

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

A

We want everything to load properly first before implementing the JS

129
Q

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

A

HTML elements, CSS selectors and returns the first one it encounters

130
Q

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

A

HTML elements, CSS selectors and returns a node list

131
Q

Why do we log things to the console?

A

debugging, and checking what is being output

132
Q

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

A

false

133
Q

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

A

the addeventlistener

134
Q

What is a callback function?

A

A function definition getting passed inside the argument of another function

135
Q

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

A

The event object.

136
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 element which triggers the event,

137
Q

What is the difference between these two snippets of code?

element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())

A

1st is the call back function,

2nd we are calling the function as the argument.

138
Q

What is the difference between these two snippets of code?

element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())

A

1st is the call back function where we give the event listener the handleClick functionality,
2nd we are calling the return value of the handleClick function as the argument.

139
Q

What is the className property of element objects?

A

Allows to access or set the value of the class for that object element.

140
Q

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

A

Using the className property. element.className = new name

141
Q

What is the textContent property of element objects?

A

Allows to update the text content of the element you are working with.

142
Q

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

A

Using the textcontent method. element.textContent = ‘new content’

143
Q

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

A

No, not always needed function (event)

144
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, would make code longer and complicated.

145
Q

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

A

Want to create continuity and reliability.

146
Q

What does the transform property do?

A

Allows to modify an element on the screen.

147
Q

Give four examples of CSS transform functions.

A

Rotate, scale, skew, translate

148
Q

The transition property is shorthand for which four CSS properties?

A

transition-property, transition-duration, transition-timing-function, transition-delay.

149
Q

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

A

The focus event.

150
Q

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

A

The blur event.

151
Q

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

A

The input event.

152
Q

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

A

The submit event.

153
Q

What does the event.preventDefault() method do?

A

It cancels the event if it is cancellable, it is preventing the page from refreshing.

154
Q

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

A

It dumps the form, reloading the page.

155
Q

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

A

The elements property

156
Q

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

A

The value property.

157
Q

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

A

Just good practice and saves time to check as you go and if the functionality is working.

158
Q

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

A

Check your script as you go and checking error messages.

159
Q

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

A

Min-width, max-width, height, etc.

160
Q

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

A
161
Q

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

A

No it does not, until it appendChild()

162
Q

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

A

using the appendChild()

163
Q

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

A

the Name and Value

164
Q

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

A

Create element and append, add any values if needed class, content etc.

165
Q

What is the textContent property of an element object for?

A

So that we can add text and also get the text content. Getter and setter.

166
Q

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

A

setAttribute(‘class’, ‘class name’), or the className property

167
Q

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

A

1 is that, allows to pass in values. 2 it fulfills separation of concerns.

168
Q

What is the event.target?

A

The point of interaction, whatever element is being interacted with

169
Q

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

A

event bubbling

170
Q

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

A

event.target.tagName

171
Q

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

A

Takes selectors, returns either itself or the matching ancestor, if nothing returns null

172
Q

How can you remove an element from the DOM?

A

remove()

173
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

Take advantage of bubbling, setting on parent.

174
Q

What is the event.target?

A

The point of interaction, whatever element is being interacted with. The element of which the event took place.

175
Q

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

A

It hides the element from the document. It removes it from the flow of the document.

176
Q

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

A

It takes an selector string and returns a boolean.

177
Q

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

A

getAttribute() method

178
Q

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

A

To check the value you are trying to return or change. Do it always basically.

179
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

Would be difficult, alot more code. weird question.

180
Q

If you didn’t use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?

A

Would have to use a bunch of conditional statements.

181
Q

What is a breakpoint in responsive Web design?

A

The point at which a media query is introduced.

182
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 are relatively based on the screen or browser window the user has. Percentages will stay ‘fixed’ with their container whatever the size of the container. Pixels are absolute units that give us less flexibility.

183
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

It will ‘win’ because it is the last rule or rule that comes latest. The latest rule is stronger or takes precedence.