HTML Flashcards
Where do you put non-visible content about the HTML document?
In the Head tag
Where do you put visible content about the HTML document?
Body tag
Where do the and tags go in a valid HTML document?
Inbetween and
What is the purpose of a declaration?
State the kind of document it is
Give five examples of HTML element tags.
h1 p br body h2
What is the purpose of HTML attributes?
To define actions and parameters with in the elements.
Give an example of an HTML entity (escape character).
& is used to create an ampersand.
How do block-level elements affect the document flow?
Create sections for different content vertically
How do inline elements affect the document flow?
Create sections for different content horizontally
What are the default width and height of a block-level element?
Default width is the view port. Default height is bound by the above and below block.
What are the default width and height of an inline element?
Width is bound my the neighboring inline elements. Height is defined by the space it content takes.
What is the difference between an ordered list and an unordered list in HTML?
Number and bullet points
Is an HTML list a block element or an inline element?
Block. It creates a space that is effected by element below and above.
How do you indicate the relative link to a parent directory?
parent_dir/file.html
How do you indicate the relative link to a child directory?
/child_dir
How do you indicate the relative link to a grand parent directory?
../dir/file.html
What is the purpose of an HTML form element?
“Input!”
-Number 5 from Shortcircuit
Give five examples of form control elements.
Form, input, select, textarea, button
Give three examples of type attributes for HTML elements.
phone, text. email
Is an HTML element a block element or an inline element?
Inline, because it operates in horizontal space
What are the six primary HTML elements for creating tables?
thead, td, tr, tbody, th, tfoot
What purpose do the thead and tbody elements serve?
thead designates the top of the row for titles.
tbody contains all the data, rows, etc. of table
Give two examples of data that would lend itself well to being displayed in a table.
Financial information.
A restaurant menu.
Name three different types of values you can use to specify colors in CSS.
Names, rbg, hex
What are the names of the individual pieces of a CSS rule?
Selector, property, value
In CSS, how do you select elements by their class attribute?
Placing a period . in front of the selector
In CSS, how do you select elements by their type?
Naming the element
In CSS, how do you select an element by its id attribute?
Placing a # in front of the selector word.
What CSS properties make up the box model?
Margin, padding, border
Which CSS property pushes boxes away from each other?
Margin
Which CSS property add space between a box’s content and its border?
Padding
What is a pseudo-class?
An effect or state that can be added by the browser onto any html element with a colon :
What are CSS pseudo-classes useful for?
Creating an effect or state for an html element when the user gives some kind of input
Name at least two units of type size in CSS.
point and pixels
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?
Horizontally
What is the default flex-wrap of a flex container?
nowrap
Why do two div elements “vertically stack” on one another by default?
They are a block element.
What is the default flex-direction of an element with display: flex?
Horizontally
What is the default value for the position property of HTML elements?
Horizontally
How does setting position: relative on an element affect document flow?
Everything moves around it but it moves.
How does setting position: relative on an element affect where it appears on the page?
It doesn’t. It just floats where ever it boundaries are or relative to the edge of the view port.
How does setting position: absolute on an element affect document flow?
Everything moves around it.
How does setting position: absolute on an element affect where it appears on the page?
It sits where ever css sets it.
How do you constrain an absolutely positioned element to a containing block?
Set the block to position: relative and it will with in those boundaries
What are the four box offset properties?
Relative, fixed, absolute, static.
What is the purpose of variables?
Storing values
How do you declare a variable?
var varName;
How do you initialize (assign a value to) a variable?
var varName = ‘some val’;
What characters are allowed in variable names?
A-Z, a-z, _, &, numbers (not for first character)
What does it mean to say that variable names are “case sensitive”?
A-Z is different from a-z
What is the purpose of a string?
Store array of chars
What is the purpose of a number?
Math!
What is the purpose of a boolean?
true and false values
What does the = operator mean in JavaScript?
Assignment operator
How do you update the value of a variable?
Reassign it
What is the difference between null and undefined?
the former is assign to nothing, the later is not assigned
Why is it a good habit to include “labels” when you log values to the browser console?
Know what the code is doing. Its the only way,
Give five examples of JavaScript primitives.
String, numbers, bool, null, undefined
What data type is returned by an arithmetic operation?
A number
What is string concatenation?
joining strings
What purpose(s) does the + plus operator serve in JavaScript?
Addition and concatenation
What data type is returned by comparing two values (, ===, etc)?
bool
What does the += “plus-equals” operator do?
Adds existing var value to another value
What are objects used for?
Storing data
What are object properties?
Item contained by object
Describe object literal notation.
{}
How do you remove a property from an object?
delete someObj.someProp
What are the two ways to get or update the value of a property?
someObj.someProp
someObj[‘someProp’]
What are arrays used for?
Storing data that has no property
Describe array literal notation.
[]
How are arrays different from “plain” objects?
They have no properties corresponding to values
What number represents the first index of an array?
0
What is the length property of an array?
Returns how many items are in array
How do you calculate the last index of an array?
someArr.length - 1
What is a function in JavaScript?
Repeatable set of instrucitons
Describe the parts of a function definition.
func key word, name, parameters, code block, return statement
Describe the parts of a function call.
Name, arguments.
When comparing them side-by-side, what are the differences between a function call and a function definition?
Making the code, recalling the made code to do something
What is the difference between a parameter and an argument?
Param: template to follow in call, Arg: data put into a call
Why are function parameters useful?
Setting out the kind of data that will go into the called function
Why do we log things to the console?
See what is happening in the code
What is a method?
Built in function callable on appropriate variables
How is a method different from any other function?
Its built in
How do you remove the last element from an array?
.pop
How do you round a number down to the nearest integer?
.floor
How do you generate a random number?
Math.random()
How do you delete an element from an array?
delete arr.someitem
How do you append an element to an array?
arr.push(someItem)
How do you break a string up into an array?
string.split(‘ ‘);
Do string methods change the original string? How would you check if you weren’t sure?
Yes. Console log the string
Roughly how many string methods are there according to the MDN Web docs?
30ish
Is the return value of a function or method useful in every situation?
No
Roughly how many array methods are there according to the MDN Web docs?
30ish
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?
bool
What is the purpose of an if statement?
Making decisions
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
if(){
}
What are the three logical operators?
&& || !
How do you compare two different expressions in the same condition?
How do you compare two different expressions in the same condition?
What is the purpose of a loop?
Repeating work
What is the purpose of a condition expression in a loop?
See how the loop is repeated
What does “iteration” mean in the context of loops?
The number that counts up to keep track of the loops progress.
When does the condition expression of a while loop get evaluated?
the start
When does the initialization expression of a for loop get evaluated?
var i = 0;
When does the condition expression of a for loop get evaluated?
;i < someVal
When does the final expression of a for loop get evaluated?
;i++)
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?
counts up by 1
How do you iterate through the keys of an object?
forEach?
What are the four components of “the Cascade”.
Find all declarations whose selectors match a particular element.
Sort these declarations by weight and origin.
Sort the selectors by specificity.
Sort by order specified.
What does the term “source order” mean with respect to CSS?
Elements lower in the casade will take priority
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.
element selectors, class selectors, id selectors
Why is using !important considered bad practice?
CSS blocks will be difficult to use on other pieces of code.
Why do we log things to the console?
To know what is happening in the code
What is a “model”?
Simplified representation
Which “document” is being referred to in the phrase Document Object Model?
document variable
What is the word “object” referring to in the phrase Document Object Model?
Nodes on the tree
What is a DOM Tree?
Nodes under the document, like <h1> so forth</h1>
Give two examples of document methods that retrieve a single element from the DOM.
.getByID .getByClassSelecotor
Give one example of a document method that retrieves multiple elements from the DOM at once.
querySelectorAll()
Why might you want to assign the return value of a DOM query to a variable?
To access properties later
What console method allows you to inspect the properties of a DOM element object?
console.dir()
Why would a tag need to be placed at the bottom of the HTML content instead of at the top?
To load HTML first
What does document.querySelector() take as its argument and what does it return?
Gets first instance of selector. returns everything between the tags
What does document.querySelectorAll() take as its argument and what does it return?
Gets all elements matching args, returns everything between the tags
Why do we log things to the console?
To know what is going on in the code
What is the purpose of events and event handling?
Make changes dymanically
Are all possible parameters required to use a JavaScript method or function?
No, some are optionsal
What method of element objects lets you set up a function to be called when a specific type of event occurs?
event handleers?
What is a callback function?
Function that happens after an event handler
What object is passed into an event listener callback when the event fires?
event object
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
console.log
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
The first is loading it to be called on the event
The second one is calling the function right ways
What is the className property of element objects?
Renaming class name after selected by querySelector
How do you update the CSS class attribute of an element using JavaScript?
reassign it with className
What is the textContent property of element objects?
Change all the text of an element
