HTML Flashcards
(199 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 and tags go in a valid HTML document?
A
between closing and opening html tag element
4
Q
What is the purpose of a declaration?
A
let us know that this is an html document
5
Q
give 5 examples of html element tags
A
head tag, body tag, p tag, h1 tag, title tag
6
Q
What is the purpose of HTML attributes?
A
provide more information for the html element.
7
Q
Give an example of an HTML entity (escape character).
A
® = registered trademark
8
Q
How do block-level elements affect the document flow?
A
block starts on new line and takes up the whole width.
9
Q
How do inline elements affect the document flow?
A
inline continues and takes as much space as needed.
10
Q
What are the default width and height of a block-level element?
A
100% width and the height is based on the html element content.
11
Q
What are the default width and height of an inline element?
A
width is based on content as well as height
12
Q
What is the difference between an ordered list and an unordered list in HTML?
A
ordered list are numbers and unordered are bullets
13
Q
Is an HTML list a block element or an inline element?
A
block
14
Q
How do you indicate the relative link to a parent directory?
A
../ to indicate the folder above the currentone, then follow it with the file name.
15
Q
How do you indicate the relative link to a child directory?
A
Name of the child folder followed by a forward slash then the file name
16
Q
How do you indicate the relative link to a grand parent directory?
A
../../ indicate that you want to go up two folders rather than one follow it up with the file name.
17
Q
How do you indicate the relative link to the same directory?
A
Just use the file name.
18
Q
What is the purpose of an HTML form element?
A
To collect information from visitors using different types of form control.
19
Q
Give five examples of form control elements.
A
Text input, radio, button, password input, text area,
Checkboxes, drop down boxes, submit buttons.
20
Q
Give three examples of type attributes for HTML elements.
A
button, radio
21
Q
Is an HTML element a block element or an inline element?
A
INLINE
22
Q
name 3 different types of values you can use to specify colors in css.
A
HEX, NAME AND RGB.
23
Q
what are the names of the individual pieces of a CSS rule?
A
CSS RULE SET:
SELECTOR {DECLARATION BLOCK
PROPERTY AND VALUE}
24
Q
In CSS how do you select elements by their class attribute?
A
using a period followed by the name
25
In CSS how do you select elements by their type
just the name of the element
26
In css how do you select an element by its id attribute?
using "hashtag" # followed by the name.
27
Name three different types of values you can use to specify colors in CSS.
RGB , HEX AND COLOR VALUE NAME
28
What CSS properties make up the box model?
It consists of: margins, borders, padding, and the actual content.
29
Which CSS property pushes boxes away from each other?
MARGIN
30
Which CSS property add space between a box's content and its border?
PADDING : BORDER-SPACING
31
What is a pseudo-class?
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.
32
What are CSS pseudo-classes useful for?
it can be used to: Style an element when a user mouses over it. Style visited and unvisited links differently.
33
Name at least two units of type size in CSS.
REM, PIXEL
34
What CSS property controls the font used for the text inside an element?
FONT-FAMILY
35
What is the default flex-direction of a flex container?
ROW
36
* What is the event.target?
* The element that was targeted by the user.
37
* What is the affect of setting an element to display: none?
* it prevents the html from rendering.
38
* What does the element.matches() method take as an argument and what does it return?
* argument: css selector string and it returns a boolean if it is a match or not. true or false.
39
* How can you retrieve the value of an element's attribute?
* getAttribute()
40
* At what steps of the solution would it be helpful to log things to the console?
* -every step you’re unsure of not getting results ; everywhere you log it.
41
* 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 manually set an event listener for each tab. -
* If you didn't use a loop to conditionally show or hide the views in the
42
* 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?
* manually find each element and unset the class.
43
* What is a breakpoint in responsive Web design?
* where the content on the page responds depending on what the media feature width was set at . Place where the media query.
44
* 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?
percentage will correlate with the device width. whereas 300 pixels is a set amount correlate with the container viewport.
45
f 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 : cascade example. CSS the source order is important. Media query should be on the bottom.
46
* What is JSON?
JSON is a text-based data format following JavaScript object syntax the data is passed in strings.
- object /array rendered to string
47
* What are serialization and deserialization?
* serialization is turning object/array to string “stings are characters of byte”
* deserialization is turning strings into object/array.
* send and receive data possible.
Simply speaking Serialization is a process of converting an Object into stream of bytes so that it can be transferred over a network or stored in a persistent storage.
Deserialization is the exact opposite - Fetch a stream of bytes from network or persistence storage and convert it back to the Object with the same state.
48
* Why are serialization and deserialization useful?
* might be too large, and we can’t transmit data based on memory data
* serialization is easy to transfer.
* deserialization: is easy to access.
49
* How do you serialize a data structure into a JSON string using JavaScript?
* using JSON.stringify(); method.
50
* How do you deserialize a JSON string into a data structure using JavaScript?
* using JSON.parse(); method.
51
reason for JSON
reason why we have JSON so we have a format where we can transmit data.
takeaway: Strings can be used to store data.
52
* How to you store data in localStorage?
* go to applications then local storage.
53
* What data type can localStorage save in the browser?
* key and values
54
* When does the 'beforeunload' event fire on the window object?
* -before you unload it will notify you.
- right before you leave the website. Notify with a pop up window.
- before the tab unloads.
55
* What is a method?
methods are actions that can be performed on objects. A JavaScript method is a property containing a function definition. Methods are functions stored as object properties.
56
* How can you tell the difference between a method definition and a method call?
* method call you pass in an argument.
* function inside a method’s name and method call is you’re
* parenthesis .
method definition will always include a code block with the function keyword.
method calls : predefined function. starting with the object.method(‘call’);
57
* Describe method definition syntax (structure).
* property : function assigning to a property
58
* Describe method call syntax (structure).
object.property().
59
* How is a method different from any other function?
method are functions stored as object properties
60
* What is the defining characteristic of Object-Oriented Programming?
Object-oriented methodology relies on three characteristics that define object-oriented languages: encapsulation, polymorphism, and inheritance.
61
* What are the four "principles" of Object-Oriented Programming?
* Abstraction
* Encapsulation
* Inheritance
* Polymorphism
62
* What is "abstraction"?
* Taking something complex and making it simple for example light switch. we just turned on and off, but there’s more complex things behind that light switch.
63
* What does API stand for?
application programing interface
64
* What is the purpose of an API?
* someone created a set of tools for you to use. “communication between softwares” interaction between multiple softwares.
65
* What is this in JavaScript?
* object The JavaScript this keyword refers to the object it belongs to.
66
* What does it mean to say that this is an "implicit parameter"?
it's an implicit parameter, meaning that it is available in a function's code block even though it was never included in the function's parameter list or declared with var.
67
* When is the value of this determined in a function; call time or definition time?
call time
68
* 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);
* }
* };
* “undefined : this.firstName was not called. the value is determined at call time. “
69
* Given the above character object, what is the result of the following code snippet? Why?character.greet();
It’s a me “mario!”
70
* Given the above character object, what is the result of the following code snippet? Why?var hello = character.greet;
* hello();
It’s a me , undefined! - the greet property was not called with the function.?
71
How can you tell what the value of this will be for a particular function or method definition?
-there is no way to know what the value yet .
72
* How can you tell what the value of this is for a particular function or method call?
- the object left to the left of the dot.
73
* What kind of inheritance does the JavaScript programming language use?
-prototype-based inheritance
74
* What is a prototype in JavaScript?
- a prototype in javascript is a template object that allows objects to inherits methods and properties from.
75
* 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?
prototype object : inheritance.
76
* If an object does not have it's own property or method by a given key, where does JavaScript look for it?
look into the parent object : Prototype object.
| a prototype can be under another prototype.
77
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay.
78
What event is fired when a user places their cursor in a form control?
focus
79
What event is fired when a user's cursor leaves a form control?
blur
80
What event is fired as a user changes the value of a form control?
input
81
What event is fired when a user clicks the "submit" button within a ?
Prevent form submission
82
What does the event.preventDefault() method do?
- prevent default :
83
What does submitting a form without event.preventDefault() do?
It’ll keep running
84
What property of a form element object contains all of the form's controls.
HTMLFormElement property.
85
What property of a form control object gets and sets its value?
Is the one for form control. Value property.
86
What is one risk of writing a lot of code without checking to see if it works so far?
The code might’ve broken earlier on.
87
What is an advantage of having your console open when writing a JavaScript program?
Check the code in real time.
88
Does the document.createElement() method insert a new element into the page?
no, it’s not part of the Dom tree until it is appended.
89
How do you add an element as a child to another element
parent.appendchild(child)
90
What do you pass as the arguments to the element.setAttribute() method?
Element.setAttribute(name, value);
91
What steps do you need to take in order to insert a new element into the page?
Create the element with createElement()
Create the textNode with createTextNode() ←-optional
Appendchild(); specify which element you want this node added to
parent appendchild child
92
What is the textContent property of an element object for?
represents the text content of the node
93
Name two ways to set the class attribute of a DOM element.
Set attribute method
Class Name method.
Class list : add(); remove();
94
What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?
- Reuse content; in multiple applications.
- update the content .
- return the DOM TREE. at the end.
- take the most external and then return it .
95
Give two examples of media features that you can query in an @media rule.
@media (max-width: 12450px) { ... }
@media (hover: hover) { ... }
Min width & max width.
96
Which HTML meta tag is used in mobile-responsive web pages?
| Meta - viewport .
97
What is the event.target?
the element that was touched/targeted
98
Why is it possible to listen for events on one element that actually happen its descendent elements?
parent and children
99
What DOM element property tells you what type of element it is?
typeOF
100
What does the element.closest() method take as its argument and what does it return?
the closest element
101
How can you remove an element from the DOM?
remove()
102
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?
reuse the same function
103
What is the className property of element objects?
- Property that allows you to get the class attribute of the element or set it.
- the value of the class attribute.
104
How do you update the CSS class attribute of an element using JavaScript?
Element.classname = with the new class.
105
What is the textContent property of element objects?
The text content within the node and their child.
106
How do you update the text within an element using JavaScript?
Node.textContent = ‘string’.
| Dom object .textContent =
107
Is the event parameter of an event listener callback always useful?
No.
108
Would this assignment be simpler or more complicated if we didn't use a variable to keep track of the number of clicks?
Won’t be able to track the number of clicks.
| Hard to keep track. You want it to keep
109
Why is storing information about a program in variables better than only storing it in the DOM?
easy access
110
What does the transform property do?
CSS property lets you rotate, scale, skew, or translate an element.
111
Give four examples of CSS transform functions.
matrix()
Describes a homogeneous 2D transformation matrix.
matrix3d()
Describes a 3D transformation as a 4×4 homogeneous matrix.
Rotation
rotate()
Rotates an element around a fixed point on the 2D plane.
rotate3d()
Rotates an element around a fixed axis in 3D space.
rotateX()
Rotates an element around the horizontal axis.
rotateY()
Rotates an element around the vertical axis.
rotateZ()
Rotates an element around the z-axis.
*rotate, translate, matrix, skew ;
112
Why do we log things to the console?
to check your code
113
What is a "model"?
Our code is just code. When the webpage loads our code that is the model. The physical representation of our code.
114
Which "document" is being referred to in the phrase Document Object Model?
Document node is the representation of the entire page.
| HTML is the document.
115
What is the word "object" referring to in the phrase Document Object Model?
The nodes. “Each node is an object with methods and properties.
In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE, or any other HTML element.
“Javascript” it’s an object modeling the javascript model.
116
What is a DOM Tree?
What is a DOM Tree?
How your code is sorted out. With the document node always on top. Document node is the parent with every other node a descendent of the document node.
Collection of HTML elements that are connected with each other like a family tree.
117
Give two examples of document methods that retrieve a single element from the DOM.
- getElementByID();
| - querySelector();
118
Give one example of a document method that retrieves multiple elements from the DOM at once.
getElementByClassName();
getElementByTagName();
querySelectorAll();
119
Why might you want to assign the return value of a DOM query to a variable?
Method that finds elements in the DOM tree are called DOM queries.
When you need to work with an element more than once you should use a variable to store the result of that query.
“For multiple use you can reuse it”
120
What console method allows you to inspect the properties of a DOM element object?
The method console.dir();
121
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
Html reads top to bottom.
122
What does document.querySelector() take as its argument and what does it return?
querySelector(‘css selector’)
123
What does document.querySelectorAll() take as its argument and what does it return?
querySelectorAll
Will take all of the querySelectorAll css selector: even if they have multiple css selector.
Uses the css selector syntax to select one or more elements and return all of those that matches.
124
Why do we log things to the console?
to check our code
125
What is the purpose of events and event handling?
User interaction. User clicks a function happens. The code responds to the user.
126
Are all possible parameters required to use a JavaScript method or function?
no
127
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener() method
128
What is a callback function?
A callback function is a function passed into another function as an argument,
129
What object is passed into an event listener callback when the event fires?
Event object -
130
What is the event.target? If you weren't sure, how would you check? Where could you get more information about it?
An object referencing where the event started and occurs.
131
What is the difference between these two snippets of code?
element. addEventListener('click', handleClick)
element. addEventListener('click', handleClick())
First one includes the call back : legitimate eventlistener
Second one includes
-function call : the return of the function call.
It got called before it was
Never call an event handler.
Need one for the event “example” - click
& one return it
132
What are the four components of "the Cascade".
Order it is in “where it is”, how specific it is, “how important it is”
Source orders, inheritance, specificity,
133
What does the term "source order" mean with respect to CSS?
Where you put the selector in the style sheet effects what property is applied
“Preference for css styles is to use the source order” laying out the css.
134
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
-direct children inherit the parent css.
“Relating to fonts: text.
Font family & color property.”
Positioning is not inheritance.
135
List the three selector types in order of increasing specificity.
Type selector: the element
Class selector
Id selector
136
Why is using !important considered bad practice?
It breaks the cascading style and is hard for debugging.
137
why do we log things to the console?
To check your work if it is working correctly.
138
What is a method?
JavaScript methods are actions that can be performed on objects.
A JavaScript method is a property containing a function definition.
139
How is a method different from any other function?
method, like a function, is a set of instructions that perform a task. The difference is that a method is associated with an object, while a function is not.
140
How do you remove the last element from an array?
The pop() method
141
How do you round a number down to the nearest integer?
floor() methd
142
How do you generate a random number?
random()
143
How do you delete an element from an array?
Splice () :
144
How do you append an element to an array?
Push method ();
145
How do you break a string up into an array?
Split () method
146
Do string methods change the original string? How would you check if you weren't sure?
No: , console log
147
Roughly how many string methods are there according to the MDN Web docs?
30ish.
148
Is the return value of a function or method useful in every situation?
no
149
Roughly how many array methods are there according to the MDN Web docs?
35
150
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
mdn
151
Give 6 examples of comparison operators.
```
Less than () — returns true if the value on the left is greater than the value on the right, otherwise it returns false.
Less than or equal to (<=) — returns true if the value on the left is less than or equal to the value on the right, otherwise it returns false.
Greater than or equal to (>=) — returns true if the value on the left is greater than or equal to the value on the right, otherwise it returns false.
Equal to (===) — returns true if the value on the left is equal to the value on the right, otherwise it returns false.
Not equal to (!==) — returns true if the value on the left is not equal to the value on the right, otherwise it returns false.
```
152
What data type do comparison expressions evaluate to?
boolean
153
What is the purpose of an if statement?
To make a decision should i do this or not.
154
Is else required in order to use an if statement?
No not necessary;
155
Describe the syntax (structure) of an if statement.
```
if (condition) {
// block of code to be executed if the condition is true
}
If stmt (conditional block)
```
156
What are the three logical operators?
OR , AND , NOT
157
How do you compare two different expressions in the same condition?
|| or &&and
158
What are arrays used for?
To store a list of items or like values. Similar datas.
159
Describe array literal notation.
Var name of array [square brackets with the values followed by a comma]
160
How are arrays different from "plain" objects?
Array stores a list of like values
It has an index. “There’s an order.”
Object stores properties : describes the item.
161
What number represents the first index of an array?
zero
162
What is the length property of an array?
Calculates the number of items/values in the array.
| Name of the array followed by a period and then the length property.
163
How do you calculate the last index of an array?
Name of the array followed by a period and then length property minus 1
164
What is a function in JavaScript?
set of task/procedures
165
Describe the parts of a function definition.
function "name" (parameter) { code block};
166
Describe the parts of a function call.
function name (argument);
167
When comparing them side-by-side, what are the differences between a function call and a function definition
```
function definition = code block;
function call = contains argument
```
168
What is the difference between a parameter and an argument?
```
parameter = placeholder;
argument = actual value
```
169
Why are function parameters useful?
acts as placeholder . allows substitution
170
What two effects does a return statement have on the behavior of a function?
returns a value
171
What is the purpose of variables?
-a way for a script to store bits of information it needs to do its job. Variables can be represented by numbers, string, boolean, null, undefined,
172
How do you declare a variable?
You can declare a variable by using “let, var, const”
Start with the variable keyword and then variable name
Example: var quantity;
var= keyword and quantity = variable name
173
how to initialize a variable
Variable name = value
Using the assignment operator
Variable name+ “assignment operator =” + value
174
What characters are allowed in variable names?
Start them with a letter, underscore _, or dollar sign $.
After the first letter, you can use numbers, as well as letters, underscores, or dollar signs.
Don’t use any of JavaScript’s reserved keywords.
What does it mean to say that variable names are "case sensitive"?
Uppercase and lowercase will have an effect on the name
175
purpose of string
String is used to store text data
176
What is the purpose of a number?
Store numerical values
| Numbers are used for task that involves counting or calculating basically anything for math.
177
What is the purpose of a boolean?
To store true or false values and comparison::for decision making
178
What does the = operator mean in JavaScript?
It means that you are saying you are going to assign a value to a variable
Make that variable hold that value or contain that value.
179
How do you update the value of a variable?
VariableName = whatever the new value is;
180
What is the difference between null and undefined?
Null is used as a placeholder for a value you do not know yet.
Null and undefined : “ null is intentionally left empty”
Null at some point it has to be assigned a value in order for it to work.
181
Why is it a good habit to include "labels" when you log values to the browser console?
Let you know what that data is. Good habits to do so when you do console log you know what that data means.
182
Give five examples of JavaScript primitives.
numbers, string, boolean, null, undefined, array, object
183
What data type is returned by an arithmetic operation?
NUMBER VALUE DATA TYPE
| Arithmetic operators perform basic math
184
What is string concatenation?
Using the “+ the plus symbol” to join two variables or string.
185
What purpose(s) does the + plus operator serve in JavaScript?
Addition: adds one value to another
186
What data type is returned by comparing two values (, ===, etc)?
Boolean , true or false
187
What does the += "plus-equals" operator do?
The addition assignment operator (+=) adds the value of the right operand to a variable and assigns the result to the variable.
188
What are objects used for?
Objects group together a set of variables and function to create a model of something you would recognize from the real word.
189
What are object properties?
If variables are part of an object is called a property. Property tells us about the object such as name of hotel or number of rooms it has
190
Describe object literal notation.
Name of the variable {} curly bracelet
| Key and value in the curly brackets and the method.}
191
How do you remove a property from an object?
Delete objectname followed by a period and then the property name
192
What are the two ways to get or update the value of a property?
You can get or access the properties using the dot notation
| Or the square bracket notation.
193
What is the default value for the position property of HTML elements?
Position: STATIC;
194
How does setting position: relative on an element affect document flow?
Moves an element from the position it would be in normal flow, shifting it to top, right, bottom or left or where it would have been placed.
195
How does setting position: relative on an element affect where it appears on the page?
Moves an element from the position it would be in normal flow, shifting it to top, right, bottom or left or where it would have been placed.
196
How does setting position: absolute on an element affect document flow?
Positions the element in relation to its containing element. It is taken out of the normal flow meaning that it does not affect the position of any surrounding elements.
Taken out of normal flow and no longer affects the position of other elements on the page
197
How does setting position: absolute on an element affect where it appears on the page?
Absolutely positioned elements move as users scroll up and down the page.
198
What are the four box offset properties?
Top, bottom, left and right.
199
Name three different types of values you can use to specify colors in CSS.
Hex , name ,rgb
