HTML Flashcards
Where do you put non-visible content about the HTML document?
Within the head element
Where do you put visible content about the HTML document?
Within the body element
Where do the head and body tags go in a valid HTML document?
Within the html element
What is the purpose of a ! DOCTYPE declaration?
To inform the web browser about what version of html the page is written in
Give five examples of HTML element tags.
div h1 p img article
What is the purpose of HTML attributes?
To add details/extra info to elements
Give an example of an HTML entity (Escape character)
& = & a m p ; < = & l t ; > = & g t ;
How do block-level elements affect the document flow?
It creates a line break.
How do inline elements affect the document flow?
It stays within the same line if possible and only takes as much space as needed.
What are the default width and height of a block-level element?
width: 100%
height: auto
What are the default width and height of an inline element?
width: auto
height: auto
What is the difference between an ordered list and an unordered list in HTML?
An ordered list is numbered.
An un ordered list has bullet points.
Is an HTML list a block element or an inline element?
Block element
What HTML tag is used to link to another website?
Anchor tag (tag for anchor element) <a href=""></a>
What is an absolute URL?
Complete web address starting with domain name (must include https://)
What is a relative URL?
Shorthand address linking parts/pages within the same website (omits domain name)
How do you indicate the relative link to a parent directory?
../filename
How do you indicate the relative links to a child directory?
directory/filename
How do you indicate the relative link to a grand parent directory?
../../filename
How do you indicate the relative link to the same directory?
its own filename
or
#id within same page
What is the purpose of an HTML form element?
Form element sets boundary /enclosure for form control elements
Give five examples of form control elements.
input select option textarea button
Give three examples of type attributes for HTML elements.
text
password
radio
checkbox
Is an HTML element a block element or an inline element?
Inline element
In CSS, how do you select elements by their class attribute?
.class {
}
In CSS, how do you select elements by their type?
element {
}
In CSS, how do you select an element by its id attribute?
#id {
}Name three different types of values you can use to specify colors in CSS.
hex code
rgb/rgba
color name
hsl/hsla
What CSS properties make up the box model?
Border
Margin
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
What is a pseudo-class?
A keyword/class added to a selector after : to specify a special state of the selected element to which the rule set will be applied.
What are CSS pseudo-classes useful for?
Creating an interactive website
Name at least two units of type size in CSS.
px
em
rem
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 (from left to right)
What is the default flex-wrap of a flex container?
Nowrap (same line)
Why do two div elements “vertically stack” on one another by default?
Because they are block elements.
What is the default flex-direction of an element with display: flex?
Row
What is the default value for the position property of HTML elements?
position: static;
How does setting position: relative; on an element affect document flow?
No change
How does setting position: relative; on an element affect where it appears on the page?
It changes location in relation to normal location of static position.
How does setting position: absolute; on an element affect document flow?
The element is removed from the document flow entirely.
How does setting position: absolute; on an element affect where it appears on the page?
It changes location in relation to its containing element with disregard to other sibling elements.
How do you constrain an absolutely positioned element to a containing block?
Set the containing block to
position: relative; or absolute; (non-static)
What are the four box offset properties?
top
bottom
left
right
What is the purpose of variables?
To store data, which can be accessed later and inserted in functions .
How do you declare a variable?
Use ‘var’, ‘let’, or ‘const’ + variable name
Different scoping
How do you initialize (assign a value to) a variable?
= value
What characters are allowed in variable names?
Dollar sign, underscore, numbers, and letters. (Cannot start with a number.)
What does it mean to say that variable names are “case sensitive”?
Names in different cases are considered as different variables.
What is the purpose of a string?
To assign text-content data / series of characters; naming and assigning significance
What is the purpose of a number?
To assign a number-type value; calculations
What is the purpose of a boolean?
To assign a value of true/false. Its purpose is to make a decision.
What does the = operator mean in JavaScript?
Value is assigned to
How do you update the value of a variable?
Reassign the variable / update the value of the variable by using an equal sign without declaration keywords such as ‘var’
What is the difference between null and undefined?
Null is an object type data. (Must be assigned. Intentional.)
Undefined is an undefined type data. (When a variable is declared but no value is assigned. Usually by mistake.)
Why is it a good habit to include “labels” when you log values to the browser console?
To clarify what the values are for, since console.log only shows values unless labeled.
Give five examples of JavaScript primitives.
String Number Boolean Undefined Null
What data type is returned by an arithmetic operation?
Number which is the result of a calculation
What is string concatenation?
To combine multiple strings.
What purpose(s) does the + plus operator serve in JavaScript?
It combines strings.
It also adds numbers.
What data type is returned by comparing two values (, ===, etc)?
Boolean
What does the += “plus-equals” operator do?
x += y returns x = x + y
What are objects used for?
To create a collection of things
What are object properties?
Individual pieces of data stored within an object
Describe object literal notation.
Variable key = {
property: value;
}
How do you remove a property from an object?
Use the operator delete followed by a dot notation
What are the two ways to get or update the value of a property?
dot notation
or
bracket notation
What are arrays used for?
To list out multiple values, usually similar data
Describe array literal notation.
Square brackets:
variable = [ ] ;
How are arrays different from “plain” objects?
Numbered index
To add a value to an array:
arrayName.push(objectName)
What number represents the first index of an array?
0
What is the length property of an array?
arrayName.length
How do you calculate the last index of an array?
arrayName.length - 1
What is a function in JavaScript?
A special type of object that can be called. Its function is to re-use the codes.
Describe the parts of a function definition.
Function keyword, Function name (optional), Parameter (can be empty), Code block, Return statement (optional).
Describe the parts of a function call.
Function name,
Parenthesis containing optional arguments.
When comparing them side-by-side, what are the differences between a function call and a function definition?
Call runs the code, using actual values.
Definition defines the code, using a code block.
What is the difference between a parameter and an argument?
Function parameters are the names listed in the function’s definition. Function arguments are the real values passed to the function.
Why are function parameters useful?
To push additional data into the same function
What two effects does a return statement have on the behavior of a function?
(1) Produces a value where the function is called.
(2) Stops and exits the function.
Why do we log things to the console?
To inspect codes / For debugging purposes.
It is a method for developers to write code to inconspicuously inform the developers what the code is doing.
What is a method?
Function stored within a property of an object
How is a method different from any other function?
It requires an object
How do you remove the last element from an array?
object.pop()
How do you round a number down to the nearest integer?
Math.floor()
How do you generate a random number?
Math.floor(Math.random() * range)
Ex:
function getRandomNumberInRange(start, end) {
var randomNum = Math.floor(Math.random() * (end-start) + 1 ) + start;
return randomNum;
}
How do you delete an element from an array?
array.splice(index)
How do you append an element to an array?
To add to end of array:
array.push()
To add to start of array:
array.unshift()
How do you break a string up into an array?
array.split(‘breakpoint’)
Do string methods change the original string? How would you check if you weren’t sure?
No, strings are immutable.
You can check by console.log().
Roughly how many string methods are there according to the MDN Web docs?
100
Is the return value of a function or method useful in every situation?
Not all the time.
Roughly how many array methods are there according to the MDN Web docs?
100
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 execute a function depending on a condition
Is else required in order to use an if statement?
No, it’s optional
Describe the syntax (structure) of an if statement.
if (condition) {
function
};What are the three logical operators?
|| (OR), && (AND), ! (NOT).
How do you compare two different expressions in the same condition?
Use a logical operator and put parenthesis around each condition.
What is the purpose of a condition expression in a loop?
To see if the code is permitted to run.
What does “iteration” mean in the context of loops?
Single time that code block within declaration runs.
When does the condition expression of a while loop get evaluated?
Before each iteration
When does the initialization expression of a for loop get evaluated?
Before anything
When does the final expression of a for loop get evaluated?
Right after every time code is run.
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?
Add 1
How do you iterate through the keys of an object?
For…In Loop
What are the four components of “the Cascade”.
Source Order
Inheritance
Specificity
!Important Rule
What does the term “source order” mean with respect to CSS?
The order CSS rules are written in a stylesheet. The styling provided for an element last in your stylesheet is the styling that will ultimately take effect.
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.
Type Selector
Class Selector
ID Selector
Why is using !important considered bad practice?
It hinders debugging by breaking the natural cascading in CSS stylesheet.
Why do we log things to the console?
To check the values of variables.
What is a “model”?
Representation or Re-creation of an actual thing.
Which “document” is being referred to in the phrase Document Object Model?
html document
What is the word “object” referring to in the phrase Document Object Model?
JavaScript object
What is a DOM Tree?
The Document Object Model is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree.
Give two examples of document methods that retrieve a single element from the DOM.
document. getElementByID();
document. querySelector();
Give one example of a document method that retrieves multiple elements from the DOM at once.
document.querySelectorAll();
Why might you want to assign the return value of a DOM query to a variable?
So that we can re-use the variable to locate the desired object.
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?
When you place your JavaScript at the bottom of your HTML body, it gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time.
What does document.querySelector() take as its argument and what does it return?
CSS selector(s). It returns the first element with matching selector(s).
What does document.querySelectorAll() take as its argument and what does it return?
CSS selector(s). It returns all elements with matching selector(s).
Why do we log things to the console?
To check functions are running without errors. To check values.
What is the purpose of events and event handling?
To respond to certain events, for organic interactions and dynamic features.
Are all possible parameters required to use a JavaScript method or function?
No.
What is a callback function?
Function getting passed around as a value to other places.
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.dir(event.target);
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
event.target is the element where the event occurs.
console.log & console.dir(event.target);
MDN;
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
If there is a parenthesis, function is being called when page loads, instead of when the event happens.
What is the className property of element objects?
Used either to retrieve current value of, or assign a new value (update) of, the class name of an element.
