HTML Flashcards

(99 cards)

1
Q

Where do you put non-visible content about the HTML document?

A

In the “head” element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Where do you put visible content about the HTML document?

A

In the “body” element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Where do the <head> and <body> tags go in a valid HTML document?

A

Within the “html” element as siblings.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is the purpose of a <!DOCTYPE> declaration?

A

Instruction to the web browser about what version of HTML the page is written in. Ensures the web page is parsed the same way by different web browsers.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is the purpose of the HTML attributes?

A

To provide additional information about HTML elements.

name=”value”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

ex. HTML element types

ex. HTML entity(escape character)

A

” <head>, <title>, <body>, <h1>, <p>, <html> "</title>

&lt (<), &reg (Ⓡ), &amp (&), &quot (“), &apos (‘) **

**followed by semicolon

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

How do block-level elements affect the document flow?

default value for height and width

A

They stack, block-level elements start on a new line.
Block-level element occupies the entire horizontal space of its parent element(container), and vertical space equal to the height of its contents.

height - auto

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

How do inline elements affect the document flow?

default value for height and width

A

Only occupy the space bounded by the tags defining the element.
Do NOT force a new line to begin in the document flow.

height and width - auto

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Is an HTML list a block or an inline element?

Difference between an ordered list and unordered list.

A

HTML lists are block elements.

Ordered lists are used to create a list of related items, in a specific order. (Ascending numerical order)

Unordered lists are used to create a list of related items, in no particular order. (Bullet points)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What HTML tag is used to link to another website?

Absolute URL vs Relative URL

A

The anchor tag (<a>) is used to link to another website.</a>

Absolute - contains the whole URL address, including protocol (http/https), the optional subdomain (www.), domain (google.com), and path (directory and slug)

Relative - contains a URL that only includes the path (directory and slug). Path is everything after the domain.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

How do you indicate the relative link to the same directory?
a parent directory?
a child directory?
a grand parent directory?

A

File name or .
../ + file name
Name of child folder + file name
../../ + file name

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is the purpose of an HTML form element?

Give five examples of form control elements.

A

Boundary of the form element and used to collect user input

input, label, select, textarea, button, fieldset

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Is an HTML <input></input> element a block element or an inline element?

Give three examples of type attribute values for HTML <input></input> elements.

A

inline

type, name, value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What are the six primary HTML elements for creating tables?

A

tr, td, th, thead, tbody, table, tfoot

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What purpose do the thead and tbody elements serve?

A

thead refers to the head of the table

tbody refers to the body of the table

Structural purpose

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Give two examples of data that would lend itself well to being displayed in a table.

A

Financial reports, tv schedules, sports results

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What are the names of the individual pieces of a CSS rule?

A

selector & declaration > declaration block > property & value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

In CSS, how do you select elements by their class attribute?

A

. (dot)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

In CSS, how do you select elements by their tag name?

A

element name

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

In CSS, how do you select an element by its id attribute?

A

(octothorpe) #

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Name three different types of values you can use to specify colors in CSS.

A

color name, hex code, rgb value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What CSS properties make up the box model?

A

width, height, padding, border, margin

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Which CSS property pushes boxes away from each other?

Which CSS property add space between a box’s content and its border?

A

margin

padding

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What is a pseudo-class?

A

keyword added to a selector that specifies a special state of the selected element

