HTML Flashcards
1
Q
Where do you put non-visible content about the HTML document?
A
In the head element
2
Q
Where do you put visible content about the HTML document?
A
In the body element
3
Q
Where do the < head > and < body > tags go in a valid HTML document?
A
In the html element
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
5
Q
What is the purpose of HTML attributes?
A
To attach extra information to elements
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
7
Q
How do inline elements affect the document flow?
A
Inline only takes up space as needed
8
Q
What are the default width and height of a block-level element?
A
Width is 100% and height is auto
9
Q
What are the default width and height of an inline element?
A
Width and height are auto
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
11
Q
Is an HTML list a block element or an inline element?
A
Block element
12
Q
What HTML tag is used to link to another website?
A
Anchor tag
13
Q
What is an absolute URL?
A
The full URL address
14
Q
What is a relative URL?
A
A URL without the domain name, partial directory
15
Q
How do you indicate the relative link to a parent directory?
A
../(file name)
16
Q
How do you indicate the relative link to a child directory?
A
(child directory name)/(file name)
17
Q
How do you indicate the relative link to a grand parent directory?
A
../../(file name)
18
Q
How do you indicate the relative link to the same directory?
A
file name
19
Q
What is the purpose of an HTML form element?
A
collect data from user
20
Q
Is an HTML element a block element or an inline element?
A
inline
21
Q
What are the six primary HTML elements for creating tables?
A
< table > , < thead > , < tbody > , < th > , < tr > , < td >
22
Q
What purpose do the thead and tbody elements serve?
A
Organizing and formatting information
23
Q
What are the names of the individual pieces of a CSS rule?
A
selector, declaration block, property, property value
24
Q
In CSS, how do you select elements by their class attribute?
A
.(class name)
25
In CSS, how do you select elements by their type?
element name
26
In CSS, how do you select an element by its id attribute?
#(id name)
27
What CSS properties make up the box model?
content, border, margin, padding
28
Which CSS property pushes boxes away from each other?
margin
29
Which CSS property add space between a box's content and its border?
padding
30
What is a pseudo-class?
Defining a special state of an element
31
What are CSS pseudo-classes useful for?
styling elements in specific cases
32
What CSS property controls the font used for the text inside an element?
font-family
33
What is the default flex-direction of a flex container?
row
34
what is the default flex-wrap of a flex container?
no wrap
35
Why do two div elements "vertically stack" on one another by default?
div elements are block elements
36
What is the default flex-direction of an element with display: flex?
row
37
What is the default value for the position property of HTML elements?
static
38
How does setting position: relative on an element affect document flow?
Does not affect the flow
39
How does setting position: relative on an element affect where it appears on the page?
Does not affect the position of its appearance
40
How does setting position: absolute on an element affect document flow?
It takes it out of the flow
41
How does setting position: absolute on an element affect where it appears on the page?
It appears on the first non-static element from the parental hierarchy
42
How do you constrain an absolutely positioned element to a containing block?
make the containing block non-static
43
What are the four box offset properties?
top, bottom, left, right
44
What is the purpose of variables?
To hold values to be used later
45
How do you declare a variable?
var (variable name)
46
How do you initialize (assign a value to) a variable?
using the = assignment operator
47
What characters are allowed in variable names?
letters, numbers, $, _
48
What does it mean to say that variable names are "case sensitive"?
the variable must be spelled exactly or else it will be considered a different variable
49
What is the purpose of a string?
to hold any series of characters
50
What is the purpose of a number?
for calculation and counting
51
What is the purpose of a boolean?
for comparison that gives a define answer to determine the next course of action
52
What does the = operator mean in JavaScript?
to assign a value to a variable
53
How do you update the value of a variable?
assign the variable a new value
54
What is the difference between null and undefined?
null is purposely assigning no value, undefined is declaring a variable without assigning a value
55
Why is it a good habit to include "labels" when you log values to the browser console?
for other people and yourself to know which variables the values belong
56
What data type is returned by an arithmetic operation?
number
57
What is string concatenation?
combining strings to form one string
58
What purpose(s) does the + plus operator serve in JavaScript?
concatenating strings and adding numbers
59
What data type is returned by comparing two values (, ===, etc)?
boolean
60
What does the += "plus-equals" operator do?
adding/concatenating the value to the value of the variable
61
What are objects used for?
to organize data into groups without any specific order
62
What are object properties?
the variables in the object
63
Describe object literal notation.
{ properties }
64
How do you remove a property from an object?
using the delete operator
65
What are the two ways to get or update the value of a property
the . and []
66
What are arrays used for?
creating ordered lists of information
67
Describe array literal notation.
[]
68
How are arrays different from "plain" objects?
- information within the array has an order
| - arrays do not have alpha numerical property names
69
What number represents the first index of an array?
0
70
What is the length property of an array?
returns how much elements are in the array
71
How do you calculate the last index of an array?
array.length - 1
72
What is a function in JavaScript?
A re-usable block of code that performs a specific task
73
Describe the parts of a function definition.
function keyword, function name(optional), parentheses, parameter, code block, return statement(optional)
74
Describe the parts of a function call.
function name with parentheses
75
When comparing them side-by-side, what are the differences between a function call and a function definition?
function call does not have the keyword function, does not have any code block, not followed by the {} and passes actual values
76
What is the difference between a parameter and an argument?
parameter is the name of the value and argument is the value being passed in
77
Why are function parameters useful?
it allows functions to be used in more than one way
78
What two effects does a return statement have on the behavior of a function?
function stops after reaching the return statement and the function must produce a value
79
Why do we log things to the console?
for debugging and checking the values
80
What is a method?
a function that is a property of an object
81
How is a method different from any other function?
it needs the object to access the method while a function doesn't
82
How do you remove the last element from an array?
pop()
83
How do you round a number down to the nearest integer?
Math.floor()
84
How do you generate a random number?
Math.random()
85
How do you delete an element from an array?
splice()
86
How do you append an element to an array?
push()
87
How do you break a string up into an array?
split()
88
Do string methods change the original string? How would you check if you weren't sure?
Some methods probably does. Check MDN documentation and log the return value of the method if it has one
89
Is the return value of a function or method useful in every situation?
no
90
What data type do comparison expressions evaluate to?
boolean
91
What is the purpose of an if statement?
for decision making. getting different results based on the conditions
92
Is else required in order to use an if statement?
No
93
Describe the syntax (structure) of an if statement.
key word if, the condition inside parentheses, { code block } , optional else
94
What are the three logical operators?
||, &&, !
95
How do you compare two different expressions in the same condition?
&&, ||
96
What is the purpose of a loop?
to run a block of code a certain amount of time
97
What is the purpose of a condition expression in a loop?
To stop the loop
98
What does "iteration" mean in the context of loops?
executing the loop's code block once
99
When does the condition expression of a while loop get evaluated?
before the loop starts and before each iteration
100
When does the initialization expression of a for loop get evaluated?
after the initialization and before the first iteration
101
When does the condition expression of a for loop get evaluated?
before each iteration
102
When does the final expression of a for loop get evaluated?
at the end of each iteration
103
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
104
What does the ++ increment operator do?
increments the variable by 1
105
How do you iterate through the keys of an object?
using a for in loop
106
What are the four components of "the Cascade".
source order, inheritance, specificity and important
107
What does the term "source order" mean with respect to CSS?
lower rules have more priority than higher rules
108
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance from parent element
109
List the three selector types in order of increasing specificity.
id, class, element
110
Why is using !important considered bad practice?
Makes debugging difficult
111
What is a "model"?
a representation or imitation of something
112
Which "document" is being referred to in the phrase Document Object Model?
html document
113
What is the word "object" referring to in the phrase Document Object Model?
javascript object
114
What is a DOM Tree?
a model showing the relationship between the different nodes that makes up the root node
115
Why might you want to assign the return value of a DOM query to a variable?
In case it needs to be used multiple times and will not have to query for it each time
116
What console method allows you to inspect the properties of a DOM element object?
.dir()
117
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
the html must be loaded and read first to create a model(DOM tree)
118
What does document.querySelector() take as its argument and what does it return?
takes in a string argument with a value of a css selector and returns the first element it finds
119
What does document.querySelectorAll() take as its argument and what does it return?
takes in a string with a value of a css selector and reurns a node list of all the matching element it finds
120
What is the purpose of events and event handling?
purpose of event to perform certain tasks when the user do interact with certain parts of the web page
121
What do [ ] square brackets mean in function and method syntax documentation?
it means optionals parameter/argument
122
What method of element objects lets you set up a function to be called when a specific type of event occurs?
.addEventListener()
123
What is a callback function?
a function passed as an argument
124
What object is passed into an event listener callback when the event fires?
an object that contains the information of the event
125
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
- the reference to the element that fired the event
| - check mdn for more information
126
What is the difference between these two snippets of code?
- element.addEventListener('click', handleClick)
- element.addEventListener('click', handleClick())
- replaces handClick with the definition
| - replaces handleclick() with the return of the function
127
What is the className property of element objects?
the property that gets and sets the class name of an element
128
How do you update the CSS class attribute of an element using JavaScript?
first get the reference to the element and then use the className property
129
What is the textContent property of element objects?
returns all readable text within the element
130
How do you update the text within an element using JavaScript?
assigning a new value to the textContent
131
Is the event parameter of an event listener callback always useful?
no
132
Why is storing information about a program in variables better than only storing it in the DOM?
easier to access the data if stored in variables, do not have to keep querying the DOM
133
What does the transform property do?
allows the element to be shown differently
134
Give four examples of CSS transform functions.
translate, rotate, skew, scale
135
The transition property is shorthand for which four CSS properties?
duration, delay, property, timing-function
136
What event is fired when a user places their cursor in a form control?
Focus
137
What event is fired when a user's cursor leaves a form control?
Blur
138
What event is fired as a user changes the value of a form control?
Input
139
What event is fired when a user clicks the "submit" button within a < form > ?
submit
140
What does the event.preventDefault() method do?
The method prevents the current page from refreshing
141
What does submitting a form without event.preventDefault() do?
Refresh the current page
142
What property of a form element object contains all of the form's controls.
elements property
143
What property of form a control object gets and sets its value?
value property
144
Does the document.createElement() method insert a new element into the page?
No
145
How do you add an element as a child to another element?
.appendChild()
146
What do you pass as the arguments to the element.setAttribute() method?
a string with the value of a property name and another string used for the property value
147
What steps do you need to take in order to insert a new element into the page?
- create new element
| - query for an element and append the created element to it
148
What is the textContent property of an element object for?
gets and sets the texts of the element
149
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta element
150
What is the event.target?
the element where the event is fired from
151
Why is it possible to listen for events on one element that actually happen in its descendent elements?
bubbling
152
What DOM element property tells you what type of element it is?
tagName property
153
What does the element.closest() method take as its argument and what does it return?
- takes in a css selector name
| - returns closest ancestor that matches the css selector name
154
How can you remove an element from the DOM?
.remove()
155
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?
add the click event to the parent/ancestor node of the new elements
156
What is the affect of setting an element to display: none?
the element and its child will not be rendered
157
What does the element.matches() method take as an argument and what does it return?
css selector string for an argument and returns boolean
158
How can you retrieve the value of an element's attribute?
getAttribute()
159
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?
has to manually add in the addEventListener for the new tab
160
What is a breakpoint in responsive Web design?
The points where the media queries are used to restructure the layout of the wbpage
161
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?
percentages scales with width of the screen while pixels do not
162
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?
source order
163
What is JSON?
JavaScript Object Notation is a JS object format in a text file
164
What are serialization and deserialization?
- serialzation is converting an Object memory into bytes
| - deserialzation is converting bytes into an Object memory
165
Why are serialization and deserialization useful?
- serialization makes it easier to store and transfer
| - deserialization makes the information easier to work with
166
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify()
167
How do you deserialize a JSON string into a data structure using JavaScript?
JSON.parse()
168
How do you store data in localStorage?
localStorage.setItem(string variable name, value)
169
How to you retrieve data from localStorage?
localStorage.getItem(string variable name)
170
What data type can localStorage save in the browser?
string
171
When does the 'beforeunload' event fire on the window object?
right before the current page switch to a new page
172
What is a method?
A function definition that is assigned to a property of an object
173
How can you tell the difference between a method definition and a method call?
- 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
How is a method different from any other function?
must use dot notation to show where the function comes from
175
Describe method definition syntax (structure).
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
Describe method call syntax (structure).
object variable name followed by the dot followed by the method name, then the parentheses with optional parameters
177
What is the defining characteristic of Object-Oriented Programming?
Objects can have both data and methods in it
178
What are the four "principles" of Object-Oriented Programming?
Abstraction, Inheritance, Encapsulation, Polymorphism
179
What is "abstraction"?
Defining a concept/model of something that is real
180
What does API stand for?
application programming interface
181
What is the purpose of an API?
It only shows what the user needs to use and hide the rest of the functions/methods
182
What is this in JavaScript?
An implicit parameter of all JavaScript functions.
183
What does it mean to say that this is an "implicit parameter"?
It will still be included in the parameter of the function even though the programmer did not include it as one
184
When is the value of this determined in a function; call time or definition time?
call time
185
What kind of inheritance does the JavaScript programming language use?
prototype inheritance
186
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?
JavaScript follows the prototype chain
187
If an object does not have it's own property or method by a given key, where does JavaScript look for it?
It's parents/ancestor protype object
188
What does the new operator do?
- 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
What property of JavaScript functions can store shared behavior for instances created with new?
Prototype
190
What does the instanceof operator do?
compares the object to see if it has the same constructors and returns a boolean value
191
What is a "callback" function?
a function passed as an argument for another function
192
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?
setTimeout()
193
How can you set up a function to be called repeatedly without using a loop?
setInterval()
194
What is the default time delay if you omit the delay parameter from setTimeout() or setInterval()?
0 seconds
195
What do setTimeout() and setInterval() return?
Returns an intervalID which is a positive integer
196
What is a client?
a piece of software or application that allows user to request services
197
What is a server?
providers of resources or services
198
Which HTTP method does a browser issue to a web server when you visit a URL?
GET request
199
What three things are on the start-line of an HTTP request message?
- HTTP method
- Request target
- HTTP version
200
What three things are on the start-line of an HTTP response message?
- protocol version
- status code
- status text
201
What are HTTP headers?
additional information to be passed along with the HTTP request/response
202
Is a body required for a valid HTTP request or response message?
No
203
What is AJAX?
A technique to request data from a server and load the data into part of the site without needing to refresh
204
What does the AJAX acronym stand for?
Asynchronous JavaScript and XML
205
Which object is built into the browser for making HTTP requests in JavaScript?
JSON
206
What event is fired by XMLHttpRequest objects when they are finished loading the data from the server?
load
207
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
They share the same prototype
