HTML Flashcards

1
Q

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

A

head tag

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 tag

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 tag first
head tag second
body tag last

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

Informs the web browser about the type and version of HTML used in building the web document.

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

doctype html head body span ul li p a

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

Modifies the element type

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

&copy &reg

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

It takes up 100% of the width of the block line, and starts a 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

It takes up only the smallest space that an element needs, continues on the same line.

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

100% width, height unchangeable

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 determined by the element, height is unchangeable

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 list has numbers for every li tag, unordered has bullet points, stars, etc.

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 element

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

What HTML tag is used to link to another website?

A

<a>Anchor Tags</a> (Anchor tags)

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 directs to an external site.

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 directs to a specific location inside a folder that is relative to the root you’re in.

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

the (../)

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

calling the folder name, then the file inside the folder that you want to open

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

using (../../)

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

If it’s in the same directory, you just need to call the name of the file.

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

Collect information, and sending it back to the developer.

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 select textarea button legend

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

button checkbox radio text password file hidden submit

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

inline element

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 td tr tfoot

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

screen readers

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

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

A

statistics organizing data table

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

CSS Selector, declaration block

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

add a (.) before the class name

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

Calling the element name by itself

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

add a (#) before the name

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

What CSS properties make up the box model?

A

Margin Border Padding

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

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

A

RGB, Hexcode, Color Names

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

What is a pseudo-class?

A

Selector that selects elements that are in a specific state eg hover, active, visited, etc.

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

Add functional styles for the elements

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

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

A

row (horizontal)

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

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

A

no-wrap (makes everything shrink and fit on one line)

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

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

A

because of it having the property of display: block

which takes up the whole width and starts on a new line.

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

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

A

flex-direction: row (horizontal)

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

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

A

relative does not affect the positioning of elements in normal flow unless you add offsets, but does cause those elements to be considered to be positioned.

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

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

A

any adjustments you do to it is relative to where it is on the page

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

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

A

moves it from the document flow

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

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

A

attaches to any parent without a static element

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

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

A

make it a non-static property

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

What are the four box offset properties?

A

top right bottom left

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

What is the purpose of variables?

A

Storing information for a value

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

How do you declare a variable?

A

var name

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

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

A

assignment operator (=)

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

What characters are allowed in variable names?

A

alphanumerical values $ -

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

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

A

Capitalization and typos matter a lot fullname != fullName

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

What is the purpose of a string?

A

Storing text

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

What is the purpose of a number?

A

Storing numbers

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

What is the purpose of a boolean?

A

Storing true/false values

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

What does the = operator mean in JavaScript?

A

Assignment operator

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

How do you update the value of a variable?

A

Assign a new value to the same variable

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

What is the difference between null and undefined?

A

Null is an empty value, undefined is no value has been assigned

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

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

A

Makes it easier to reference & debug.

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

Give five examples of JavaScript primitives.

A

numbers string boolean undefined null

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

What is string concatenation?

A

when 2 strings get added together ex: fullName=firstName + lastName;

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

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

A

concatenation, addition

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

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

A

sets the variable to whatever the sum is equal to when it is added by a value

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

What are objects used for?

A

Containers for named values properties and methods.

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

What are object properties?

A

values associated with the object (keys)

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

Describe object literal notation.

A

The Object literal notation is basically an array of key:value pairs, with a colon separating the keys and values, and a comma after every key:value pair, except for the last, just like a regular array.

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

What are arrays used for?

A

lists of values like a grocery list

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

Describe array literal notation.

A

square brackets

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

How are arrays different from “plain” objects?

A

plain objects can’t contain more than one value

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

What is the length property of an array?

A

.length measures the length of the array

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

What is a function in JavaScript?

A

a reusable command

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

Describe the parts of a function definition.

A

function keyword, the function name, the parameters, opening curly brace for the function code block, return statement, closing curly brace marking the end of code block

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

Describe the parts of a function call.

A

function name, the parentheses and parameters inside it, with a semicolon

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

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

A

The function definition specifies the name, parameters and the code block instructions, whereas the function call just passes an argument to the function definition, and gets whatever is returned.

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

What is the difference between a parameter and an argument?

A

a parameter is a placeholder for the argument for a function. The argument is the actual data that is going to be used for the function.

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

Why are function parameters useful?

A

When a function is called, the parameters in its definition take on the values of the arguments that were passed.

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

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

A

return statement returns a value, and exits the function when it is called.

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

Why do we log things to the console?

A

debug and check code

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

What is a method?

A

a function of an object

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

How is a method different from any other function?

A

method exists as a property of an object

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

How do you remove the last element from an array?

A

pop method

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

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

A

round method

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

How do you generate a random number?

A

random method

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

How do you delete an element from an array?

A

splice [index, delete number]

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

How do you append an element to an array?

A

push method

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

How do you break a string up into an array?

A

split method

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

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

A

No, use console.log

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

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

A

mid 40s (dont have to memorize all)

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

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

A

No, because there are functions that modify things and there are those that return things

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

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

A

more than 30, dont have to memorize all

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

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

A

MDN

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

Give 6 examples of comparison operators.

A

< > <= >= == ===

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

What data type do comparison expressions evaluate to?

A

boolean

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

What is the purpose of an if statement?

A

checking the expression and make a decision with the result

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

Is else required in order to use an if statement?

A

not required

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

Describe the syntax (structure) of an if statement.

A

if (condition) code block return else return

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

What are the three logical operators?

A

and or not

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

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

A

logical or and logical and

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

What is the purpose of a loop?

A

to repeat a set of instructions however many times specified.

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

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

A

to check if the loop should keep going

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

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

A

how many times the code ran

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

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

A

before executing the statement

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

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

A

before the loop begins

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

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

A

after the initializer and right after incrementation

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

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

A

right after the loop finishes

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

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

What does the ++ increment operator do?

A

adds the value by 1 (i+=1)

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

How do you iterate through the keys of an object?

A

for in loop

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

Difference between i++ and ++i?

A

increments the value before they get substituted

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

What are the four components of “the Cascade”.

A

importance, origin, specificity, position

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

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

A

the further down it goes in the css code, the more “important it is”

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

inheritence

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

List the three selector types in order of increasing specificity.

A

type, class, id

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

Why is using !important considered bad practice?

A

makes it harder to debug

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

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

A

to know the location of the variable in the document, so it’s easier to access them

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

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

A

dir method

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

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

A

you need to load your javascript dom after the document has been processed

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

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

A

accepts css selectors, and returns the elements

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

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

A

it takes css selectors and returns NodeList

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

Why do we log things to the console?

A

test and debug your code

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

What is the purpose of events and event handling?

A

user input

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

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

A

it is optional

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

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

A

addEventListener method

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

What is a callback function?

A

function that is being used as an argument in another function, and which we do not call

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

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

A

the event object

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

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

A

its a reference to where the object is being invoked. the debugger. the mdn

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

What is the difference between these two snippets of code?

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

A

the event listener will call it when there are parantheses are inserted. When parantheses aren’t there, it doesn’t get called automatically.

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

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

A

not always, but generally it is good practice

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

it’d be harder

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

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

A

cannot depend on the dom, so storing it on a variable makes it easier to find

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

What does the transform property do?

A

it modifies the coordinate space which lets you rotate, scale, skew or translate an element

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

Give four examples of CSS transform functions.

A

translate scale rotate skew matrix

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

What is the className property of element objects?

A

it lets you modify/replace the className on an existing html file on javascript

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

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

A

you put the class location into a variable via getQuery and then use the className property

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

What is the textContent property of element objects?

A

it allows you to modify the text content inside an element

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

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

A

put the element location inside a variable, then modify it using .textContent

144
Q

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

A

HTML document

145
Q

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

A

HTML elements

146
Q

What is a DOM Tree?

A

an illustration of how the DOM reads the document with its elements and children

147
Q

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

A

getQuery getElementByID

148
Q

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

A

getElementByClassName querySelectorAll

149
Q

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

A

focus

150
Q

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

A

blur

151
Q

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

A

input

152
Q

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

A

submit

153
Q

What does the event.preventDefault() method do?

A

prevents it from reloading the page and putting the information on the URL

154
Q

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

A

it refreshes the page and loads your information into the URL

155
Q

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

A

getters

156
Q

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

A

setters

157
Q

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

A

you won’t know which part of the code is wrong

158
Q

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

A

allows you to debug and see if there are any errors

159
Q

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

A

no

160
Q

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

A

appendChild() method

161
Q

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

A

name+value

162
Q

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

A

create element then append child

163
Q

What is the textContent property of an element object for?

A

retrieve/set text inside an element

164
Q

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

A

classname, classlist, setattribute

165
Q

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

A

reusability

166
Q

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

A

style, link, source

167
Q

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

A

meta name=”viewport” tag

168
Q

What is the event.target?

A

The target event property returns the element that triggered the event.

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 does the element.closest() method take as its argument and what does it return?

A
The closest() method traverses the Element and its parents (heading toward the document root) until it finds a node that matches the provided selector string. Will return itself or the matching ancestor. If no such element exists, it returns null .
var closestElement = targetElement.closest(selectors);
171
Q

What is the event.target?

A

The target event property returns the element that triggered the event.

172
Q

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

A

makes the content invisible and removes it from the document

173
Q

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

A

string representing the selector to test. returns a boolean

174
Q

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

A
getAttribute()
let attribute = element.getAttribute(attributeName);
175
Q

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

A

Every step

176
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

multiple eventListeners

177
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

Conditional statements to check each of the tabs

178
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

because of cascading. If it happens after, it will override

179
Q

How to you store data in localStorage?

A

storeItem method

180
Q

How to you retrieve data from localStorage?

A

getItem method

181
Q

What data type can localStorage save in the browser?

A

string (JSON.stringify)

182
Q

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

A

before the document gets unloaded

183
Q

What is a method?

A

sends objects to invoke behaviors and delegate the implementations to the receiving objects

184
Q

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

A

with the definition, you are writing the code, with the call, you are calling it and giving the values

185
Q

Describe method definition syntax (structure).

A

object variable name, object properties, method

186
Q

Describe method call syntax (structure).

A

dot method to call

187
Q

How is a method different from any other function?

A

because it is a property inside an object

188
Q

What is the defining characteristic of Object-Oriented Programming?

A

because an object can take properties and functions inside an object

189
Q

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

A

encapsulation, abstraction, inheritance, polymorphism

190
Q

What is “abstraction”?

A

working with something complex and simplifying it

191
Q

What does API stand for?

A

application programming interface

192
Q

What is the purpose of an API?

A

an API delivers a user response to a system and sends the system’s response back to a user.

193
Q

What is this in JavaScript?

A

a keyword that contains a value that is defined at call time

194
Q

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

A

not explicitly written in a function, but it is always accessible

195
Q

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

A

call time

196
Q
What does this refer to in the following code snippet?
var character = {
  firstName: 'Mario',
  greet: function () {
    var message = 'It\'s-a-me, ' + this.firstName + '!';
    console.log(message);
  }
};
A

the object character

197
Q

Given the above character object, what is the result of the following code snippet? Why?
character.greet();

A

it would return “It’s -a-me, Mario!”

198
Q
Given the above character object, what is the result of the following code snippet? Why?
var hello = character.greet;
hello();
A

it would be undefined, because hello is not connected to an object, whereas character.greet() has character as the object

199
Q

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

A

the value of this would be the object in which this was created.

200
Q

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

A

it would refer to whatever object calls the function

201
Q

What kind of inheritance does the JavaScript programming language use?

A

prototypes

202
Q

What is a prototype in JavaScript?

A

an object that has functionality inside it that other objects can use separately.

203
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

using a function that prototypes for the objects

204
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 chain

205
Q

What does the new operator do?

A

creates a new blank object and links the constructor to the other object to its parent prototype and sets the this, and returns this if the function doesn’t return an object.

206
Q

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

A

prototype property

207
Q

What does the instanceof operator do?

A

checks to see if the prototype chain exists in an object

208
Q

What is a “callback” function?

A

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

209
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 method

210
Q

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

A

setInterval function

211
Q

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

A

the default would be 0, it would get sent immediately

212
Q

What do setTimeout() and setInterval() return?

A

it returns the timer ID

213
Q

What is a client?

A

someone that requests a service from a server

214
Q

What is a server?

A

answers requests from a client

215
Q

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

A

get method

216
Q

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

A

verb like get put post and a noun like head or options

217
Q

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

A

protocol version status code and status text

218
Q

What are HTTP headers?

A

information related to the request

219
Q

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

A

mdn

220
Q

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

A

they are optional

221
Q

What is AJAX?

A

Ajax allows you to update certain parts of a page without needing to reload the page. Ajax is a way to make asynchronous requests.

222
Q

What does the AJAX acronym stand for?

A

asynchronous javascript and xml

223
Q

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

A

XML object

224
Q

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

A

the load event

225
Q

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

A

it is related to the event.target –

226
Q

What is destructuring, conceptually?

A

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

227
Q

What is the syntax for Object destructuring?

A

let {} = variable

228
Q

What is the syntax for Array destructuring?

A

let [] = variable

229
Q

How can you tell the difference between destructuring and creating Object/Array literals?

A

if it’s happening on the left side, it is destructuring, and the right side is defining

230
Q

What is a code block? What are some examples of a code block?

A

some code inside curly braces

231
Q

What does block scope mean?

A

A block scope is the area within if, switch conditions or for and while loops

232
Q

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

A

block scoped

233
Q

What is the difference between let and const?

A

let can be changed, const stays the same

234
Q

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

A

because the value is being changed, not the variable itself

235
Q

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

A

seeing if the variable will be the same or it can change

236
Q

What is the syntax for writing a template literal?

A

` ${variable} `

237
Q

What is “string interpolation”?

A

the ability to substitute part of the string for the values of variables or expressions

238
Q

What is the syntax for defining an arrow function?

A

(parameters) => {code block, return}

239
Q

When an arrow function’s body is left without curly braces, what changes in its functionality?

A

doesn’t need a return statement

240
Q

How is the value of this determined within an arrow function?

A

where the function is defined

241
Q

What is a CLI?

A

command line interface

242
Q

What is a GUI?

A

graphic user interface

243
Q
Give at least one use case for each of the commands listed in this exercise.
man
cat
ls
pwd
echo
touch
mkdir
mv
rm
cp
A

man: description/options for the manual command
cat:
ls:
pwd:
echo: print out a status text
touch:
mkdir:
mv: move a file or rename it
rm: remove file/directories
cp:

244
Q

What are the three virtues of a great programmer?

A

laziness virtue hubris

245
Q

What is Node.js?

A

As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications.

246
Q

What can Node.js be used for?

A

anything

247
Q

What is a REPL?

A

read eval print loop

248
Q

When was Node.js created?

A

2009

249
Q

What back end languages have you heard of?

A

PHP Node.JS

250
Q

What is a computer process?

A

the instance of a computer program that is being executed by one or many threads. It contains the program code and its activity.

251
Q

Roughly how many computer processes are running on your host operating system (Task Manager or Activity Monitor)?

A

100

252
Q

Why should a full stack Web developer know that computer processes exist?

A

to see if the code that they made is running inside of the process

253
Q

How do you access the process object in a Node.js program?

A

process (a global variable)

254
Q

What is the data type of process.argv in Node.js?

A

array

255
Q

What is a JavaScript module?

A

modules are a codeblock inside of a file that does a certain functionality. Modules are originally private, but if the dev passes it into the export object, it becomes public.

256
Q

What values are passed into a Node.js module’s local scope?

A

exports, require, module, __filename, __dirname

257
Q

Give two examples of truly global variables in a Node.js program.

A

global, process, console, setTimeOut, setInterval

258
Q

What is the purpose of module.exports in a Node.js module?

A

to call an object, variable, functions, etc from one file to another

259
Q

How do you import functionality into a Node.js module from another Node.js module?

A

module.exports = function, then

require(./function.js)

260
Q

What is the JavaScript Event Loop?

A

pushes async functions to the api, so that other functions can run at the same time. When the async function loads, it is pushed onto the queue stack, and when the stack is empty, the first function that is loaded onto the task queue is pushed onto the stack.

261
Q

What is different between “blocking” and “non-blocking” with respect to how code is executed?

A

blocking is a piece of codeblocks that blocks other code from running.

262
Q

What is a directory?

A

a location where a file is stored

263
Q

What is a relative file path?

A

a local file stored inside a local computer

264
Q

What is an absolute file path?

A

path from the route directory

265
Q

What module does Node.js include for manipulating the file system?

A

fs

266
Q

What method is available in the Node.js fs module for writing data to a file?

A

fs.writeFile()

267
Q

Are file operations using the fs module synchronous or asynchronous?

A

asynchronous

268
Q

What is on the first line of an HTTP request message?

A

request line, which represent the first line of a request message

269
Q

What is on the first line of an HTTP response message?

A

status status code

270
Q

What are HTTP headers?

A

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

271
Q

Is a body required for a valid HTTP message?

A

no

272
Q

What is NPM?

A

node package manager. takes a module or package and sends it to a server so other developers can access and reuse it.

273
Q

What is a package?

A

a package is a directory with one or more files in it.. It usually includes a package.json with metadata in it.

274
Q

How can you create a package.json with npm?

A

npm init –yes

275
Q

What is a dependency and how to you add one to a package?

A

Packages required by your application in production.

276
Q

What happens when you add a dependency to a package with npm?

A

downloaded to the repo and then added to the json

277
Q

How do you add express to your package dependencies?

A
npm install express
const express = require('express')
278
Q

What Express application method starts the server and binds it to a network PORT?

A

the listen method

279
Q

How do you mount a middleware with an Express application?

A

the .use method

280
Q

Which objects does an Express application pass to your middleware to manage the request/response lifecycle of the server?

A

req and res

281
Q

What is the appropriate Content-Type header for HTTP messages that contain JSON in their bodies?

A

application/json

282
Q

What is the significance of an HTTP request’s method?

A

to know what the user desires to do: GET (create), PUT , POST, DELETE, etc.

283
Q

What is PostgreSQL and what are some alternative relational databases?

A

MySQL, Oracle, SQL Server

284
Q

What are some advantages of learning a relational database?

A

when the application needs to quickly retrieve or store complex data in an organized fashion, a database fills that need nicely.

285
Q

What is one way to see if PostgreSQL is running?

A

sudo service postgresql status or check the top in terminal

286
Q

What is a database schema?

A

A collection of tables is called a schema. A schema defines how the data in a relational database should be organized.

287
Q

What is a table?

A

A table is a list of rows each having the same set of attributes. For example, all students in a “students” table could have “firstName”, “lastName”, and “dateOfBirth” attributes.

288
Q

What is a row?

A

a record of a specific item or person (for example: student id, name, height, gender, etc)

289
Q

What is SQL and how is it different from languages like JavaScript?

A

SQL is a declarative programming language, which describes the result instead of telling it what to do

290
Q

How do you retrieve specific columns from a database table?

A

select statment, and a string of the column name

291
Q

How do you filter rows based on some specific criteria?

A

where clause.

292
Q

What are four comparison operators that can be used in a where clause?

A

< > = !=

293
Q

How do you limit the number of rows returned in a result set?

A

limit clause

294
Q

How do you retrieve all columns from a database table?

A

select *

295
Q

How do you control the sort order of a result set?

A

orderBy descending

296
Q

What are the benefits of formatting your SQL?

A

readability and formatting

297
Q

How do you add a row to a SQL table?

A

insert into “table” (“row name”)

298
Q

What is a tuple?

A
In SQL, a list of values is referred to as a tuple.
aka values ('value1', 'value2') would be a tuple
299
Q

How do you add multiple rows to a SQL table at once?

A

separate with comma and parentheses

values (‘value1’), (‘value2’)

300
Q

How do you get back the row being inserted into a table without a separate select statement?

A

returning * to output the row, or returning “column” to return a specific column

301
Q

How do you update rows in a database table?

A

update “table”
set “column” = ‘value’
where “id” = ‘value’

302
Q

Why is it important to include a where clause in your update statements?

A

if you do not put where, it updates the whole row

303
Q

How do you delete rows from a database table?

A

delete from “table”

where “column” = ‘value’

304
Q

How do you accidentally delete all rows from a table?

A

if you don’t put the where clause

305
Q

What is a foreign key?

A

combining 2 columns that have a similar column

306
Q

How do you join two SQL tables?

A

join clause using clause

307
Q

How do you temporarily rename columns or tables in a SQL statement?

A

as clause

308
Q

What are some examples of aggregate functions?

A

max(), sum(), min(), avg()

309
Q

What is the purpose of a group by clause?

A

to take a certain column, and arrange the data to that certain column

310
Q

What are the three states a Promise can be in?

A

pending, fulfilled, rejected

311
Q

How do you handle the fulfillment of a Promise?

A

promise.then()

312
Q

How do you handle the rejection of a Promise?

A

promise.catch()

313
Q

What is Array.prototype.filter useful for?

A

it’s useful as a “checker” for an array, to see which values match the conditions. If the condition is matched, it returns another array with the matching values.

314
Q

What is Array.prototype.reduce useful for?

A

to combine all of the values of an array into a single datatype

315
Q

What is “syntactic sugar”?

A

syntax used to make things easier to read or to express

316
Q

What is the typeof an ES6 class?

A

function

317
Q

Describe ES6 class syntax.

A

class name, constructor, methods

318
Q

What is “refactoring”?

A

destructuring the code without changing the behavior

319
Q

What is Webpack?

A

bundles js applications based on your imports and exports. takes all the files from the project and bundles it all in one big js file

320
Q

How do you add a devDependency to a package?

A

npm install –save-dev webpack

321
Q

What is an NPM script?

A

script that automates tasks.

322
Q

How do you execute Webpack with npm run?

A

npm run build

323
Q

How are ES Modules different from CommonJS modules?

A

more compact import export statements

324
Q

What kind of modules can Webpack support?

A

ECMA, CommonJS, AMD

325
Q

What is React?

A

JS library used to build user interfaces

326
Q

What is a React element?

A

It’s an object that virtually describes the DOM nodes that a component represents. With a function component, this element is the object that the function returns.

327
Q

How do you mount a React element to the DOM?

A

using the render() method, the first argument is the element, and the 2nd argument is which container you want to put it in, 3rd is the callback

328
Q

What is Babel?

A

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments, also converts from jsx files to js

329
Q

What is a Plug-in?

A

Software component that adds a specific feature to an existing computer program

330
Q

What is a Webpack loader?

A

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps.

331
Q

How can you make Babel and Webpack work together?

A

make webpack, babel and its plugins a dev dependency

332
Q

What is JSX?

A

special syntax to allow html style writing inside javascript.

333
Q

Why must the React object be imported when authoring JSX in a module?

A

In order to use the package from react, which allows us to use the jsx tags

334
Q

How can you make Webpack and Babel work together to convert JSX into valid JavaScript?

A

As webpack bundles files together, babel works in the background to convert the file into an older, more accessible version of ecmascript

335
Q

What is a React component?

A

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

336
Q

How do you define a function component in React?

A

function keyword, capitalized component name, and the return keyword with the elements.

337
Q

How do you mount a component to the DOM?

A

render method with the jsx element, and the container

338
Q

What are props in React?

A

properties, which are objects used to pass data from one component to another

339
Q

How do you pass props to a component?

A

using curly braces and adding the properties in the middle

340
Q

How do you write JavaScript expressions in JSX?

A

insert the expression between curly braces {}

341
Q

What is the purpose of state in React?

A

in order to hold data, and to specify what to do with it with other methods

342
Q

How to you pass an event handler to a React element?

A

use a onClick attribute and assign it to a method

343
Q

What Array method is commonly used to create a list of React elements?

A

.map()

344
Q

What is the best value to use as a “key” prop when rendering lists?

A

id, anything unique

345
Q

What are controlled components?

A

input form where input is controlled by react

346
Q

What two props must you pass to an input for it to be “controlled”?

A

handleChange and handleSubmit

347
Q

What does express.static() return?

A

middleware

348
Q

What is the local __dirname variable in a Node.js module?

A

returns the string of the directory name of where your file is located on the local pc

349
Q

What does the join() method of Node’s path module do?

A

it combines the path of the dirname with whatever you insert

350
Q

What does fetch() return?

A

promise

351
Q

What is the default request method used by fetch()?

A

get method

352
Q

How do you specify the request method (GET, POST, etc.) when calling fetch?

A

fetch(url, { method: get/post }) put it on the 2nd argument

353
Q

When does React call a component’s componentDidMount method?

A

after the rennder phase

354
Q

Name three React.Component lifecycle methods.

A

componentdidmount componentdidupdate componentwillunmount

355
Q

How do you pass data to a child component?

Exercise

A

through props