HTML Flashcards
Where do you put non-visible content about the HTML document
Head element
Where do you put visible content about the HTML document?
Within the body element
What is the purpose of a <!DOCTYPE> declaration?
To show the version of the language
Give five examples of HTML element types.
HTML element, Body element, P element, head element, title element, h1 element
What is the purpose of HTML attributes?
It indicates what kind of extra information you are supplying about the element’s content, it should be written in lowercase
Give an example of an HTML entity (escape character).
< less than
> greater than
& ampersand
How do block-level elements affect the document flow?
They always appear to start on a new line in the browser window
How do inline elements affect the document flow?
They always appear to continue on the same line as their neighboring elements
What are the default width and height of a block-level element?
height: auto
width: 100%
What are the default width and height of an inline element?
weight: auto
height: auto
What is the difference between an ordered list and an unordered list in HTML?
Ordered lists use numbers
Unordered lists use bullets
Is an HTML list a block element or an inline element?
Block element
What HTML tag is used to link to another website?
a element which has an attribute called href
What is an absolute URL?
Starts with the domain name for that site, and can be followed by the path to a specific page
What is a relative URL?
A shorthand version of the absolute urls because you do not need to specify the domain name.
How do you indicate the relative link to a parent directory?
Use ../ to indicate the folder above the current one, then follow it with the file name.
How do you indicate the relative link to a child directory?
For a child folder, use the name of the child folder, followed by a forward slash, then the file name.
How do you indicate the relative link to a grand parent directory?
Repeat the ../ to indicate that you want to go up two folders(rather than one) then follow it with the file name
How do you indicate the relative link to the same directory?
To link to a file in the same folder, just use the file name. (Nothing else is needed)
What is the purpose of an HTML form element?
it sets up the boundary of the form and it gives you a set of elements to collect data from your users
Give five examples of form control elements.
<input></input> element
<text> element
<select> element
<option> element
<button> element
<legend> element
</legend></button></option></select></text>
Give three examples of type attribute values for HTML <input></input> elements.
<action> attribute
<id> attribute
<size> attribute
type=”text” attribute
maxlength attribute
<value> attribute
<checked> attribute
</checked></value></size></id></action>
Is an HTML <input></input> element a block element or an inline element?
It is an inline because its able to have the same content in the same line
What are the six primary HTML elements for creating tables?
<table>
<tr>
<td>
<th>
<thead>
<tbody>
<tfoot>
</tfoot></tbody></thead></th></td></tr></table>
What purpose do the thead and tbody elements serve?
Thead-The <thead> HTML element defines a set of rows defining the head of the columns of the table.
tbody-
The <tbody> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the body of the table (<table>).
Give two examples of data that would lend itself well to being displayed in a table.
Financial reports, tv schedules, sports results
What are the names of the individual pieces of a CSS rule?
A selector and a declaration block, property and value
In CSS, how do you select elements by their class attribute?
By putting a Period symbol before the name of the class
In CSS, how do you select elements by their tag name?
Matches element tag names
In CSS, how do you select an element by its id attribute?
By using the #, pound sign or hash symbol.
Name three different types of values you can use to specify colors in CSS.
RGB Values
Hex codes
Color names
What CSS properties make up the box model?
The box model consists of: margins, borders, padding, and the actual content (width & height).
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?
It is a keyword added to a selector that specifies a special state of the selected element(s)
What are CSS pseudo-classes useful for?
They let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator.
Ex. User interaction
Name two types of units that can be used to adjust font-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?
Because they are block elements
What is the default flex-direction of an element with display: flex?
row
What are the three primary components of a page layout? (Which helper classes do you need?)
Column row and container
What is the minimum number of columns that you should put in a row?
1
What is the purpose of a container?
expands items to fill available free space or shrinks them to prevent overflow.
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 is unaffected, elements sit in the same spot.
How does setting position: relative on an element affect where it appears on the page?
Relative position 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?
This positions the element in relation to its containing elementWhen the position property is given a value of absolute, the box is taken out of normal flow and no longer affects the position of other elements on the page
How does setting position: absolute on an element affect where it appears on the page?
It is positioned to the nearest non static parent
How do you constrain an absolutely positioned element to a containing block?
anything other than static
What are the four box offset properties?
Top,bottom, left, right
What is the purpose of variables?
Serves as a container for values or any data that you want the computer to remember. So that you can utilize it later.
How do you declare a variable?
You need a variable keyword and a variable name in camelCase.
How do you initialize (assign a value to) a variable?
By using the assignment operator. Variable name on the left and the value of the variable on the right.
What characters are allowed in variable names?
Letters, numbers, underscores, $, variable cannot begin with a number.
What does it mean to say that variable names are “case sensitive”?
Uppercase and lowercase. For example, score and Score would be different variable names.
What is the purpose of a string?
A way to store “text” information. A series of characters.
What is the purpose of a number?
to allow us to solve arithmetic problems
What is the purpose of a boolean?
Allow us to make decisions in code. Only Two possible values. true and false.
What does the = operator mean in JavaScript?
Assignment.
How do you update the value of a variable?
By changing the value of of the variable. Variable name assignment operator, the new value.
What is the difference between null and undefined?
Null is empty, but will put something there later. Null is Purposeful emptiness in the hands of the developer.
Undefined is accidental emptiness.
Why is it a good habit to include “labels” when you log values to the browser console?
To make the values you’re logging in the browser more clear to understand.
Give five examples of JavaScript primitives.
Numbers, Booleans, strings, null, undefined,
What data type is returned by an arithmetic operation?
Numbers
What is string concatenation?
Joins together two or more strings to create one new string
What purpose(s) does the + plus operator serve in JavaScript?
Adds one value to another and/or concatenate strings.
What data type is returned by comparing two values (<, >, ===, etc)?
Boolean
What does the += “plus-equals” operator do?
adds the value of the right operand to a variable and assigns the result to the variable.
What are objects used for?
Objects group together a set of variables and functions under one box. Stores multiple information that are attributed to one thing.
What are object properties?
Individual pieces of named data within an object
Describe object literal notation
Var obj = {};
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 stores a list of values.
Describe array literal notation.
You need a variable key word followed by the name of the array, the values assigned for the array are inside a pair of square brackets. Each value is separated by a comma
How are arrays different from “plain” objects?
You use arrays when the list order matters. Values of an array are all the same data type. Objects can hold different data. Arrays have a length property. Objects don’t have any property.
What number represents the first index of an array?
0
What is the length property of an array?
True count of how many items are in the array.
How do you calculate the last index of an array?
array.length-1
What is a function in JavaScript?
Functions allow you to package up code for use later in your program.
A set of actions that can be repeated.
Describe the parts of a function definition.
Function definitions are made of:
the function keyword
an optional name
zero or more parameters
a code block
an optional return statement
Describe the parts of a function call.
Notice that we are simply writing the name of the function and placing () parentheses next to it. Functions are called with () parentheses and passed zero or more arguments.
When comparing them side-by-side, what are the differences between a function call and a function definition?
Function definition has parameters and a function call has arguments. Function definition has curly braces.
What is the difference between a parameter and an argument?
parameters are listed inside the parentheses () in the function definition. arguments are the values received by the function when it is called.
when we define a function, we declare parameters and that when we call a function, we pass it arguments
Why are function parameters useful?
They are use a placeholders for the values you will be calling in your function. It allows us to have variants of how a code runs. You can introduce new values to get different results.
What two effects does a return statement have on the behavior of a function?
A return statement causes the function to produce a value.
A return statement also exits the function; no code after the return statement is executed.
Why do we log things to the console?
The JavaScript console is a debugging tool. It is where the browser prints errors and warnings as they occur in your JavaScript code. Verification. Landmark to watch your process execute.
What is a method?
A method is a function which is a property of an object.
How is a method different from any other function?
They always have dot before. Functions do not utilize the dot notation.
How do you remove the last element from an array?
Pop method.
How do you round a number down to the nearest integer?
Floor method of the math object.
How do you generate a random number?
Math random method
How do you delete an element from an array?
Splice method
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?
They do not change. They are immutable. You can check by calling the string method
Is the return value of a function or method useful in every situation?
No.
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.
== is equal to
!= is not equal to
> greater than
< less than
=== strictly equal to
!== strict not equal to
>= greater than or equal to
<= less than or equal to
What data type do comparison expressions evaluate to?
Booleans
What is the purpose of an if statement?
The determine which path to take. It allows us to make decisions in our code.
Is else required in order to use an if statement?
no
Describe the syntax (structure) of an if statement.
“If” keyword, a condition, opening curly brace, code to execute if value is true, and a closing curly brace.
What are the three logical operators?
&& logical and
|| logical or
! logical not
How do you compare two different expressions in the same condition?
Use logical and or
