HTML Flashcards

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
Q

What are CSS pseudo-classes useful for?

A

to Highlight User’s Position and specify a special state of the selected element(s)

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

Name two types of units that can be used to adjust font-size in CSS.

A

pixels, percentages, ems

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

What CSS property controls the font used for the text inside an element?

A

font- family

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

What is the default flex-direction of a flex container?

A

row

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

What is the default flex-wrap of a flex container?

A

nowrap

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

Why do two div elements “vertically stack” on one another by default?

A

div is a block element

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

What is the default flex-direction of an element with display: flex?

A

row

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

What are the three primary components of a page layout? (Which helper classes do you need?)

A

container, row, column

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

What is the minimum number of columns that you should put in a row?

A

1

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

What is the purpose of a container?

A

to confine all the content within a boundary

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

What is the default value for the position property of HTML elements?

A

static

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

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?

A

element positioned according to the normal flow

moves according to its original position as if it was static

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

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?

A

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).

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

How do you constrain an absolutely positioned element to a containing block?

A

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).

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

What are the four box offset properties?

A

top right bottom left

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

What is the purpose of variables?

How do you declare a variable?

How do you initialize (assign a value to) a variable?

A

store data, so you can reuse

name in camelCase

assign with assignment operator ‘=’ (variable name = variable value)

41
Q

What characters are allowed in variable names?

What does it mean to say that variable names are “case sensitive”?

A

letters, $, or underscore (‘_’)

variables can be the same name but have a different titleCase and have a different value

42
Q

What is the purpose of a string?

What is the purpose of a number?

What is the purpose of a boolean?

A

to store text

to store numbers, used for math

used for conditionals, two values, true or false

43
Q

What does the = operator mean in JavaScript?

A

assignment, assigning data to variable

44
Q

How do you update the value of a variable?

A

variable name, assignment operator, and new variable value

45
Q

What is the difference between null and undefined?

A

null signifies a purposeful emptiness, undefined is accidental emptiness.
undefined can be created by JavaScript while null cannot

46
Q

Why is it a good habit to include “labels” when you log values to the browser console?

A

to make it more clear or obvious what value is being logged

47
Q

Give five examples of JavaScript primitives.

A

string, number, boolean, null, undefined

48
Q

What data type is returned by an arithmetic operation?

A

numbers

49
Q

What is string concatenation?

A

add two or more strings together to join each other

50
Q

What purpose(s) does the + plus operator serve in JavaScript?

A

addition , string concatenation

51
Q

What data type is returned by comparing two values (<, >, ===, etc)?

A

boolean

52
Q

What does the += “plus-equals” operator do?

A

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
Q

What are objects used for?

What are object properties?

A

group together a set of variables and functions that are related to each other

variables with key value pairs

54
Q

Describe object literal notation.

A

(var keyword) variable name {
key:value, key:value
}

55
Q

How do you remove a property from an object?

A

delete “object.property”

56
Q

What are the two ways to get or update the value of a property?

A

dot notation or bracket notation

57
Q

What are arrays used for?

Describe array literal notation.

A

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
Q

How are arrays different from “plain” objects?

A

array has similar data type , always has a length property

59
Q

What number represents the first index of an array?

A

0

60
Q

What is the length property of an array?

A

number of items in an array

61
Q

How do you calculate the last index of an array?

A

.length property - 1

62
Q

What is a function in JavaScript?

A

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
Q

Describe the parts of a function definition.

Describe the parts of a function call.

A

function keyword function name(0+ parameter, parameter) {
optional return statement
}

function name(0+ argument, argument)

64
Q

When comparing them side-by-side, what are the differences between a function call and a function definition?

A

function call doesn’t use the function keyword and has no code block, just the function name and/if any arguments

65
Q

What is the difference between a parameter and an argument?

Why are function parameters useful?

A

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
Q

What two effects does a return statement have on the behavior of a function?

A
  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
Q

Why do we log things to the console?

A

debugging and verifying values

68
Q

What is a method?

A

function within an object

69
Q

How is a method different from any other function?

A

method starts with a .(dot) and an object before it

70
Q

How do you remove the last element from an array?

A

pop method

71
Q

How do you round a number down to the nearest integer?

A

floor method of math object

72
Q

How do you generate a random number?

A

random method of math object

73
Q

How do you delete an element from an array?

A

splice , pop, shift

74
Q

How do you append an element to an array?

A

push method

75
Q

How do you break a string up into an array?

A

split method

76
Q

Do string methods change the original string? How would you check if you weren’t sure?

A

no, strings are immutable. console.log and check

77
Q

Is the return value of a function or method useful in every situation?

A

no. (ex. console.log, pop, push)

78
Q

What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?

A

MDN

79
Q

Give 6 examples of comparison operators.

A

<, >, <=, >=, ===, !==, ==, !=

80
Q

What data type do comparison expressions evaluate to?

A

boolean

81
Q

What is the purpose of an if statement?

A

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
Q

Is else required in order to use an if statement?

A

no

83
Q

Describe the syntax (structure) of an if statement.

A

if keyword (condition) {
code
}

84
Q

What are the three logical operators?

A

&&(and), ||(or), !(not)

85
Q

How do you compare two different expressions in the same condition?

A

&& (logical and) || (logical or)

86
Q

What is the purpose of a loop?

What is the purpose of a condition expression in a loop?

A

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
Q

What does “iteration” mean in the context of loops?

A

Each single pass through the sequence to complete all the steps in the given order

88
Q

When does the condition expression of a while loop get evaluated?

A

before executing the statement

89
Q

When does the initialization expression of a for loop get evaluated?

A

its executed once, as the loop begins

90
Q

When does the condition expression of a for loop get evaluated?

A

each time before the loop runs (each iteration)

91
Q

When does the final expression of a for loop get evaluated?

A

at the end of each loop (iteration) and is used to increment or decrement a value

92
Q

Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?

A

<br></br> (break)

93
Q

What does the ++ increment operator do?

A

increase value by 1

94
Q

How do you iterate through the keys of an object?

A

for in loop

95
Q

What are the four components of “the Cascade”.

A

inheritance, specificity, !important, source order

96
Q

What does the term “source order” mean with respect to CSS?

A

strength of css rule sheet, things lower are ‘stronger’

97
Q

How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?

A

inheritance

98
Q

List the three selector types in order of increasing specificity.

A

id, class, type

99
Q

Why is using !important considered bad practice?

A

very high specificity, hard to override