Web Development Deck 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 element tags go in a valid HTML document?
A
In between the html element
4
Q
What is the purpose of a !DOCTYPE declaration?
A
It lets the web browser know what version of HTML it is running
5
Q
Give five examples of HTML element types.
A
- head
- body
- p
- img
- html
6
Q
What is the purpose of HTML attributes?
A
HTML attributes provide additional information about the contents of an element
7
Q
Give an example of an HTML entity (escape character).
A
© - copyright
8
Q
How do block-level elements affect the document flow?
A
They are structural markups that always starts on a new line. Any content on the left or right side gets pushed up or down
9
Q
How do inline elements affect the document flow?
A
They are semantic markups that provide extra information and does not disrupt the document flow
10
Q
What are the default width and height of a block-level element?
A
The height is dictated by the content and the width takes up 100% of is parent container
11
Q
What are the default width and height of an inline element?
A
Width and height are dictated by its content
12
Q
What is the difference between an ordered list and an unordered list in HTML?
A
An ordered list uses numbers to indicate a list of steps, but an unordered list uses bullet points to display a list
13
Q
Is an HTML list a block element or an inline element?
A
Block element
14
Q
What HTML tag is used to link to another website?
A
An a tag with attribute href=”(website URL)”
15
Q
What is an absolute URL?
A
The full web address used when linking to a different website
16
Q
What is a relative URL?
A
a shorthand used when linking to another page within the same site
17
Q
How do you indicate the relative link to parent directory?
A
../
18
Q
How do you indicate the relative link to a child directory?
A
directory name and file name
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
Just the file name
21
Q
What is the purpose of an HTML form element?
A
HTML forms gives you a set of elements to collect data from your users
22
Q
Give five examples of form control elements.
A
textarea, option, select, button, label
23
Q
Give three examples of type attributes values for HTML input elements.
A
text, radio, checkbox
24
Q
Is an HTML input element a block element or inline element?
A
It is neither
25
What are the primary HTML elements for creating tables?
table, tr, td, th, thead, tbody, tfoot
26
What purpose do the thead and tbody elements serve?
They help distinguish the heading from the body of the table. Also allows you to style these sections in different manner than the rest of the table.
27
Give two examples of data that would lend itself well to being displayed in a table.
financial reports and tv schedules
28
What are the name of the individual pieces of a CSS ruleset?
A selector (indicates which element the rule applies to) and a declaration (indicates how the elements referred to should be styled)
29
In CSS, how do you select elements by their class attributes?
A class selector use a period followed by the attribute value
30
In CSS, how do you select elements by their tag name?
Use the element name
31
In CSS, how do you select an element by its id attribute?
An id selector uses a # followed by the attribute value
32
Name three different types of values you can specify colors in CSS.
RGB values, Hex code, and Color names
33
What CSS properties make up the box model?
Border, margin, padding
34
Which CSS properties 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?
A pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer
37
What are CSS pseudo-classes useful for?
To make stylistic changes to user feedback
38
Name two types of units that can be used to adjust font-size in CSS.
rem and px
39
What CSS property controls the font used for the text inside an element?
font-size
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?
Because they are block 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 affect document flow
46
How does setting position: relative on an element affect where it appears in 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 get removed from document flow and all other elements fill the space
48
how does setting position: absolute on an elements affect where it appears on the page?
Absolutely element no longer exists in the normal document flow. Instead, it sits on its own layer separate from everything else.
49
How do you constrain an absolutely positioned elements to a containing block?
By looking for the parents container and setting it's position to relative
50
What are the four box offset properties?
top, right, bottom, left
51
what is the purpose of variables?
a variable stores the data value that can used and changed later on
52
How do you declare a variable?
specify the type, leave at least one space, then the name for the variable and end the line with a semicolon ( ; )
53
How do you initialize (assign a value to) a variable?
add an equal sign (=) to the right of a variable name. to the right of the equal sign, write an expression
54
What characters are allowed in variable names?
letters, numbers, non-punctuation characters (except a period (.) is allowed, but cannot start with a number
55
What does it mean to say that variable names are "case sensitive"?
This means that language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters
56
What is the purpose of a string?
A string is a data type used in programming, such as an integer and floating point unit, but is used to represent text rather than numbers
57
What is the purpose of a number?
Number is a primitive wrapper object used to represent and manipulate mathematical operations
58
What is the purpose of a boolean?
Boolean refers to a system of logical thought that is used to create true/false statements
59
What does the = operator mean in JavaScript?
an operator is a special symbol used to perform operations on operands (values and variables)
60
How do you update the value of a variable?
We can update our variables in shorter ways by using the += , *= , -= or /= operators. No keyword needed, variable = value
61
What is the difference between null and undefined?
undefined is a variable that refers to something that doesn't exist, and the variable isn't defined to be anything. null is a variable that is defined but is missing a value. Null is used to assign nothing to a variable purposefully. Undefined is JavaScripts response to nothing being assigned to the variable
62
Why is it a good habit to include "labels" when you log values to the browser console?
It helps organize which variables are being logged and in what order
63
Give five examples of JavaScript primitives.
undefined , null , boolean , string and number
64
What data type is returned by an arithmetic operation?
An arithmetic operation combines two or more numeric expressions using the Arithmetic Operators to form a resulting numeric expression
65
What is string concatenation?
the process of appending one string to the end of another string
66
What purpose(s) does the + plus operator serve in JavaScript?
returns the sum of the expression and concatenates strings
67
What data type is returned by comparing two values (<, >, ===, etc)?
returns the boolean values: true of false
68
What does the += "plus-equals" operator do?
adds the value on the right, to the variable on the left, and then assigns that value back into the variable on the left
69
What are objects used for?
Used to group a collection of key-value pairs into one variable object
70
What are object properties?
Variables that are part of an object
71
Describe object literal notation.
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
72
How do you remove a property from an object?
Use the delete operator
73
What are two ways to get or update the value of a property?
dot notation and bracket notation
74
What are arrays used for?
to store a list of data
75
Describe array literal notation.
values are separated by a comma in a bracket [ ] and then assigned to a variable
76
How are arrays different from "plain" object?
arrays have a length property
77
What number represents the first index of an array?
0
78
What is the length property of an array?
tells you how many items you have in an array
79
How do you calculate the last index of an array?
subtract the array length by 1 then index the array by that value
80
What is a function in JavaScript?
a set of statements that performs a task or calculates a value that can be replicated multiple times
81
Describe the parts of a function definition.
function keyword, optional name, comma-separated list of zero or more parameters surrounded by parentheses, start of the function's code block, optional return statement,
end of the function's code block
82
Describe the parts of a function call.
function's name, a comma separated list of zero or more arguments surrounded by parentheses
83
When comparing them side-by-side, what are the differences between a function call and a function definition
function definition has a function keyword, parameters, and a code bock. function calls have arguments and returns a value
84
What is the difference between a parameter and an argument?
a parameter is the variable in a function definition that has no value and is just a placeholder and an argument is the value passed when calling a function
85
Why are function parameters useful?
so that the function can be used multiple times with a variety of different values
86
What two effects does a return statement have on the behavior of a function?
causes the function to produce a value we can use in our program and prevents any more code in the function's code block from being run
87
Why do log things to the console?
console.log is a good debugging tool to check the progress of our code and see how things will appear in the browser
88
What is a method?
a function that is a stored into the property of an object
89
How is a method different from any other function?
includes an object that you are using the method from
90
How do you remove the last element from an array?
.pop( ) method
91
How do you round a number down to the nearest integer?
Math.floor( ) method - always goes down. Math.trunc( ) - take off the decimal
92
How do you generate a random number?
Math.random( ) method - function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1)
93
How do you delete an element from an array?
.splice( ) method - specifies a spot where you should delete
94
How do you append an element to an array?
.push( ) method
95
How do you break a string up into an array?
.split( ) method - takes an argument of a string and finds those values and breaks up the string at those locations
96
Do string methods change the original string? How would you check if you weren't sure?
They do not change the original string. When in doubt test it out
97
Roughly how many string methods are there according to the MDN Web docs?
50
98
Is the return value of a function or method useful in every situation?
It is potentially useful but not always
99
Roughly how many array methods are there according to the MDN Web docs?
A lot
100
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
101
Give 6 examples of comparison operators.
==, !==, >, <, ===, >=
102
What data type do comparison expressions evaluate to?
boolean values
103
What is the purpose of an if statement?
it is a conditional statement that determines which lines of code should be run next based on the return value of the expression
104
Is else required in order to use an if statement?
no
105
Describe the syntax (structure) of an if statement.
if keyword, condition within parentheses( ), open curly brace, code to execute if the value is true, semi-colon, end curly brace
106
What are the three logical operators?
&&, ||, !
107
How do you compare two different expressions in the same condition?
separate the two expressions with a logical operator
108
What is the purpose of a loop?
It allows you to execute a block of code multiple times as long as a specified condition is true
109
What is the purpose of a condition expression in a loop?
Sets a stop for when the code should stop running
110
What does "iteration" mean in the context of loops?
each single pass through the sequence to complete all steps in the given order
111
When does the condition expression of a while loop get evaluated?
before the code block run before each iteration
112
When does the initialization expression of a for loop get evaluated?
before the very first iteration of the code block
113
When does the condition expression of a for loop get evaluated?
right before the code block and right after the final expression
114
When does the final expression of a for loop get evaluated?
at the end of each iteration
115
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break keyword
116
What does the ++ increment operator do?
it adds one to the variable
117
How do you iterate through the keys of an object?
for in loop
118
What are the four components of "the Cascade".
source order, inheritance, specificity, and importance
119
What does the term "source order" mean with respect to CSS?
code that falls lower in the stylesheet is stronger than those higher on the stylesheet
120
How is it possible for the styles of an element to be applied to its children as well without an addition CSS rule?
inheritance process
121
List three selector types in order of increasing specificity.
element type, class, then id
122
Why is using !important considered bad practice?
it breaks the rules of the cascade
123
What does the transforms property do?
it modifies the coordinate space of the CSS visual formatting model
124
Give four examples of CSS transform functions.
rotate, scale, skew, translate
125
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay
126
Why do we log things to the console?
use as a debugger tool to check if our code is running the way it's intended to
127
What is a "model"?
a recreation of something
128
Which "document" is being referred to in the phrase Document Object Model?
HTML document
129
What is the word "object" referring to in the phrase Document Object Model?
JavaScript object (that is modeling the HTML document)
130
What is a DOM tree?
structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree
131
Give two examples of document methods that retrieve a single element from the DOM.
querySelector( ) and getElementById( )
132
Give on example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll( )
133
Why might you want to assign the return value of a DOM query to a variable?
This saves the browser looking though the DOM tree to find the same element(s) again. It is known as catching the selection
134
What console method allows you to inspect the properties of a DOM element object?
console.dir( )
135
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
So that the browser loads the HTML document before the javascript code
136
What does document.querySelector( ) take as its argument and what does it return?
returns the first Element within the document that matches the specified selector, or group of selectors
137
What does document.querySelectorAll( ) take as its argument and what does it return?
returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors
138
What is the purpose of events and event handling?
events are actions that happen in the system which then tells you so that your code can react to them. Programmers can create event handler code that will run when an event fires, allowing web pages to respond appropriately to change
139
Are all possible parameters required to use a JavaScript method of function?
no
140
What method of element objects lets you run a function to be called when a specific type of event occurs?
addEventListener( )
141
What is a callback function?
a function being passed to another function as an argument
142
What object is passed into an event listener callback when the event fires?
event object
143
What is the event.target?
Property whose value is where the element of this event occurs at, not where the listener was applied to
144
What is the difference between these two snippets of code?
element.addEventListener('click', handleClick)
element.addEventListener('click', handleClick( ))
first one has a callback function that can be used later. Second one has a function that passes the return value of the function
145
What is the className property of element objects?
it gets and sets the value of the class attribute of the specified html element
146
How do you update the CSS class attribute of an element using JavaScript?
the element. classname = string of the class value
147
What is the textContent property of element objects?
it returns the text content of the element and all descendaces, with spacing and CSS hidden text, but without the tag.
148
How do you update the text within an elements using JavaScript?
element.textContent = 'string'
149
Is the event parameter of an event listener callback always useful?
Most of the time yes, but there are some specific cases where it is not needed
150
Would this assignment be simper or more complicated if we didn't use a variable to keep track of the number of clicks?
it would be more complicated because we wouldn't have a variable to keep track of the value of the clicks
151
Why is storing information about a program in variables better than only storing it in the DOM?
storing in a variable allows you to access to a location that is easy to refer back to, rather than writing coding that looks through the entire node tree everything you need access to a value
152
What event is fired when a user places their cursor in a form control?
pointer event
153
What event is fired when a user's cursor leaves a form control?
blur event
154
What event is fired as a user changes the value of a form control?
input event
155
What event is fired when a user clicks the "submit" button within a ?
submit event - even on the form element not the submit button
156
What does the event.preventDefault() method do?
it prevents the default action of an event
157
What does submitting a form without event.preventDefault() do?
it refreshes the page before the data is stored
158
What property of a form element object contains all of the form's controls.
elements
159
What property of a form control object gets and sets its value?
every form control should include a name attribute
160
What is one risk of writing a lot of code without checking to see if it works so far?
it'll be hard to find the location of a bug within your lines of code
161
What is an advantage of having your console open when writing a JavaScript program?
it notifies you if you run into any bugs while you are working on code
162
Does the document.createElement() method insert a new element into the page?
no, it just creates it
163
How do you add an element as a child to another element?
appendChild( ) method
164
What do you pass as the arguments to the element.setAttribute() method?
it becomes a string
165
What steps do you need to take in order to insert a new element into the page?
create element, add config work if necessary, and append it using appendChild( ) method
166
What is the textContent property of an element object for?
used to add text content to an element or retrieve the text content
167
Name two ways to set the class attribute of a DOM element.
using the setAttribute method or the className property
168
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
The function an be reused and the value of the return can also be returned
169
Give two examples of media features that you can query in an @media rule.
min-width, min-height
170
Which HTML meta tag is used in mobile-responsive web pages?
viewpoint metatag
171
What is the event.target?
It is the target property of the event to the object which the even event was dispatched
172
Why is it possible to listen for events on one element that actually happen its descendent elements?
event bubbling
173
What DOM element property tells you what type of element it is?
tagName property
174
What does the element.closest() method take as its argument and what does it return?
takes css selectors in string form and returns the first ancestor of the selected element
175
How can you remove an element from the DOM?
remove method
176
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?
event delegation
177
What is the affect of setting an element to display: none?
it removes the element from the document flow
178
What does the element.matches() method take as an argument and what does it return?
it takes a css selector in string form and returns a boolean value
179
How can you retrieve the value of an element's attribute?
getAttribute method
180
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?
you would have to write multiple codes in javascript for the other views and tabs
181
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?
you would need a bunch of different if statements
182
What is a breakpoint in responsive Web design?
the point at which a website's content and design will adapt in a certain way in order to provide the best possible user experience
183
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?
it moves based on the size of the window size
184
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?
because of the source order or the cascade
185
What is JSON?
text-based data format for representing structured data based on JavaScript object syntax
186
What are serialization and deserialization?
serialization is the process of turning an object into a stream of bytes to be transported or stored. Deserialization is the opposite
187
Why are serialization and deserialization useful?
used to send data - converts data into strings which are easily interpreted across all logic languages
188
How do you serialize a data structure into a JSON string using JavaScript?
JSON.stringify( )
189
How do you serialize a JSON into a data structure using JavaScript?
JSON.parse( )
190
How do you store data in localStorage?
use the setItem( ) method on the localStorage object
191
How do you retrieve data from localStorage?
use the getItem( ) method on the localStorage object
192
What data type can localStorage save in the browser?
strings
193
When does the 'beforeunload' event fire on the window object?
the event us fired when the window, the document, and its resources are about to be unloaded
