HTML Flashcards
(212 cards)
1
Q
Where do you put non-visible content about the HTML document?
A
head
2
Q
Where do you put visible content about the HTML document?
A
body
3
Q
Where do the head and body tags go in a valid HTML document?
A
html
4
Q
What is the purpose of a declaration?
A
The declaration tells the web browser what html version the document is written in.
5
Q
Give 5 examples of HTML element tags.
A
- head
- body
- img
- div
- p
6
Q
What is the purpose of HTML attributes?
A
to give each element its own additional/unique information
7
Q
Give an example of an HTML entity (escape character)
A
copyright, trademark
8
Q
How do block-level elements affect the document flow?
A
block-level elements take up the whole line
9
Q
How do inline elements affect the document flow?
A
inline elements only take up space they only need
10
Q
What are the default width and height of a block-level element?
A
width is 100% of the viewport and height is the height of the content
11
Q
What are the default width and height of an inline element?
A
width is width of the content and height is also the height of the content
12
Q
What is the difference between an ordered list and an unordered list in HTML?
A
ordered lists with numbers while unordered lists with dots
13
Q
Is an HTML list a block element or an inline element?
A
block
14
Q
What HTML tag is used to link to another website?
A
anchor tag
15
Q
What is an absolute URL?
A
points to an external application / location
16
Q
What is a relative URL?
A
relative URLs’ path generally refers to a resource on the same machine as the current document.
17
Q
How do you indicate the relative link to a parent directory?
A
../
18
Q
How do you indicate the relative link to a child directory?
A
/
19
Q
How do you indicate the relative link to a grand parent directory?
A
../../
20
Q
How do you indicate the relative link to the same directory?
A
the file name
21
Q
What is the purpose of an HTML form element?
A
it represents a document section containing interactive controls for submitting information
22
Q
Give 5 examples of form control elements.
A
input, label, select, button, textarea
23
Q
Give 3 examples of type attributes for HTML input elements
A
text, radio, checkbox
24
Q
Is an HTML input element a block element or an inline element?
A
inline
25
What are the six primary HTML elements for creating tables?
table, thead, tbody, tr, th, td
26
What purpose do the thead and tbody elements serve?
help distinguish between the main content and the first / last rows
27
Give 2 examples of data that would lend itself well to being displayed in a table.
1. Academic grades
| 2. Restaurant customers
28
What are the names of the individual pieces of a CSS rule?
selector, declaration, property, value
29
In CSS, how do you select elements by their class attribute?
.
30
In CSS, how do you select elements by their type?
element name
31
In CSS, how do you select an element by its id attribute?
#
32
Name three different types of values you can use to specify colors in CSS.
color keywords, rgb color values, hexadecimal color values
33
What CSS properties make up the box model?
content (width, height), padding, border, margin
34
Which CSS property pushes boxes away from each other?
margin
35
Which CSS property add space between a box's content and its border?
padding
36
What is a pseudo-class?
class that allows you to change the appearance of elements when a user is interacting with them.
37
What are CSS pseudo-classes useful for?
event based styling
38
Name at least two units of type size in CSS
pixels, rem
39
What CSS property controls the font used for the text inside an element?
font-family property
40
What is the default flex-direction of a flex container?
row
41
What is the default flex-wrap of a flex container?
nowrap
42
Why do two div elements "vertically stack" on one another by default?
they are block level elements
43
What is the default flex-direction of an element with display: flex?
row
44
What is the default value for the position property of HTML elements?
static
45
How does setting position: relative on an element affect document flow?
It doesn't
46
How does setting position: relative on an element affect where it appears on the page?
relative positioning moves an element in relation to where it would have been in normal flow.
47
How does setting position: absolute on an element affect document flow?
It is removed from the document flow entirely (They don't exists)
any sibling elements will shift to the empty space
48
How does setting position: absolute on an element affect where it appears on the page?
gets positioned within the nearest non-static ancestor element
49
How do you constrain an absolute positioned element to a containing block?
you can set the parent element's position to relative.
50
What are the four box offset properties?
top, bottom, left, right
51
What is the purpose of variables?
they are used to store information to be referenced and manipulated
52
How do you declare a variable
variable keyword: var, let, const
53
How do you initialize (assign a value to) a variable?
=
54
What characters are allowed in variable names?
letter, $, _, numbers (but not in the beginning)
55
What does it mean to say that variable names are "case sensitive"?
variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
i.e. data does not equal Data
56
What is the purpose of a string?
storing and manipulating text
57
What is the purpose of a number?
math
58
What is the purpose of a boolean?
comparison (making decisions)
59
What does the = operator mean in JavaScript?
assignment
60
how do you update the value of a variable?
variable name and then an "=" with the new value.
61
What is the difference between null and undefined?
null means "no value" whereas undefined means that "the variable has not been declared, or has not been given a value"
62
Why is it a good habit to include "labels" when you log values to the browser console?∫
so we know the context of that value
63
Give five examples of JavaScript primitives.
number, string, boolean, null, undefined
64
What data type is returned by an arithmetic operation?
number
65
What is string concatenation?
putting strings together
66
What purpose(s) does the + plus operator serve in JavaScript?
concatenation
67
What data type is returned by comparing two values?
boolean
68
What does the += operator do?
you add the value of the variable to the value and reassign that value to the variable.
69
What are objects used for?
storing property and values
70
What are object properties?
a simple association between name and value
71
Describe object literal notation.
var student = {
}
72
How do you remove a property from an object?
delete operator
73
What are the two ways to get or update the value of a property?
dot notation, bracket notation
74
What are arrays used for?
it is used to store different elements, often when we want to store list of elements and access them by a single variable
75
Describe array literal notation.
var myArray = [ ] ;
76
How are arrays different from "plain" objects?
ordered (indexed), have a .length property
77
What number represents the first index of an array?
0
78
What is the length property of an array?
.length: returns the amount of elements in the array
79
How do you calculate the last index of an array?
myArray[myArray.length - 1]
80
What is a function in JavaScript?
set of statements that performs a task or calculates a value
81
Describe the parts of a function definition.
function keyword, parameters, function code block
82
Describe the parts of a function call.
functionName(parameter);
83
When comparing them side-by-side, what are the differences between a function call and a function definition?
parameters vs arguments, no function keyword, no codeblock
84
Why are function parameters useful?
you can reuse the function for any other relevant situation
85
What two effects does a return statement have on the behavior of a function?
ends the function, returns control of the calling function
86
Why do we log things to the console?
To check if the output is what we want.
87
What is a method?
method is a function value that is assigned to a property in an object.
88
How is a method different from any other function?
method is stored in an object
89
How do you remove the last element from an array?
.pop()
90
How do you round a number down to the nearest integer?
Math.floor( )
91
How do you generate a random number?
Math.random( )
92
How do you delete an element from an array?
.shift( ) & .pop( ) & .splice( )
93
How do you append an element to an array?
.push( )
94
How do you break a string up into an array?
.split( )
95
Do string methods change the original string? How would you check if you weren't sure?
No, console.log original string
96
Roughly how many strings methods are there according to the MDN Web docs?
51
97
Is the return value of a function or method useful in every situation?
no
98
Roughly how many array methods are there according to the MDN Web docs?
38
99
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
M D N
100
Give 6 examples of comparison operators.
, >, ===, !==
101
What data type do comparison expressions evaluate to?
boolean
102
What is the purpose of an if statement?
it's how computers make decisions
103
Is else required in order to use an if statement?
no
104
Describe the syntax (structure) of an if statement.
if (conditional) {
}
105
What are the three logical operators?
&&, | |, !
106
How do you compare two different expressions in the same condition?
logical operators
107
What is the purpose of a loop?
as long as the conditional is true, it runs the code block
108
What is the purpose of a condition expression in a loop?
stopping the loop
109
What does "iteration" mean in the context of loops?
one execution of the loop code block
110
When does the condition expression of a while loop get evaluated?
before the code block executes
111
When does the initialization expression of a for loop get evaluated?
before anything
112
When does the condition expression of a for loop get evaluated?
after the initialization expression and before the loop code block
113
When does the final expression of a for loop get evaluated?
after each code block is run
114
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break;
115
What does the ++ increment operator do?
increment the value by 1
116
How do you iterate through the keys of an object?
for in loop
117
What are the four components of "the Cascade"?
Source order, Inheritance, Specificity, Important
118
What does the term "source order"' mean with respect to CSS?
the order in which you write your code matters.
119
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance
120
List the three selector types in order of increasing specificity.
type, class, id
121
Why is using !important considered bad practice?
it messes with specificity
122
Why do we log things to the console?
To check if we get the desired output
123
What is a "model"?
representation of something larger (not the original thing)
124
Which "document" is being referred to in the phrase Document Object Model?
HTML
125
What is the word "object" referring to in the phrase Document Object Model?
JavaScript object
126
What is a DOM Tree?
objects that branch out modeling the DOM
127
Give two examples of document methods that retrieve a single element from the DOM.
.querySelector( ), .getElementById( )
128
Give one example of a document method that retrieves multiple elements from the DOM at once
.querySelectorAll( )
129
Why might you want to assign the return value of a DOM query to a variable?
so you can manipulate it in the future
130
What console method allows you to inspect the properties of a DOM element object?
console.dir( )
131
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
you need the HTML to load first
132
What does document.querySelector( ) take as its argument and what does it return?
string selector, element object
133
What does document.querySelectorAll( ) take as its argument and what does it return?
string, NodeList
134
What is the purpose of events and event handling?
handle user interactions
135
Are all possible parameters required to use a JavaScript method or function?
no
136
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener
137
What is a callback function?
when a function gets passed in as an argument
138
What object is passed into an event listener callback when the event fires?
event object
139
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
is where the event occurred
140
What is the difference between these two snippets of code?
The second one calls the function meaning it will be executed before the event listener gets called
141
What is the className property of element objects?
class value take from the html element
142
How do you update the CSS class attribute of an element using JavaScript?
className, classList
143
What is the textContent property of element objects?
the text inside the elements
144
How do you update the text within an element using JavaScript?
textContent, innerText, innerHTML
145
Is the event parameter of an event listener callback always useful?
no
146
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
more complicated
147
Why is storing information about a program in variables better than only storing it in the DOM?
so we can use it again in the future
148
What does the transform property do?
applies a 2D or 3D transformation to an element
149
Give four examples of CSS transform functions.
rotate, scale, translate, skew
150
The transition property is shorthand for which four CSS properties?
delay, duration, property, timing-function
151
What event is fired when a user places their cursor in a form control?
'focus'
152
What event is fired when a user's cursor leaves a form control?
'blur'
153
What event is fired as a user changes the value of a form control?
'input'
154
What event is fired when a user clicks the "submit" button within a ?
'submit'
155
What does the event.preventDefault( ) method do?
prevent any default actions from events
156
What does submitting a form without event.preventDefault() do?
refreshes the page
157
What property of a form element object contains all of the form's controls?
element property
158
What property of a form control object gets and sets its value?
value property
159
What is one risk of writing a lot of code without checking to see if it works so far?
not knowing where your error is
160
What is an advantage of having your console open when writing a JavaScript program?
You can immediately recognize an error or incorrect output
161
Does the document.createElement() method insert a new element into the page?
no
162
How do you add an element as a child to another element?
appendChild()
163
What do you pass as the arguments to the element.setAttribute( ) method?
the attribute name and the value of that attribute
164
What steps do you need to take in order to insert a new element into the page?
create the element, append it to an already existing element
165
What is the textContent property of an element object for?
to change the text value of the element
166
Name two ways to set the class attribute of a DOM element.
setAttribute( ), className
167
What are 2 advantages of defining a function to create something (like the work of creating a DOM tree)?
reusable, easy to change
168
Give two examples of media features that you can query in an @media rule
hover, width
169
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag
170
What is the event.target?
a reference to the object onto which the event was dispatched
171
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
172
What DOM element property tells you what type of element it is?
.nodeName
173
What does the element.closest() method take as its argument and what does it return?
a css selector, the closest element
174
How can you remove an element from the DOM?
remove( )
175
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 an eventListener to the parent element
176
What is a breakpoint in responsive Web Design?
the point in which the page changes layout due to media queries
177
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?
there are other large range of screens. If we use hard set px it only looks nice on the desired screen size
178
What is a method?
It is a function stored as a property in an object
179
How can you tell the difference between a method definition and a method call?
method call: has parentheses and dot notation
| method definition: has function keyword and a code block
180
Describe method definition syntax (structure)
method: function ( ) { code }
181
Describe method call syntax (structure)
obj.method( )
182
How is a method different from any other function?
It is is stored in an obj rather than a variable.
183
What is the defining characteristic of Object-Oriented Programming?
objects can contain both data (as properties) and behavior (as methods)
184
What are the four "principles" of Object-Oriented Programming?
Abstraction, Encapsulation, Inheritance, Polymorphism
185
What is "abstraction"?
To make something complicated into something simple
186
What does API stand for?
Application programming interface
187
What is the purpose of an API?
communication between softwares
188
What is this in JavaScript?
An implicit parameter of a function
189
What does it mean to say that this is an 'implicit parameter'?
It means that even though we don't see the keyword this, it's implied (built-in) inside of the function.
190
When is the value of this determined in a function; call time or definition time?
call time
191
How can you tell what the value of this will be for a particular function or method definition?
There is no way to find out what this is
192
How can you tell what the value of this is for a particular function or method call?
the object on the left side of the dot
193
What kind of inheritance does the JavaScript programming language use?
prototypal inheritance
194
What is a prototype in JavaScript?
an object that contains properties and methods that can be used by other objects
195
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?
prototypal inheritance
196
If an object does not have its own property or method by a given key, where does JavaScript look for it?
look at the prototype in the prototype chain
197
What does the new operator do?
Creates a new instance of an object that contains the prototype's properties
198
What property of JavaScript functions can store shared behavior for instances created with new?
prototype property
199
What does the instanceof operator do?
tests to see if the prototype property of a constructor appears anywhere in the prototype chain of an object
200
What is a client?
a piece of computer hardware that accesses a service made available by a server as part of the client-server model of computer networks.
201
What is a server?
a piece of computer hardware or software that provides functionality for other programs or devices, called "clients"
202
Which HTTP method does a browser issue to a web server when you visit a URL?
GET
203
What three things are on the start-line of an HTTP request message?
HTTP method, request target (usually URL), HTTP version
204
What three things are on the start-line of an HTTP response message?
protocol version (usually HTTP/1.1), status code, status text
205
What are HTTP Headers?
They let the client and the server pass additional information with an HTTP request or response.
206
Where would you go if you wanted to learn more about a specific HTTP Header?
MDN
207
Is a body required for a valid HTTP request or response message?
no
208
What is AJAX?
It is a programming practice of building complex, dynamic webpages using a technology known as XMLHttpRequest.
209
What does the AJAX acronym stand for?
stands for Asynchronous JavaScript and XML
210
Which object is built into the browser for making HTTP requests in JavaScript?
XMLHttpRequest()
211
What event is fires by XMLHttpRequest objects when they are finished loading the dat from the server?
load
212
An XMLHttpRequest object has an addEventListener() method just like DOM elements. How is it possible that they both share this functionality?
