HTML Flashcards
Where do you put non-visible content about the HTML document?
head tag
Where do you put visible content about the HTML document?
body tag
Where do the head and body tags go in a valid HTML document?
html tag first
head tag second
body tag last
What is the purpose of a !DOCTYPE declaration?
Informs the web browser about the type and version of HTML used in building the web document.
Give five examples of HTML element tags.
doctype html head body span ul li p a
What is the purpose of HTML attributes?
Modifies the element type
Give an example of an HTML entity (escape character).
© ®
How do block-level elements affect the document flow?
It takes up 100% of the width of the block line, and starts a new line.
How do inline elements affect the document flow?
It takes up only the smallest space that an element needs, continues on the same line.
What are the default width and height of a block-level element?
100% width, height unchangeable
What are the default width and height of an inline element?
Width is determined by the element, height is unchangeable
What is the difference between an ordered list and an unordered list in HTML?
Ordered list has numbers for every li tag, unordered has bullet points, stars, etc.
Is an HTML list a block element or an inline element?
Block element
What HTML tag is used to link to another website?
<a>Anchor Tags</a> (Anchor tags)
What is an absolute URL?
URL that directs to an external site.
What is a relative URL?
URL that directs to a specific location inside a folder that is relative to the root you’re in.
How do you indicate the relative link to a parent directory?
the (../)
How do you indicate the relative link to a child directory?
calling the folder name, then the file inside the folder that you want to open
How do you indicate the relative link to a grand parent directory?
using (../../)
How do you indicate the relative link to the same directory?
If it’s in the same directory, you just need to call the name of the file.
What is the purpose of an HTML form element?
Collect information, and sending it back to the developer.
Give five examples of form control elements.
input label select textarea button legend
Give three examples of type attributes for HTML elements.
button checkbox radio text password file hidden submit
Is an HTML element a block element or an inline element?
inline element
What are the six primary HTML elements for creating tables?
table thead tbody td tr tfoot
What purpose do the thead and tbody elements serve?
screen readers
Give two examples of data that would lend itself well to being displayed in a table.
statistics organizing data table
What are the names of the individual pieces of a CSS rule?
CSS Selector, declaration block
In CSS, how do you select elements by their class attribute?
add a (.) before the class name
In CSS, how do you select elements by their type?
Calling the element name by itself
In CSS, how do you select an element by its id attribute?
add a (#) before the name
What CSS properties make up the box model?
Margin Border Padding
Which CSS property pushes boxes away from each other?
Margin
Which CSS property add space between a box’s content and its border?
Padding
Name three different types of values you can use to specify colors in CSS.
RGB, Hexcode, Color Names
What is a pseudo-class?
Selector that selects elements that are in a specific state eg hover, active, visited, etc.
What are CSS pseudo-classes useful for?
Add functional styles for the elements
What is the default flex-direction of a flex container?
row (horizontal)
What is the default flex-wrap of a flex container?
no-wrap (makes everything shrink and fit on one line)
Why do two div elements “vertically stack” on one another by default?
because of it having the property of display: block
which takes up the whole width and starts on a new line.
What is the default flex-direction of an element with display: flex?
flex-direction: row (horizontal)
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
relative does not affect the positioning of elements in normal flow unless you add offsets, but does cause those elements to be considered to be positioned.
How does setting position: relative on an element affect where it appears on the page?
any adjustments you do to it is relative to where it is on the page
How does setting position: absolute on an element affect document flow?
moves it from the document flow
How does setting position: absolute on an element affect where it appears on the page?
attaches to any parent without a static element
How do you constrain an absolutely positioned element to a containing block?
make it a non-static property
What are the four box offset properties?
top right bottom left
What is the purpose of variables?
Storing information for a value
How do you declare a variable?
var name
How do you initialize (assign a value to) a variable?
assignment operator (=)
What characters are allowed in variable names?
alphanumerical values $ -
What does it mean to say that variable names are “case sensitive”?
Capitalization and typos matter a lot fullname != fullName
What is the purpose of a string?
Storing text
What is the purpose of a number?
Storing numbers
What is the purpose of a boolean?
Storing true/false values
What does the = operator mean in JavaScript?
Assignment operator
How do you update the value of a variable?
Assign a new value to the same variable
What is the difference between null and undefined?
Null is an empty value, undefined is no value has been assigned
Why is it a good habit to include “labels” when you log values to the browser console?
Makes it easier to reference & debug.
Give five examples of JavaScript primitives.
numbers string boolean undefined null
What data type is returned by an arithmetic operation?
a number
What is string concatenation?
when 2 strings get added together ex: fullName=firstName + lastName;
What purpose(s) does the + plus operator serve in JavaScript?
concatenation, addition
What data type is returned by comparing two values (, ===, etc)?
boolean
What does the += “plus-equals” operator do?
sets the variable to whatever the sum is equal to when it is added by a value
What are objects used for?
Containers for named values properties and methods.
What are object properties?
values associated with the object (keys)
Describe object literal notation.
The Object literal notation is basically 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, just like a regular array.
How do you remove a property from an object?
delete operator
What are the two ways to get or update the value of a property?
dot notation & bracket notation
What are arrays used for?
lists of values like a grocery list
Describe array literal notation.
square brackets
How are arrays different from “plain” objects?
plain objects can’t contain more than one value
What number represents the first index of an array?
0
What is the length property of an array?
.length measures the length of the array
How do you calculate the last index of an array?
array.length - 1
What is a function in JavaScript?
a reusable command
Describe the parts of a function definition.
function keyword, the function name, the parameters, opening curly brace for the function code block, return statement, closing curly brace marking the end of code block
Describe the parts of a function call.
function name, the parentheses and parameters inside it, with a semicolon
When comparing them side-by-side, what are the differences between a function call and a function definition?
The function definition specifies the name, parameters and the code block instructions, whereas the function call just passes an argument to the function definition, and gets whatever is returned.
What is the difference between a parameter and an argument?
a parameter is a placeholder for the argument for a function. The argument is the actual data that is going to be used for the function.
Why are function parameters useful?
When a function is called, the parameters in its definition take on the values of the arguments that were passed.
What two effects does a return statement have on the behavior of a function?
return statement returns a value, and exits the function when it is called.
Why do we log things to the console?
debug and check code
What is a method?
a function of an object
How is a method different from any other function?
method exists as a property of an object
How do you remove the last element from an array?
pop method
How do you round a number down to the nearest integer?
round method
How do you generate a random number?
random method
How do you delete an element from an array?
splice [index, delete number]
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, use console.log
Roughly how many string methods are there according to the MDN Web docs?
mid 40s (dont have to memorize all)
Is the return value of a function or method useful in every situation?
No, because there are functions that modify things and there are those that return things
Roughly how many array methods are there according to the MDN Web docs?
more than 30, dont have to memorize all
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?
checking the expression and make a decision with the result
Is else required in order to use an if statement?
not required
Describe the syntax (structure) of an if statement.
if (condition) code block return else return
What are the three logical operators?
and or not
How do you compare two different expressions in the same condition?
logical or and logical and
What is the purpose of a loop?
to repeat a set of instructions however many times specified.
What is the purpose of a condition expression in a loop?
to check if the loop should keep going
What does “iteration” mean in the context of loops?
how many times the code ran
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?
before the loop begins
When does the condition expression of a for loop get evaluated?
after the initializer and right after incrementation
When does the final expression of a for loop get evaluated?
right after the loop finishes
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
What does the ++ increment operator do?
adds the value by 1 (i+=1)
How do you iterate through the keys of an object?
for in loop
Difference between i++ and ++i?
increments the value before they get substituted
What are the four components of “the Cascade”.
importance, origin, specificity, position
What does the term “source order” mean with respect to CSS?
the further down it goes in the css code, the more “important it is”
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritence
List the three selector types in order of increasing specificity.
type, class, id
Why is using !important considered bad practice?
makes it harder to debug
Why might you want to assign the return value of a DOM query to a variable?
to know the location of the variable in the document, so it’s easier to access them
What console method allows you to inspect the properties of a DOM element object?
dir method
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
you need to load your javascript dom after the document has been processed
What does document.querySelector() take as its argument and what does it return?
accepts css selectors, and returns the elements
What does document.querySelectorAll() take as its argument and what does it return?
it takes css selectors and returns NodeList
Why do we log things to the console?
test and debug your code
What is the purpose of events and event handling?
user input
What do [] square brackets mean in function and method syntax documentation?
it is optional
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener method
What is a callback function?
function that is being used as an argument in another function, and which we do not call
What object is passed into an event listener callback when the event fires?
the event object
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
its a reference to where the object is being invoked. the debugger. the mdn
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
the event listener will call it when there are parantheses are inserted. When parantheses aren’t there, it doesn’t get called automatically.
Is the event parameter of an event listener callback always useful?
not always, but generally it is good practice
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
it’d be harder
Why is storing information about a program in variables better than only storing it in the DOM?
cannot depend on the dom, so storing it on a variable makes it easier to find
What does the transform property do?
it modifies the coordinate space which lets you rotate, scale, skew or translate an element
Give four examples of CSS transform functions.
translate scale rotate skew matrix
What is the className property of element objects?
it lets you modify/replace the className on an existing html file on javascript
How do you update the CSS class attribute of an element using JavaScript?
you put the class location into a variable via getQuery and then use the className property
What is the textContent property of element objects?
it allows you to modify the text content inside an element