All Cards Flashcards
Where do you put non-visible content about the HTML document?
In the head element
(Meta data e.g. Title are in the head element)
Where do you put visible content about the HTML document?
In the body element
E.g. h1-h6, p, ul, ol, li elements
Where do the head and body tags go in a valid HTML document?
In the html element (head element is above the body element)
What is the purpose of a DOCTYPE declaration?
To tell the browser what type of document is being used
(specifically with HTML it was used for which version of HTML was being used)
Give five examples of HTML element types.
head
body
h1 - h6
p
ul
ol
li
div
What is the purpose of HTML attributes?
To provide additional information on the content of an element
E.g. Class, ID, src…
Give an example of an HTML entity (escape character).
Less Than <
Greater Than >
Ampersand &
Cent ¢
Pound £
Yen ¥
Euro €
Copyright ©
Registered trademark ®
Trademark ™
Multiplication ×
Division ÷
How do block-level elements affect the document flow?
Block level elements always start on a new line. They do not allow any other elements on the same line as them.
Example Block Elements:
ul
ol
li
h1-h6
p
div
How do inline elements affect the document flow?
Inline elements will continue on the same line. They allow other elements to be on the same horizontal line.
Example Inline Elements:
button
span
strong
em
What are the default width and height of a block-level element?
Width: width of its containing block
Height: height of content
What are the default width and height of an inline element?
Width: width of content
Height: height of content
What is the difference between an ordered list and an unordered list in HTML?
An ordered list numbers each line in ascending order and an unordered list shows each item next to a bullet point.
OL:
1.
2.
3.
-
-
Is an HTML list a block element or an inline element?
Block element because it lists each item on its own line.
What HTML tag is used to link to another website?
Anchor Tag (the a element)
a href=”link”
What is an absolute URL?
An absolute URL is a link to a specific URL on the web (can be a completed different website [href is the full web address] )
E.g.
a href=”https://www.google.com”
What is a relative URL?
A relative URL is a link to other pages within the same site (href does not need the domain name)
E.g.
a href=”index.html”
“What is the internet?”
The internet is a global network of computers that are connected to each other. Every computer on the public Internet has an IP address
“How does the web work?”
- Your browser needs to know what a domain name means. A DNS (domain name system) lookup is performed to translate the domain name into an IP address.
- The browser then opens a TCP connection to the computer at the IP address.
- The browser then sends an HTTP request to the computer at the IP address.
- The browser receives a response from the computer at that IP address (originally this was an HTML document).
How do you indicate the relative link to a parent directory?
WIth ../
Example:
href=”../filename”
How do you indicate the relative link to a child directory?
With the folder name / file name
Example:
href=”foldername/filename”
How do you indicate the relative link to a grand parent directory?
You use a ,,/ for each directory you want to move up (grandparent is 2 directories above so 2 ../)
Example:
href=”../../filename”
How do you indicate the relative link to the same directory?
You can just link the file name.
Example:
href=”filename”
What is the purpose of an HTML form element?
The HTML form element houses the section of the HTML document that contains interactive controls for submitting information
Give five examples of form control elements.
Button
Input - the input type is noted in the type attribute
Select - used to create a dropdown selection element
option - used to provide options for the dropdown selection element
textarea - used to provide a block to input larger amounts of text in
Give three examples of type attribute values for HTML input elements.
Radio - circular select button
Checkbox
text
password - text input that hides the text
submit
file
image
Is an HTML input element a block element or an inline element?
It is an inline block element. Even though it puts information on the same line, because the height and width can be adjusted it gives it properties of a block element.
What are the six primary HTML elements for creating tables?
Table
thead
tr
th
tbody
td
What purpose do the thead and tbody elements serve?
The thead element is used to define the row of elements at the top of the table (essentially column names) whereas the tbody element is used to define the content of the table.
Give two examples of data that would lend itself well to being displayed in a table.
Students & Grades, Items & Pricing, Schedules, Information checkboxes
What are the names of the individual pieces of a CSS rule?
Start of a new CSS rule set:
[selector] { start of declaration block
property : value ;
} end of declaration block
In CSS, how do you select elements by their class attribute?
To select an element by their class attribute you preface the class name with a .
In CSS, how do you select elements by their tag name?
To select an element by its tag name you just use the tag name as the selector
In CSS, how do you select an element by its id attribute?
To select an element by their id attribute you preface the id name with a #
Name three different types of values you can use to specify colors in CSS.
Color Name - e.g. White, Black, Blue
Hex Code - e.g. #ffffff
RGB Value - e.g. rgb(255 255 255);
What CSS properties make up the box model?
The content (length and width)
Padding (space between content and border)
Border
Margin (space between border and other boxes)
Which CSS property pushes boxes away from each other?
The margin property
Which CSS property add space between a box’s content and its border?
The padding property
What is a pseudo-class?
A pseudo class is a keyword added to selector that specifies a special state of the selected element. Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors e.g. :hover (when element is hovered) :active (when the element is in use such as a click)
What are CSS pseudo-classes useful for?
CSS pseudo-classes are useful for providing feedback to the user (e.g. form elements [buttons active/inactive states] or hyperlinks [visited or not])
Name two types of units that can be used to adjust font-size in CSS.
Pixels (px), Ems (em), and percentages (%)
What CSS property controls the font used for the text inside an element?
Font-family property
What is the default flex-direction of a flex container?
The default flex-direction of a flex container is row
What is the default flex-wrap of a flex container?
The default flex-wrap of a flex container is no-wrap
Why do two div elements “vertically stack” on one another by default?
Divs are block elements which do not allow any other elements to be on the same line as them.
What is the default flex-direction of an element with display: flex?
The default flex-direction is row.
What is the default value for the position property of HTML elements?
The default value for position is static.
How does setting position: relative on an element affect document flow?
The document flow stays the same as the element still takes up the space it would normally occupy.
How does setting position: relative on an element affect where it appears on the page?
The element moves based on where it was supposed to be.
How does setting position: absolute on an element affect document flow?
Position absolute removes an element from normal document flow.
How does setting position: absolute on an element affect where it appears on the page?
The element will appear where it would normally but it may overlap or be overlapped by any elements that will go to occupy its space when it was removed from document flow.
How do you constrain an absolutely positioned element to a containing block?
You set the containing block to position relative.
What are the four box offset properties
Top, right, bottom, left
What is the purpose of variables?
Variables are used to store information for the computer to be able to reference back to. It brings permanence to data.
How do you declare a variable?
You declare a variable with the var keyword followed by the variable name. A variable can start with a letter, $, or _
var fullName
How do you initialize (assign a value to) a variable?
If a variable has not been declared yet, you use the variable keyword, the variable name, and then initialize the variable with the assignment operator =
var fullName = ‘Brandon Moy’;
What characters are allowed in variable names?
Lowercase letters, uppercase letters (camel case), numbers, $, and _
Variables cannot start with numbers
What does it mean to say that variable names are “case sensitive”?
It means that the capitalization must be consistent across the entire variable
var Score is different from var score
What is the purpose of a string?
A string it used to record a data type that lets us store any types of characters
e.g. ‘Hello World!’
What is the purpose of a number?
A data type number is recorded to recall a number value (can be used for calculations or incrementation)
var width = 10;
var height = 10;
What is the purpose of a boolean?
A boolean is used to define a value as true or false. It is used for decision making.
What does the = operator mean in JavaScript?
The = operator assigns the value on the right side to the variable on the left side
How do you update the value of a variable?
You can update a value of a variable by assigning it a new value further down the script
early: var fullName = ‘Brandon’;
later: fullName = ‘Brandon Moy’;
What is the difference between null and undefined?
Both are empty values but for different purposes. Null is a nonexistent or invalid object (cannot be used by JavaScript [can be used as a placeholder as null can ONLY be assigned]) whereas undefined is returned by JavaScript when there is no value assigned
Null - used by programmers to show empty
Undefined - JavaScript’s way to show empty
Why is it a good habit to include “labels” when you log values to the browser console?
Labels print information on the values being logged to the console for more ease of readability
Give five examples of JavaScript primitives.
String, Numbers, Boolean, Null, Undefined
What data type is returned by an arithmetic operation?
A number data type is returned by an arithmetic operation. If a string is put through an arithmetic operation JavaScript will print back NaN (not a number)
What is string concatenation?
String concatenation is when two or more strings are combined together to create a new string.
‘Hello’ + ‘ ‘ + ‘World!’ will return as ‘Hello World!’
What purpose(s) does the + plus operator serve in JavaScript?
The + operator can be used as arithmetic operator or string concatenator
What data type is returned by comparing two values (<, >, ===, etc)?
When comparing two values a boolean is returned for the value of the comparison
What does the += “plus-equals” operator do?
The += operator adds the new value to the starting variable and then assigns this new combined value back to the variable.
What are objects used for?
Objects are used to store multiple pieces of information into location without affecting other data and multiple pieces of information into one location to call back to.
What are object properties?
Object properties are just variables assigned to one object
var objectName = {
property: propertyValue
};
Describe object literal notation.
You use the variable keyword, the variable name, and you assign a grouping of properties to it inside of { }. Each property is notated property: value and a comma is used to separate the properties.
var objectName = {
property: value,
property2: value
};
How do you remove a property from an object?
delete operator is used to remove a property
delete object.property;
What are the two ways to get or update the value of a property?
Dot notation - object.property = newValue;
Square bracket - object[‘property’] = newValue;
What are arrays used for?
Arrays are used for storing a list of data. e.g. List of students, colors, hotels, cars
Describe array literal notation.
Square bracket with value separated by a comma
How are arrays different from “plain” objects?
Objects will assign a value to a property for the key value pair while an array assigns the value to an index number for the key value pair. Arrays have set orders and length properties.
What number represents the first index of an array?
The number for the first index of an array is 0 since computers start counting from 0
What is the length property of an array?
The length property of an array is a count of how many values are stored in the array.
How do you calculate the last index of an array?
You can subtract 1 from the length of the array.
What is a function in JavaScript?
A list of steps that can be reused multiple times in the code.
Describe the parts of a function definition.
The function keyword, the (optional) name of the function, the parameter list separated by commas and surrounded by parenthesis, the open curly brace for the function block, code within the code block, probably a return
Describe the parts of a function call.
The function name, 0 or more arguments surrounded by parenthesis
When comparing them side-by-side, what are the differences between a function call and a function definition?
The definition has { } for code block, function keyword
What is the difference between a parameter and an argument?
Parameter - used in definition, placeholder for a future value
Argument - used in function call, actually value provided
Why are function parameters useful?
Parameters allow us to create variance. They allow us to create ONE function for MULTIPLE uses
What two effects does a return statement have on the behavior of a function?
1) It allows the results to be used outside of the function
2) It stops the function
Why do we log things to the console?
We log things to the console so that developers can check and see the output and the state of variables and functions. The console is the developers way of communicating with JavaScript
What is a method?
A method is a reference to a function that is used as a property of an object. E.g. Math.max() is the max method OF the math object
How is a method different from any other function?
A method is called as a property of the object it is pulling the information off of.
How do you remove the last element from an array?
You use the .pop() method of the array object to remove the last element
How do you round a number down to the nearest integer?
You can use the .floor() method of the array object to round down to the nearest integer
How do you generate a random number?
The .random() method of the max object will generate a random number between 0 and 1 which can then be multiplied by the length of the array you want to generate randomly from
How do you delete an element from an array?
The .splice(start, quantity) can delete elements from an array
How do you append an element to an array?
You use the .push() method to append an element to an array
How do you break a string up into an array?
Use the .split() method with the argument string value ‘ ‘ to separate the string at the argument locations
Do string methods change the original string? How would you check if you weren’t sure
They do not change the original string. We can console.log() the original variable housing the string we change. Instead of changing the original string, string methods create a new string.
Roughly how many string methods are there according to the MDN Web docs?
50
Is the return value of a function or method useful in every situation?
It might not be useful in every situation so we as developers need to create situations where the functions or methods we create/use are useful
Roughly how many array methods are there according to the MDN Web docs?
A lot. . .
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
Give 6 examples of comparison operators.
> , <, >=, <=, ==, ===, !=. !==.
What data type do comparison expressions evaluate to?
Booleans
What is the purpose of an if statement?
If statements are used to create branching actions or decision making
Is else required in order to use an if statement?
Else is not required to use an if statement, but if the statement is false then the if statement will return undefined
Describe the syntax (structure) of an if statement.
If keyword, condition to check surrounded by parenthesis, curly brace to start code block for what to run if parameter is true, what to run if the parameter is true in the code block, closing curly brace
if (condition) {
statement
}
What are the three logical operators?
&& (and)
|| (or)
!(not)
How do you compare two different expressions in the same condition?
You can use || for or, or && for and between the two expressions but keep both of them within the same ( ) parameter
What is the purpose of a loop?
The purpose of a loop is to repeat an action
What is the purpose of a condition expression in a loop?
The condition expression in a loop allows JavaScript to know when the loop should be stopped
What does “iteration” mean in the context of loops?
An iteration is each time a loop is run. The first iteration would be the first time the loop is run and the last iteration is the final time a loop is run.
When does the condition expression of a while loop get evaluated?
The condition expression is evaluated before executing the statement in each iteration
When does the initialization expression of a for loop get evaluated?
The initialization expression of a for loop is evaluated once before the loop is begun
When does the condition expression of a for loop get evaluated?
The condition expression of a for loop gets evaluated before every iteration
When does the final expression of a for loop get evaluated?
The final expression of a for loops gets evaluated at the end of each iteration
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
The break keyword can exit a loop before the condition expression evaluates to false
What does the ++ increment operator do?
The ++ increment operator increases the value of the variable by 1
How do you iterate through the keys of an object?
You use a for … in loop and set a variable for the keys
What are the four components of “the Cascade”.
Source Order, Specificity, Inheritance, !Importance
What does the term “source order” mean with respect to CSS?
Source Order is the order the code is listed in the css file. The most recently added code is what is applied (the code lower on the css file)
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance will apply a style of an element to its children if there is no additional CSS rule for the same style added to the child
List the three selector types in order of increasing specificity.
Type - Class - ID
Why is using !important considered bad practice?
!important reverses the cascade order for style sheets. It forces a styling to an element.
What does the transform property do?
It allows you to move elements along the x, y, and z axes. You can rotate, skew, angle… elements
Give four examples of CSS transform functions.
rotate - spins an image clockwise (negative value for counter clockwise)
translate - moves an image horizontally and vertically
scale - resizes an image on a 2D plane (can also flatten/stretch images)
skew - resizes/shapes an element on a diagonal plane
matrix -
The transition property is shorthand for which four CSS properties?
transition-property, transition-duration, transition-timing-function, and transition-delay
Why do we log things to the console?
We log things as a console both to make sure that the main.js file is interacting with the html file and so that we as developers can test and track values (debugging)
What is a “model”?
A recreation of something (generally not 1:1 recreation)
Which “document” is being referred to in the phrase Document Object Model?
The HTML document
What is the word “object” referring to in the phrase Document Object Model?
The JavaScript object data type
What is the DOM?
A JavaScript object that is modeling the contents of an HTML document that is loaded into the browser
What is a DOM Tree?
The DOM tree is a list of objects/nodes that branch off of the document node. It is made up of the different elements, attributes, and text nodes in an HTML document. It is an element plus all of its content and all of its configurations.
