Web Development Deck 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 element tags go in a valid HTML document?
In between the html element
What is the purpose of a !DOCTYPE declaration?
It lets the web browser know what version of HTML it is running
Give five examples of HTML element types.
- head
- body
- p
- img
- html
What is the purpose of HTML attributes?
HTML attributes provide additional information about the contents of an element
Give an example of an HTML entity (escape character).
© - copyright
How do block-level elements affect the document flow?
They are structural markups that always starts on a new line. Any content on the left or right side gets pushed up or down
How do inline elements affect the document flow?
They are semantic markups that provide extra information and does not disrupt the document flow
What are the default width and height of a block-level element?
The height is dictated by the content and the width takes up 100% of is parent container
What are the default width and height of an inline element?
Width and height are dictated by its content
What is the difference between an ordered list and an unordered list in HTML?
An ordered list uses numbers to indicate a list of steps, but an unordered list uses bullet points to display a list
Is an HTML list a block element or an inline element?
Block element
What HTML tag is used to link to another website?
An a tag with attribute href=”(website URL)”
What is an absolute URL?
The full web address used when linking to a different website
What is a relative URL?
a shorthand used when linking to another page within the same site
How do you indicate the relative link to parent directory?
../
How do you indicate the relative link to a child directory?
directory name and file name
How do you indicate the relative link to a grand parent directory?
../../
How do you indicate the relative link to the same directory?
Just the file name
What is the purpose of an HTML form element?
HTML forms gives you a set of elements to collect data from your users
Give five examples of form control elements.
textarea, option, select, button, label
Give three examples of type attributes values for HTML input elements.
text, radio, checkbox
Is an HTML input element a block element or inline element?
It is neither
What are the primary HTML elements for creating tables?
table, tr, td, th, thead, tbody, tfoot
What purpose do the thead and tbody elements serve?
They help distinguish the heading from the body of the table. Also allows you to style these sections in different manner than the rest of the table.
Give two examples of data that would lend itself well to being displayed in a table.
financial reports and tv schedules
What are the name of the individual pieces of a CSS ruleset?
A selector (indicates which element the rule applies to) and a declaration (indicates how the elements referred to should be styled)
In CSS, how do you select elements by their class attributes?
A class selector use a period followed by the attribute value
In CSS, how do you select elements by their tag name?
Use the element name
In CSS, how do you select an element by its id attribute?
An id selector uses a # followed by the attribute value
Name three different types of values you can specify colors in CSS.
RGB values, Hex code, and Color names
What CSS properties make up the box model?
Border, margin, padding
Which CSS properties 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 pseudo-class is a selector that selects elements that are in a specific state, e.g. they are the first element of their type, or they are being hovered over by the mouse pointer
What are CSS pseudo-classes useful for?
To make stylistic changes to user feedback
Name two types of units that can be used to adjust font-size in CSS.
rem and px
What CSS property controls the font used for the text inside an element?
font-size
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?
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?
static
How does setting position: relative on an element affect document flow?
It doesn’t affect document flow
How does setting position: relative on an element affect where it appears in 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 get removed from document flow and all other elements fill the space
how does setting position: absolute on an elements affect where it appears on the page?
Absolutely element no longer exists in the normal document flow. Instead, it sits on its own layer separate from everything else.
How do you constrain an absolutely positioned elements to a containing block?
By looking for the parents container and setting it’s position to relative
What are the four box offset properties?
top, right, bottom, left
what is the purpose of variables?
a variable stores the data value that can used and changed later on
How do you declare a variable?
specify the type, leave at least one space, then the name for the variable and end the line with a semicolon ( ; )
How do you initialize (assign a value to) a variable?
add an equal sign (=) to the right of a variable name. to the right of the equal sign, write an expression
What characters are allowed in variable names?
letters, numbers, non-punctuation characters (except a period (.) is allowed, but cannot start with a number
What does it mean to say that variable names are “case sensitive”?
This means that language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters
What is the purpose of a string?
A string is a data type used in programming, such as an integer and floating point unit, but is used to represent text rather than numbers
What is the purpose of a number?
Number is a primitive wrapper object used to represent and manipulate mathematical operations
What is the purpose of a boolean?
Boolean refers to a system of logical thought that is used to create true/false statements
What does the = operator mean in JavaScript?
an operator is a special symbol used to perform operations on operands (values and variables)
How do you update the value of a variable?
We can update our variables in shorter ways by using the += , *= , -= or /= operators. No keyword needed, variable = value
What is the difference between null and undefined?
undefined is a variable that refers to something that doesn’t exist, and the variable isn’t defined to be anything. null is a variable that is defined but is missing a value. Null is used to assign nothing to a variable purposefully. Undefined is JavaScripts response to nothing being assigned to the variable
Why is it a good habit to include “labels” when you log values to the browser console?
It helps organize which variables are being logged and in what order
Give five examples of JavaScript primitives.
undefined , null , boolean , string and number
What data type is returned by an arithmetic operation?
An arithmetic operation combines two or more numeric expressions using the Arithmetic Operators to form a resulting numeric expression
What is string concatenation?
the process of appending one string to the end of another string
What purpose(s) does the + plus operator serve in JavaScript?
returns the sum of the expression and concatenates strings
What data type is returned by comparing two values (<, >, ===, etc)?
returns the boolean values: true of false
What does the += “plus-equals” operator do?
adds the value on the right, to the variable on the left, and then assigns that value back into the variable on the left
What are objects used for?
Used to group a collection of key-value pairs into one variable object
What are object properties?
Variables that are part of an object
Describe object literal notation.
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
How do you remove a property from an object?
Use the delete operator
What are two ways to get or update the value of a property?
dot notation and bracket notation
What are arrays used for?
to store a list of data
Describe array literal notation.
values are separated by a comma in a bracket [ ] and then assigned to a variable
How are arrays different from “plain” object?
arrays have a length property
What number represents the first index of an array?
0