HTML Flashcards
Where do you put non-visible content about the HTML document?
head
Where do you put visible content about the HTML document?
body
Where do the head and body tags go in a valid HTML document?
html
What is the purpose of a declaration?
The declaration tells the web browser what html version the document is written in.
Give 5 examples of HTML element tags.
- head
- body
- img
- div
- p
What is the purpose of HTML attributes?
to give each element its own additional/unique information
Give an example of an HTML entity (escape character)
copyright, trademark
How do block-level elements affect the document flow?
block-level elements take up the whole line
How do inline elements affect the document flow?
inline elements only take up space they only need
What are the default width and height of a block-level element?
width is 100% of the viewport and height is the height of the content
What are the default width and height of an inline element?
width is width of the content and height is also the height of the content
What is the difference between an ordered list and an unordered list in HTML?
ordered lists with numbers while unordered lists with dots
Is an HTML list a block element or an inline element?
block
What HTML tag is used to link to another website?
anchor tag
What is an absolute URL?
points to an external application / location
What is a relative URL?
relative URLs’ path generally refers to a resource on the same machine as the current document.
How do you indicate the relative link to a parent directory?
../
How do you indicate the relative link to a child directory?
/
How do you indicate the relative link to a grand parent directory?
../../
How do you indicate the relative link to the same directory?
the file name
What is the purpose of an HTML form element?
it represents a document section containing interactive controls for submitting information
Give 5 examples of form control elements.
input, label, select, button, textarea
Give 3 examples of type attributes for HTML input elements
text, radio, checkbox
Is an HTML input element a block element or an inline element?
inline
What are the six primary HTML elements for creating tables?
table, thead, tbody, tr, th, td
What purpose do the thead and tbody elements serve?
help distinguish between the main content and the first / last rows
Give 2 examples of data that would lend itself well to being displayed in a table.
- Academic grades
2. Restaurant customers
What are the names of the individual pieces of a CSS rule?
selector, declaration, property, value
In CSS, how do you select elements by their class attribute?
.
In CSS, how do you select elements by their type?
element name
In CSS, how do you select an element by its id attribute?
#
Name three different types of values you can use to specify colors in CSS.
color keywords, rgb color values, hexadecimal color values
What CSS properties make up the box model?
content (width, height), padding, border, margin
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?
class that allows you to change the appearance of elements when a user is interacting with them.
What are CSS pseudo-classes useful for?
event based styling
Name at least two units of type size in CSS
pixels, rem
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?
row
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 block level 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?
static
How does setting position: relative on an element affect document flow?
It doesn’t
How does setting position: relative on an element affect where it appears on the page?
relative positioning moves an element in relation to where it would have been in normal flow.
How does setting position: absolute on an element affect document flow?
It is removed from the document flow entirely (They don’t exists)
any sibling elements will shift to the empty space
How does setting position: absolute on an element affect where it appears on the page?
gets positioned within the nearest non-static ancestor element
How do you constrain an absolute positioned element to a containing block?
you can set the parent element’s position to relative.
What are the four box offset properties?
top, bottom, left, right
What is the purpose of variables?
they are used to store information to be referenced and manipulated
How do you declare a variable
variable keyword: var, let, const
How do you initialize (assign a value to) a variable?
=
What characters are allowed in variable names?
letter, $, _, numbers (but not in the beginning)
What does it mean to say that variable names are “case sensitive”?
variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
i.e. data does not equal Data
What is the purpose of a string?
storing and manipulating text
What is the purpose of a number?
math
What is the purpose of a boolean?
comparison (making decisions)
What does the = operator mean in JavaScript?
assignment
how do you update the value of a variable?
variable name and then an “=” with the new value.
What is the difference between null and undefined?
null means “no value” whereas undefined means that “the variable has not been declared, or has not been given a value”
Why is it a good habit to include “labels” when you log values to the browser console?∫
so we know the context of that value
Give five examples of JavaScript primitives.
number, string, boolean, null, undefined
What data type is returned by an arithmetic operation?
number
What is string concatenation?
putting strings together
What purpose(s) does the + plus operator serve in JavaScript?
concatenation
What data type is returned by comparing two values?
boolean
What does the += operator do?
you add the value of the variable to the value and reassign that value to the variable.
What are objects used for?
storing property and values
What are object properties?
a simple association between name and value
Describe object literal notation.
var student = {
}
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?
it is used to store different elements, often when we want to store list of elements and access them by a single variable
Describe array literal notation.
var myArray = [ ] ;
How are arrays different from “plain” objects?
ordered (indexed), have a .length property
What number represents the first index of an array?
0
What is the length property of an array?
.length: returns the amount of elements in the array
How do you calculate the last index of an array?
myArray[myArray.length - 1]
What is a function in JavaScript?
set of statements that performs a task or calculates a value
Describe the parts of a function definition.
function keyword, parameters, function code block
Describe the parts of a function call.
functionName(parameter);
When comparing them side-by-side, what are the differences between a function call and a function definition?
parameters vs arguments, no function keyword, no codeblock
Why are function parameters useful?
you can reuse the function for any other relevant situation