selector that selects elements that are in a specific state,

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
What are CSS pseudo-classes useful for?
to Highlight User's Position and specify a special state of the selected element(s)
26
Name two types of units that can be used to adjust font-size in CSS.
pixels, percentages, ems
27
What CSS property controls the font used for the text inside an element?
font- family
28
What is the default flex-direction of a flex container?
row
29
What is the default flex-wrap of a flex container?
nowrap
30
Why do two div elements "vertically stack" on one another by default?
div is a block element
31
What is the default flex-direction of an element with display: flex?
row
32
What are the three primary components of a page layout? (Which helper classes do you need?)
container, row, column
33
What is the minimum number of columns that you should put in a row?
1
34
What is the purpose of a container?
to confine all the content within a boundary
35
What is the default value for the position property of HTML elements?
static
36
How does setting position: relative on an element affect document flow? How does setting position: relative on an element affect where it appears on the page?
element positioned according to the normal flow moves according to its original position as if it was static
37
How does setting position: absolute on an element affect document flow? How does setting position: absolute on an element affect where it appears on the page?
element is removed from the normal flow the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).
38
How do you constrain an absolutely positioned element to a containing block?
the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).
39
What are the four box offset properties?
top right bottom left
40
What is the purpose of variables? How do you declare a variable? How do you initialize (assign a value to) a variable?
store data, so you can reuse name in camelCase assign with assignment operator '=' (variable name = variable value)
41
What characters are allowed in variable names? What does it mean to say that variable names are "case sensitive"?
letters, $, or underscore ('_') variables can be the same name but have a different titleCase and have a different value
42
What is the purpose of a string? What is the purpose of a number? What is the purpose of a boolean?
to store text to store numbers, used for math used for conditionals, two values, true or false
43
What does the = operator mean in JavaScript?
assignment, assigning data to variable
44
How do you update the value of a variable?
variable name, assignment operator, and new variable value
45
What is the difference between null and undefined?
null signifies a purposeful emptiness, undefined is accidental emptiness. undefined can be created by JavaScript while null cannot
46
Why is it a good habit to include "labels" when you log values to the browser console?
to make it more clear or obvious what value is being logged
47
Give five examples of JavaScript primitives.
string, number, boolean, null, undefined
48
What data type is returned by an arithmetic operation?
numbers
49
What is string concatenation?
add two or more strings together to join each other
50
What purpose(s) does the + plus operator serve in JavaScript?
addition , string concatenation
51
What data type is returned by comparing two values (<, >, ===, etc)?
boolean
52
What does the += "plus-equals" operator do?
add left and right value and sets result of expression to the left The addition assignment operator (+=) adds the value of the right operand to a variable and assigns the result to the variable.
53
What are objects used for? What are object properties?
group together a set of variables and functions that are related to each other variables with key value pairs
54
Describe object literal notation.
(var keyword) variable name { key:value, key:value }
55
How do you remove a property from an object?
delete "object.property"
56
What are the two ways to get or update the value of a property?
dot notation or bracket notation
57
What are arrays used for? Describe array literal notation.
storing a list or set of values that are related to each other (order important or not important) var keyword (variable name) = [value, value] value = string , number, boolean
58
How are arrays different from "plain" objects?
array has similar data type , always has a length property
59
What number represents the first index of an array?
0
60
What is the length property of an array?
number of items in an array
61
How do you calculate the last index of an array?
.length property - 1
62
What is a function in JavaScript?
a set of statements that performs a task or calculates a value should take some input and return an output where there is some obvious relationship between the input and output.
63
Describe the parts of a function definition. Describe the parts of a function call.
function keyword function name(0+ parameter, parameter) { optional return statement } function name(0+ argument, argument)
64
When comparing them side-by-side, what are the differences between a function call and a function definition?
function call doesn't use the function keyword and has no code block, just the function name and/if any arguments
65
What is the difference between a parameter and an argument? Why are function parameters useful?
functions definitions use parameters and function calls use arguments placeholder variable, so u can use w/ function calls and have a variable that can be reused
66
What two effects does a return statement have on the behavior of a function?
1. Causes the function to produce a value we can use in our program 2. Prevents any more code in the function's code block from being run.
67
Why do we log things to the console?
debugging and verifying values
68
What is a method?
function within an object
69
How is a method different from any other function?
method starts with a .(dot) and an object before it
70
How do you remove the last element from an array?
pop method
71
How do you round a number down to the nearest integer?
floor method of math object
72
How do you generate a random number?
random method of math object
73
How do you delete an element from an array?
splice , pop, shift
74
How do you append an element to an array?
push method
75
How do you break a string up into an array?
split method
76
Do string methods change the original string? How would you check if you weren't sure?
no, strings are immutable. console.log and check
77
Is the return value of a function or method useful in every situation?
no. (ex. console.log, pop, push)
78
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
79
Give 6 examples of comparison operators.
<, >, <=, >=, ===, !==, ==, !=
80
What data type do comparison expressions evaluate to?
boolean
81
What is the purpose of an if statement?
to run a set of code based on a specified condition ex. The IF statement executes one set of code if a specified condition is met (TRUE) or another set of code evaluates to FALSE.
82
Is else required in order to use an if statement?
no
83
Describe the syntax (structure) of an if statement.
if keyword (condition) { code }
84
What are the three logical operators?
&&(and), ||(or), !(not)
85
How do you compare two different expressions in the same condition?
&& (logical and) || (logical or)
86
What is the purpose of a loop? What is the purpose of a condition expression in a loop?
allows you to repeat a process over and over without having to write the same code each time expressing that is tested each time the loop repeats, as long as condition is true, the loops keeps running, purpose is to stop the loop
87
What does "iteration" mean in the context of loops?
Each single pass through the sequence to complete all the steps in the given order
88
When does the condition expression of a while loop get evaluated?
before executing the statement
89
When does the initialization expression of a for loop get evaluated?
its executed once, as the loop begins
90
When does the condition expression of a for loop get evaluated?
each time before the loop runs (each iteration)
91
When does the final expression of a for loop get evaluated?
at the end of each loop (iteration) and is used to increment or decrement a value
92
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?

(break)
93
What does the ++ increment operator do?
increase value by 1
94
How do you iterate through the keys of an object?
for in loop
95
What are the four components of "the Cascade".
inheritance, specificity, !important, source order
96
What does the term "source order" mean with respect to CSS?
strength of css rule sheet, things lower are 'stronger'
97
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
inheritance
98
List the three selector types in order of increasing specificity.
id, class, type
99
Why is using !important considered bad practice?
very high specificity, hard to override