HTML Flashcards
Where do you put non-visible content about the HTML document?
In the “head” element.
Where do you put visible content about the HTML document?
In the “body” element.
Where do the <head> and <body> tags go in a valid HTML document?
Within the “html” element as siblings.
What is the purpose of a <!DOCTYPE> declaration?
Instruction to the web browser about what version of HTML the page is written in. Ensures the web page is parsed the same way by different web browsers.
What is the purpose of the HTML attributes?
To provide additional information about HTML elements.
name=”value”
ex. HTML element types
ex. HTML entity(escape character)
” <head>, <title>, <body>, <h1>, <p>, <html> "</title>
< (<), ® (Ⓡ), & (&), " (“), &apos (‘) **
**followed by semicolon
How do block-level elements affect the document flow?
default value for height and width
They stack, block-level elements start on a new line.
Block-level element occupies the entire horizontal space of its parent element(container), and vertical space equal to the height of its contents.
height - auto
How do inline elements affect the document flow?
default value for height and width
Only occupy the space bounded by the tags defining the element.
Do NOT force a new line to begin in the document flow.
height and width - auto
Is an HTML list a block or an inline element?
Difference between an ordered list and unordered list.
HTML lists are block elements.
Ordered lists are used to create a list of related items, in a specific order. (Ascending numerical order)
Unordered lists are used to create a list of related items, in no particular order. (Bullet points)
What HTML tag is used to link to another website?
Absolute URL vs Relative URL
The anchor tag (<a>) is used to link to another website.</a>
Absolute - contains the whole URL address, including protocol (http/https), the optional subdomain (www.), domain (google.com), and path (directory and slug)
Relative - contains a URL that only includes the path (directory and slug). Path is everything after the domain.
How do you indicate the relative link to the same directory?
a parent directory?
a child directory?
a grand parent directory?
File name or .
../ + file name
Name of child folder + file name
../../ + file name
What is the purpose of an HTML form element?
Give five examples of form control elements.
Boundary of the form element and used to collect user input
input, label, select, textarea, button, fieldset
Is an HTML <input></input> element a block element or an inline element?
Give three examples of type attribute values for HTML <input></input> elements.
inline
type, name, value
What are the six primary HTML elements for creating tables?
tr, td, th, thead, tbody, table, tfoot
What purpose do the thead and tbody elements serve?
thead refers to the head of the table
tbody refers to the body of the table
Structural purpose
Give two examples of data that would lend itself well to being displayed in a table.
Financial reports, tv schedules, sports results
What are the names of the individual pieces of a CSS rule?
selector & declaration > declaration block > property & value
In CSS, how do you select elements by their class attribute?
. (dot)
In CSS, how do you select elements by their tag name?
element name
In CSS, how do you select an element by its id attribute?
(octothorpe) #
Name three different types of values you can use to specify colors in CSS.
color name, hex code, rgb value
What CSS properties make up the box model?
width, height, padding, border, margin
Which CSS property pushes boxes away from each other?
Which CSS property add space between a box’s content and its border?
margin
padding
What is a pseudo-class?
keyword added to a selector that specifies a special state of the selected element
selector that selects elements that are in a specific state,
What are CSS pseudo-classes useful for?
to Highlight User’s Position and specify a special state of the selected element(s)
Name two types of units that can be used to adjust font-size in CSS.
pixels, percentages, ems
What CSS property controls the font used for the text inside an element?
font- family
What is the default flex-direction of a flex container?
row
What is the default flex-wrap of a flex container?
nowrap
Why do two div elements “vertically stack” on one another by default?
div is a block element
What is the default flex-direction of an element with display: flex?
row
What are the three primary components of a page layout? (Which helper classes do you need?)
container, row, column
What is the minimum number of columns that you should put in a row?
1
What is the purpose of a container?
to confine all the content within a boundary
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
How does setting position: relative on an element affect where it appears on the page?
element positioned according to the normal flow
moves according to its original position as if it was static
How does setting position: absolute on an element affect document flow?
How does setting position: absolute on an element affect where it appears on the page?
element is removed from the normal flow
the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).
How do you constrain an absolutely positioned element to a containing block?
the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).
What are the four box offset properties?
top right bottom left
What is the purpose of variables?
How do you declare a variable?
How do you initialize (assign a value to) a variable?
store data, so you can reuse
name in camelCase
assign with assignment operator ‘=’ (variable name = variable value)
What characters are allowed in variable names?
What does it mean to say that variable names are “case sensitive”?
letters, $, or underscore (‘_’)
variables can be the same name but have a different titleCase and have a different value
What is the purpose of a string?
What is the purpose of a number?
What is the purpose of a boolean?
to store text
to store numbers, used for math
used for conditionals, two values, true or false
What does the = operator mean in JavaScript?
assignment, assigning data to variable
How do you update the value of a variable?
variable name, assignment operator, and new variable value
What is the difference between null and undefined?
null signifies a purposeful emptiness, undefined is accidental emptiness.
undefined can be created by JavaScript while null cannot
Why is it a good habit to include “labels” when you log values to the browser console?
to make it more clear or obvious what value is being logged
Give five examples of JavaScript primitives.
string, number, boolean, null, undefined
What data type is returned by an arithmetic operation?
numbers
What is string concatenation?
add two or more strings together to join each other
What purpose(s) does the + plus operator serve in JavaScript?
addition , string concatenation
What data type is returned by comparing two values (<, >, ===, etc)?
boolean
What does the += “plus-equals” operator do?
add left and right value and sets result of expression to the left
The addition assignment operator (+=) adds the value of the right operand to a variable and assigns the result to the variable.
What are objects used for?
What are object properties?
group together a set of variables and functions that are related to each other
variables with key value pairs
Describe object literal notation.
(var keyword) variable name {
key:value, key:value
}
How do you remove a property from an object?
delete “object.property”
What are the two ways to get or update the value of a property?
dot notation or bracket notation
What are arrays used for?
Describe array literal notation.
storing a list or set of values that are related to each other (order important or not important)
var keyword (variable name) = [value, value]
value = string , number, boolean
How are arrays different from “plain” objects?
array has similar data type , always has a length property
What number represents the first index of an array?
0
What is the length property of an array?
number of items in an array
How do you calculate the last index of an array?
.length property - 1
What is a function in JavaScript?
a set of statements that performs a task or calculates a value
should take some input and return an output where there is some obvious relationship between the input and output.
Describe the parts of a function definition.
Describe the parts of a function call.
function keyword function name(0+ parameter, parameter) {
optional return statement
}
function name(0+ argument, argument)
When comparing them side-by-side, what are the differences between a function call and a function definition?
function call doesn’t use the function keyword and has no code block, just the function name and/if any arguments
What is the difference between a parameter and an argument?
Why are function parameters useful?
functions definitions use parameters and function calls use arguments
placeholder variable, so u can use w/ function calls and have a variable that can be reused
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
- Prevents any more code in the function’s code block from being run.
Why do we log things to the console?
debugging and verifying values
What is a method?
function within an object
How is a method different from any other function?
method starts with a .(dot) and an object before it
How do you remove the last element from an array?
pop method
How do you round a number down to the nearest integer?
floor method of math object
How do you generate a random number?
random method of math object
How do you delete an element from an array?
splice , pop, shift
How do you append an element to an array?
push method
How do you break a string up into an array?
split method
Do string methods change the original string? How would you check if you weren’t sure?
no, strings are immutable. console.log and check
Is the return value of a function or method useful in every situation?
no. (ex. console.log, pop, push)
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?
boolean
What is the purpose of an if statement?
to run a set of code based on a specified condition
ex. The IF statement executes one set of code if a specified condition is met (TRUE) or another set of code evaluates to FALSE.
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
if keyword (condition) {
code
}
What are the three logical operators?
&&(and), ||(or), !(not)
How do you compare two different expressions in the same condition?
&& (logical and) || (logical or)
What is the purpose of a loop?
What is the purpose of a condition expression in a loop?
allows you to repeat a process over and over without having to write the same code each time
expressing that is tested each time the loop repeats, as long as condition is true, the loops keeps running, purpose is to stop the loop
What does “iteration” mean in the context of loops?
Each single pass through the sequence to complete all the steps in the given order
When does the condition expression of a while loop get evaluated?
before executing the statement
When does the initialization expression of a for loop get evaluated?
its executed once, as the loop begins
When does the condition expression of a for loop get evaluated?
each time before the loop runs (each iteration)
When does the final expression of a for loop get evaluated?
at the end of each loop (iteration) and is used to increment or decrement a value
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
<br></br> (break)
What does the ++ increment operator do?
increase value by 1
How do you iterate through the keys of an object?
for in loop
What are the four components of “the Cascade”.
inheritance, specificity, !important, source order
What does the term “source order” mean with respect to CSS?
strength of css rule sheet, things lower are ‘stronger’
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance
List the three selector types in order of increasing specificity.
id, class, type
Why is using !important considered bad practice?
very high specificity, hard to override
