HTML Flashcards
HTML skeleton, syntax, block and inline, lists, links, relative links (199 cards)
1
Q
Where do you put non-visible content about the HTML document?
A
Between the head element opening and closing tags.
2
Q
Where do you put visible content about the HTML document?
A
Between the body element opening and closing tags.
3
Q
Where do the <head> and <body> tags go in a valid HTML document?
A
Between the doctype declaration and the HTML element opening and closing tags.
4
Q
What is the purpose of a <!DOCTYPE> declaration?
A
Tell the browser which version of HTML the page is using, it helps the browser render the page correctly.
5
Q
Give five examples of HTML element types.
A
Html, head, body, h1, p
6
Q
What is the purpose of HTML attributes?
A
Attributes provide additional information about the contents of an element.
7
Q
Give an example of an HTML entity (escape character).
A
” & a m p ; “ for ampersand
“ & e a c u t e ; “ - accent on e
8
Q
How do block-level elements affect the document flow?
A
They create elements that will start on a new row and use the entirety of the row (horizontal space)
9
Q
How do inline elements affect the document flow?
A
Appears on the same line as their neighboring elements.
10
Q
What are the default width and height of a block-level element?
A
The default height is the height of the content and the width is the entire length of the page.
11
Q
What are the default width and height of an inline element?
A
The default height and width is the height of the content and the width of the content.
12
Q
What is the difference between an ordered list and an unordered list in HTML?
A
Ordered lists are numbered (alphabetical, etc.) and unordered lists begin with a bullet point (squares, etc.).
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
<a> tag and href attribute.</a>
15
Q
What is an absolute URL?
A
Full web address of a site to visit a specific page.. (domain name for that site, followed by the path to a specific page).
16
Q
What is a relative URL?
A
Links to other pages within the same site. (shorthand versions because they do not need the domain name).
17
Q
How do you indicate the relative link to a parent directory?
A
Use ../ to indicate the folder above the current one, then the file name. <a href= “../index.html”>
18
Q
How do you indicate the relative link to a child directory?
A
Name of child folder, followed by forward slash, the the file name . <a href= “ child/child.html “ >
19
Q
How do you indicate the relative link to a grand parent directory?
A
You can use ../ as many times to reach the root directory/grandparent directory
20
Q
How do you indicate the relative link to the same directory?
A
You can just name the file of the directory <a href = “ filename.html”>
21
Q
What is the purpose of an HTML form element?
A
The form element identifies the webpage as a form in which a user can input information
22
Q
Give five examples of form control elements.
A
Input, label, select, button, option
23
Q
Give three examples of type attribute values for HTML <input></input> elements.
A
Radio, checkbox, email, submit, time, calendar
24
Q
Is an HTML <input></input> element a block element or an inline element?
A
Inline
25
What are the six primary HTML elements for creating tables?
Table, tr, td, th, tbody, thead, (optional: tfoot)
26
What purpose do the thead and tbody elements serve? (semantic elements)
thead= defines a set of rows defining the head of the columns of the table
tbody= encapsulates a set of table rows, indicating that they comprise the body of the table.
Helps people who needs screen readers, improves search engine indexing, control appearance of tables better
27
Give two examples of data that would lend itself well to being displayed in a table.
TV schedules, stocks
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?
.class (period followed by the class name)
30
In CSS, how do you select elements by their tag name?
Just use the element name followed by {}.
31
In CSS, how do you select an element by its id attribute?
#ID (hashtag followed by the ID name)
32
Name three different types of values you can use to specify colors in CSS.
Rgb values, hex codes, color names.
33
What CSS properties make up the box model?
Border, margin , padding, content
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?
A keyword added to a selector that specifies a special state of the element.
37
What are CSS pseudo-classes useful for?
Pseudo-classes allow for stylization of elements in relation to external factors, status of the content, or the position of the mouse.
Makes changes based on user interaction
38
Name two types of units that can be used to adjust font-size in CSS.
Pixels, percentages, em, etc.
39
What CSS property controls the font used for the text inside an element?
font-family
40
What is the default flex-direction of a flex container?
row
41
What is the default flex-wrap of a flex container?
no wrap
42
Why do two div elements "vertically stack" on one another by default?
They are block-level elements and will not allow other elements to sit next to it
43
What is the default flex-direction of an element with display: flex?
row
44
What are the three primary components of a page layout? (Which helper classes do you need?)
Container, column, row
45
What is the minimum number of columns that you should put in a row?
1
46
What is the purpose of a container?
Contains everything in the web page to group together
Gives us a boundary for the web page.
47
What is the default value for the position property of HTML elements?
static
48
How does setting position: relative on an element affect document flow?
Element remains in normal document flow.
An elements final position can be modified to overlap other elements
49
How does setting position: relative on an element affect where it appears on the page?
Will not affect where it appears on the page. It will stay in the same place.
You can control how far an element is placed from its original position.
50
How does setting position: absolute on an element affect document flow?
Element will be removed from normal document flow.
51
How does setting position: absolute on an element affect where it appears on the page?
Element will be positioned relative to closest positioned non-static ancestor.
The element sits on its own separate layer from all other elements
52
How do you constrain an absolutely positioned element to a containing block?
You make the containing block that you want it to be positioned to into a relative position. They will position themselves within the first non-static ancestor.
Parent element can use (Absolute, sticky, fixed) to be a non static element
53
What are the four box offset properties?
Top, bottom, left, right
54
What is the purpose of variables?
To store data
55
How do you declare a variable?
Keyword + creating a variable and giving it a name.
56
How do you initialize (assign a value to) a variable?
Using the assignment operator. (=)
57
What characters are allowed in variable names?
letters , numbers, $ dollar sign, _ underscore
58
What does it mean to say that variable names are "case sensitive"?
A variable starting with a lowercase and a variable starting with an uppercase will create two separate variables.
59
What is the purpose of a string?
Hold data type consisting of letters/ other characters. Any type of text content.
60
What is the purpose of a number?
Hold any data type handling numbers/numeric values. Counting, calculating sums, determining size, moving the position, setting time, etc.
61
What is the purpose of a boolean?
To hold data types of true or false.
To turn a script on or off.
62
What does the = operator mean in JavaScript?
Assign a value to the variable, also used to update the value given to a variable.
63
How do you update the value of a variable?
Using the assignment operator.
Do not need to use ‘var’ again, just the name and (=)
64
What is the difference between null and undefined?
Null represents a placeholder value, might hold value in the future.
Undefined is a value that has not been thought of yet, does not hold value yet.
65
Why is it a good habit to include "labels" when you log values to the browser console?
To help debug. It makes it clearer which variables are being logged and in which order.
66
Give five examples of JavaScript primitives.
String, number, boolean, undefined, null
67
What data type is returned by an arithmetic operation?
A numerical value
68
What is string concatenation?
The joining of two or more strings using (+) to create a new string
69
What purpose(s) does the + plus operator serve in JavaScript?
This will combine the value of the string before and after the (+) operator
(a concatenated string)
Addition for numerical numbers.
70
What data type is returned by comparing two values (<, >, ===, etc)?
true/false
71
What does the += "plus-equals" operator do?
This will add the number value on the right and assigns the result to the variable
72
What are objects used for?
To group together a set of variables and functions to create a model.
73
What are object properties?
Variables that are part of an object.
74
Describe object literal notation.
The object is in curly braces with its contents, then stored in a variable. Each key is separated from its value using a colon and each property and method is separated with a comma.
Var (varName) = { property: ‘string’, };
75
How do you remove a property from an object?
Use keyword delete then dot notation to identify the property or method you want to remove from the object.
Delete var.varName;
76
What are the two ways to get or update the value of a property?
Using square brackets or dot notation.
Bracket: varName[‘newString’] = ‘updatedVal’;
Dot: varName.newString = updatedVal;
77
What are arrays used for?
To create ordered list of data.
78
Describe array literal notation.
Var varName = [ ‘one’, ‘two’, ‘three’];
Open brackets
List of data values followed by commas
79
How are arrays different from "plain" objects?
Arrays are a special type of objects, they hold a related set of values
Arrays use numbers as indexes
80
What number represents the first index of an array?
0
81
What is the length property of an array?
Gives you the total number of items in an array
82
How do you calculate the last index of an array?
Subtracting 1 from the array length
arrayName.length - 1
83
What is a function in JavaScript?
An object that can be called to make code more dynamic.
A set of statements to perform a task or calculate a value.
84
Describe the parts of a function definition.
Function keyword to begin the creation of a new function
An optional name for the function
Zero or more parameters surrounded by parentheses.
{ } opening and closing curly brace for the start and end of the function code block.
Optional return statement.
85
Describe the parts of a function call.
Function name, 0 or more arguments surrounded by parentheses.
86
When comparing them side-by-side, what are the differences between a function call and a function definition?
The definition has a series of statements to be run in the codeblock.
The function call is just the function name.
87
What is the difference between a parameter and an argument?
Parameter: a placeholder / stores local variables to the function
Argument: the value that we want to use for the function.
88
Why are function parameters useful?
Parameters are useful because they can be replaced with different arguments to run the same code block on that argument.
89
What two effects does a return statement have on the behavior of a function?
Produces a value from the function.
Prevents any more code in the function’s code block from being run.
A return will exit the function, any code after a return will not be logged..
90
Why do we log things to the console?
To check whether we get the desired results
91
What is a method?
A function that is a property of an object that
contains a function definition. Actions that can be performed on objects.
92
How is a method different from any other function?
Methods are associated with an object property whereas any other function themselves are objects
93
How do you remove the last element from an array?
pop() method
94
How do you round a number down to the nearest integer?
Math.floor() method - takes any float values 1.9 → to 1
Math.round (not preferred) - based on the rounding system (less than .4 rounds down, greater than .5 rounds up)
*Not relevant to question* ceil() rounds up: 1.1 → 2
95
How do you generate a random number?
Math.random() method
Returns 0-1
96
How do you delete an element from an array?
shift()- beginning
pop() - end
splice() method
Syntax: you can specify which index in the first argument and how many objects in the second argument
97
How do you append an element to an array?
unshift() method
push() method
98
How do you break a string up into an array?
split() method of the string
99
Do string methods change the original string? How would you check if you weren't sure?
No, the original string would still be present. You can console.log to make sure.
Strings cannot be changed in Java.
100
Roughly how many string methods are there according to the MDN Web docs?
50
101
Is the return value of a function or method useful in every situation?
Not always
102
Roughly how many array methods are there according to the MDN Web docs?
40
103
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
104
Give 6 examples of comparison operators.
===, !==, <, <=, >, >=
105
What data type do comparison expressions evaluate to?
Boolean true or false
106
What is the purpose of an if statement?
If statements set conditions that will run a code block whether it is true or false
If the initial condition is false, it will keep running until the last condition
107
Is else required in order to use an if statement?
No it is not required, it is only needed if there a condition you want to run if the first is not true.
108
Describe the syntax (structure) of an if statement.
If (keyword) if
Condition surrounded by parenthesis ex. (score > 50)
Opening curly brace {
Code to execute if value is true ex: congratulate()
Closing curly brace }
109
What are the three logical operators?
And logical &&: both conditions must be true to pass
Or logical ||: one or the other condition must be true to pass
Not logical !: inverts the boolean value
110
How do you compare two different expressions in the same condition?
Using the logical && or logical || operators
Ex: ((5>2) && (2<=3)) will run both expressions and only give true if both are.
Ex ((5>2) || (2>3)) This will run true because the first statement is true.
Using an else if
111
What is the purpose of a loop?
The purpose of a loop is to perform repeated tasks based on a condition
112
What is the purpose of a condition expression in a loop?
The condition expression in a loop dictates when a loop should stop running.
113
What does "iteration" mean in the context of loops?
Each pass through the loop.
114
When does the condition expression of a while loop get evaluated?
Before each iteration.
115
When does the initialization expression of a for loop get evaluated?
Once before the loop begins.
116
When does the condition expression of a for loop get evaluated?
Before each loop iteration.
117
When does the final expression of a for loop get evaluated?
At the end of each loop iteration, until condition is false.
118
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
Break
119
What does the ++ increment operator do?
Increments the value by 1.
120
How do you iterate through the keys of an object?
Using a for in loop.
121
What are the four components of "the Cascade".
Source order, inheritance, specificity, !important
122
What does the term "source order" mean with respect to CSS?
The order that your CSS rules are written your spreadsheet. The last stylization will take effect over the previous one.
123
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance
124
List the three selector types in order of increasing specificity.
Class, ID or element type
125
Why is using !important considered bad practice?
It overrides everything before it, so it is hard to be specific or maintain elements.
Other elements are being read by specificity, source order, etc.
126
Why do we log things to the console?
To check if we got the desired results.
127
What is a "model"?
An example of something
128
Which "document" is being referred to in the phrase Document Object Model?
The HTML document / whatever DOCTYPE is being declared
129
What is the word "object" referring to in the phrase Document Object Model?
Javascript objects
Represents different parts of the page that is loaded
The document represented as a large object that holds all info about its content
130
What is a DOM Tree?
The model of the HTML webpage as a tree of objects.
131
Give two examples of document methods that retrieve a single element from the DOM.
getElementByID: Selects an element by a specified ID
querySelector: CSS selectors
132
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll
getElementsByClassName
getElementsByTagName
133
Why might you want to assign the return value of a DOM query to a variable?
Saves the browser time looking for the element again. Also makes it easier to reuse.
134
What console method allows you to inspect the properties of a DOM element object?
console.dir(): Selects an element by specifying the ID
135
Why would a