Coding FlashCards
(217 cards)
1
Q
Give five examples of HTML element tags.
A
- html
- head
- title
- body
- p tag
2
Q
What is the purpose of HTML attributes?
A
are a modifier of an HTML element type
3
Q
Give an example of an HTML entity (escape character)
A
” © “ = copyright
4
Q
How do you indicate the parent folder in a path?
A
Use ../ to indicate the folder above the current one, then the file name
Example: ../index.html
5
Q
How do you indicate the child folder in a path?
A
Use the name of child folder, then the file name
Example: music/listings.html
6
Q
How do you indicate the grand parent folder in a path?
A
Repeat the ../ to go up two folders, then follow with the file name.
Example: ../../index.html
7
Q
How do you indicate the current folder in a path?
A
Use the file name
Example: index.html
–
8
Q
What purpose do the thead and tbody elements serve?
A
thead: separate chunks in your table (table header)
tbody: the body (information) of table
9
Q
Give two examples of data that would lend itself well to being displayed in a table.
A
Numbers, finances, anything you can put in an excel sheet
10
Q
What is an absolute URL?
What is a relative URL?
A
Absolute URL: When you link to a different website, the value of the href attribute will be the full web address for the site
Relative URL: When you are linking to other pages within the same site, you do not need to specificy the domain name in the URL (example: Home)
–
11
Q
What attribute do you have to match between a label and an input?
A
for and id
12
Q
What type of input allows you to select multiple items in a dropdown?
A
select
select needs to work with the element
13
Q
What does the element do?
A
uses the action attribute to indicate the page that the data is being sent to
14
Q
What does the element do?
A
indicates the purpose of each form control
15
Q
Give three examples of type attributes for HTML elements.
A
type
id
value
16
Q
Give three examples of type attributes for HTML elements.
A
password email radio checkbox text calendar phone number button color date time file
17
Q
Why would we choose specific element types when we have elements such as div and span which can be used for anything?
A
Provide elements that provide content
SEO (search englines)
Accessibility
18
Q
What factors contribute to a well-designed HTML document?
A
Proper formatting (indenting)
Using the correct functions
19
Q
What are the names of the individual pieces of a CSS rule?
A
property, value, selector, declaration
20
Q
How are key/value pairs related to CSS?
A
properties and values
name that correlates to a value
21
Q
Name three different types of values you can use to specify colors in CSS.
A
RBG Values
HEX
Color Names
22
Q
Why must you have backup fonts assigned when selecting custom fonts?
A
In case the user does not have that font installed
If the fall back doesn’t work, it will default to New Times Roman
23
Q
What CSS properties make up the box model?
A
padding, border, margin
content is not a CSS property
24
Q
Which CSS property pushes boxes away from each other?
A
margin
25
Which CSS property pushes box content away from its border?
padding
26
What are three important considerations for choosing fonts?
Readability, cross browsers reading, theme, target market
27
In what situations might you need to apply styling to a single element multiple times in one stylesheet?
Mobile responsiveness
28
What is source order?
order that CSS rule is written
| Styling provided for an element LAST in stylesheet
29
What is inheritance?
If the child element does not have a value, it would look to the parent element for a value
30
Why might CSS include this feature?
To set font related properties instead of setting it individually
31
Is inheritance a good tool to use for styling? If so, on what occasions?
Yes, because you can simplify setting properties
| although its on the weaker side - any direct styling will override it
32
When is ! important a good tool to use?
NEVER. It's used to override a template that you have no control over or for people writing libraries for CSS
33
What is specificity?
A browser decide which CSS property values are the most relevant to an element.. then apply it
The more unique, the stronger it'll be
34
How is specificity calculated?
determined by the number of each selector type in the matching selector
35
Why might CSS include this feature?
To make things more precise to an element and not worrying about it getting overwritten
36
What is the order of selector strengths for CSS specificity (commonly referred to as the Specificity Hierarchy)?
id
class
element
universal selector
37
What is the CSS Cascade?
All the factors to determine what style is applied
38
What are CSS pseudo-classes useful for?
adds a specific selector to an element
39
What is the difference between the :first-child pseudo selector and the :last-child pseudo selector?
allows you to visually manipulate an element by skewing, rotating, translating, or scaling:
40
What does the transform property do?
allows you to visually manipulate an element by skewing, rotating, translating, or scaling:
41
What is the difference between the :first-child pseudo selector and the :last-child pseudo selector?
The :first-child CSS pseudo-class represents the first element among a group of sibling elements.
The :last-child CSS pseudo-class represents the last element among a group of sibling elements.
42
What are 3 examples of what can be done with CSS transitions?
duration, timing, and delay
43
Are all properties able to be transitioned?
yes
44
Why is CSS transition a useful tool?
create elements to be more visually pleasing
another way to make website more comfortable for users
45
How do block-level elements affect the document flow?
start on a new line in the browser window
examples: h1, p, ul, li
46
How do inline elements affect the document flow?
some elements will continue on the same line as neighboring elements
examples: a, b, em, img
47
What are the default width and height of a block-level element?
100% (takes up any space available)
height: auto (same as content)
width: 100%
48
What are the default width and height of an inline element?
takes up space to accommodate its contents
height: auto (same as content)
width: auto (same as content)
49
What accessibility considerations must be considered when choosing HTML elements?
when you want emphasize through a spoken word (such as strong, em, del)
50
What is the difference between display: none and visibility: hidden?
display: none = hides an element on a page.. element will not be on the page at all (no spaces, no gaps)
visbility: hidden = hides an element.. all the other elements moves over it (shows a space for the hidden element)
51
What is the difference between the block, inline block, and inline display properties?
block: takes up full width
inline: takes up minimum space
inline block: takes up minimum space but with a set height and width
52
What is the initial display property of div s?
block
53
What is the difference between the block, inline block, and inline display properties?
block: takes up full width
inline: takes up minimum space
inline block: takes up minimum space but with a set height and width (you can resize height and width)
54
Why are CSS resets helpful for cross browser compatibility?
its good to be consistent across multiple browsers
55
Why is it important to be mindful of what you reset with your CSS resets?
you don't want to reset everything as it'll give us a starting point. you just want to get rid of things that will cause problems between different browsers
56
What is an argument against using CSS resets?
a lot of the styles are eventually overridden by our main stylesheet, which means that the reset styles unnecessarily add to page load time
57
What is an argument against using CSS resets?
a lot of the styles are eventually overridden by our main stylesheet, which means that the reset styles unnecessarily add to page load time (more work for browser)
58
What is the default value for the position property of HTML elements?
Position default = Static
59
How does setting position relative on an element affect document flow and where the element appears on the page?
moves an element in relation to where it would have been in a normal flow
shift where it would normally be
60
How does setting position absolute on an element affect document flow and where the element appears on the page?
removed from document flow entirely and looks for the first non-static parent it can find to position itself against
61
What are the box offset properties?
top, bottom, left, and right
62
What were floats originally designed for?
to allow developers to float text around image elements similar to the way newspapers and magazines would display text. For example:
63
What are clears for with floats?
allows you to say that no element should touch the left or right hand sides of a box
64
What are some of the downsides for using floats in layout design?
Element is removed from the document flow.
65
What is the default flex-direction of a flex container?
row (left-to-right)
66
What is the default flex-wrap of a flex container?
no wrap = all flex items will be on one line
67
Why should flex-box not be used for building complete web page layouts?
cant make complex lay-outs
68
Why is it important to use a grid system for CSS layouts?
easy to adjust things in teams
69
Why is it important to use a grid system for CSS layouts?
container, column, row.
70
Why is it a good idea to use percentages for grid column widths?
because if you open your website in a crazy display you want your website to be contained.
71
How do you think building this layout would be different without a grid system?
T WOULD NOT BE FUN
It would be very tough...
72
What advantages do you see with using a grid system?
organized (easier to work with),
user friendly (easier for them to use and read)
73
Why are media queries crucial to responsive grid designs?
automatically adjust the set width of the container class depending on the size of the current browser window
without it, building responsive designs is almost impossible (it is important for the content of the website to adapt to the screen it is displayed on)
74
What is a variable?
to temporarily store the bits of information it needs to do its job
container that we can store data in and reference by data to be used later on
75
Why are variables useful?
ability to have something you can reference and use later
76
What two special characters can a variable begin with?
$ or underscore (_)
77
How do you declare a variable?
using the VAR keyword
ex. var quantity
78
Which words cannot be used as variable names?
JavaScript keywords
(if, while, var, const)
--
79
What is a number in JavaScript?
just a number = 12 , 2 , 3
| data type
80
What is an arithmetic operator?
Name four of the arithmetic operators?
+ , - , / , *,
81
What is the order of execution?
PEMDAS!!!
82
What is a string?
data type that consists of letters and other characters in a pair of quotes
83
What is the string concatenation operator?
joining two or more strings to create a single value using the string operator (+)
84
What is the difference when it comes to using single quotes or double quotes ( ' ' or " " )?
nothing
85
How do you escape quotation characters?
backwards slash before any type of quotation mark
example: a href=\"sale.html\
86
What is type coercion?
one data type has been converted from one data type to another
```
ex. concatenation
var phrase = 'I am'
var age = 29
var phrase2 = ' years old'
phrase + age + phrase2
```
87
What is a number in JavaScript?
data type that contains a number
88
What is an arithmetic operator?
mathematical operator
89
Name four of the arithmetic operators?
multiplication, division, addition, subtraction
90
What is a boolean?
data type with the values of true or false
91
What is a comparison operator?
used to compare values to test for true or false comparisons
92
What is the difference between undefined and null?
null: empty or non-existent, must be assigned (ex. vacant lot in a city - i want to put something here but not right now)
undefined: value is not assigned; not on purpose (ex. a vacant lot in a city - could be empty for a variety of reasons)
93
What is the difference between a parameter and an argument?
parameters: variables
arguments: values
94
What is a function?
performs a specific task
95
Define a function named addTwoNumbers with two parameters
function addTwoNumbers(a, b) { }
96
How do you call a function?
using the statements in between the parenthesis
97
What are the parts of a function definition?
```
functionKeyword functionName() {
return statement
}
```
name function
parameter list
return code block
98
CODE READING: var firstName = “Michael”;
The string, Michael, is being assigned as the value for the variable first name
99
CODE READING: var address = number + street
the value of the variable number is being concatenation (+) with the variable of the value street. The result of this expression is the variable address
100
CODE READING: var area = height * width
the variable stored for height is multiplied by the variable stored for width. The result of this expression is the variable address
101
CODE READING:
```
function multiplyTwoNumbers(a,b) {
return a*b
}
```
Function definition named multiplyTwoNumbers with the parameters a and b with an opening curly brace for the code block. The value for variable a is being multiplied with the value for the variable b and the result of the expression is being returned to the function. there is a closing curly bracket for the code block.
102
Why are functions useful?
you can reuse them.
103
Why is it important to understand truthy and falsy values?
important for doing comparisons
104
What is the difference between null and undefined?
null: empty or non-existent, must be assigned by a human (ex. vacant lot in a city - i want to put something here but not right now)
undefined: value is not assigned; not on purpose (ex. a vacant lot in a city - could be empty for a variety of reasons)
105
Why do you always use === for comparisons?
to execute a true equality test
106
Why do you want to avoid using == for comparison?
it loosely compares 2 values for equality after convert both values to a common data type
107
Do all if statements require an else statement?
no
108
What is the proper syntax for using the or operator?
x == 5 || y == 5 is false
109
What is the primary use case for switches?
used to perform different actions based on different conditions.
110
Does the default case have to be at the bottom of the switch statement?
no
111
What happens if there is no break statement between cases?
the (default or else) will be executed even if the evaluation does not match the case
112
CODE READING: switch (operator)
Switch statement checking the EXPRESSION of operator
113
Difference between if and switch statement
ex. friend ask for a banana
```
if statements (checks one at a time)
- you take one fruit out at a time until you get to the banana
```
```
switch statements (sees the full landscape and goes directly to the value you're looking for)
- you have the banana on a stand
```
114
When should you use bracket notation over dot notation with objects?
1. name of the property or method contains a special character (like a dash)
2. name of the property is a number
3. a variable is being used in place of the property name
115
What is a property in relation to JavaScript objects?
variables.
116
How do you remove a property from an object?
use the delete keyword followed by object name and property name
ex. delete hotel.name
117
What is an object in JavaScript?
collection of related/reference data (contains memory type)
primitive data(contains actual value)
118
How do you create an object literal?
var object = { };
```
var object2 = new Object( )
^ shorten syntax for creating a new object (not mainly used)
```
119
What is a property in relation to JavaScript objects?
a place where we can store data inside of an object
120
What is an array in JavaScript?
list (or set of values)
121
How do you create an array literal?
square brackets
122
Arrays have a property named length. Because arrays have a properties, what other data structure are they similar to?
(length is usually tied to an array = array.length)
123
CODE READING: colors[1]
value at the one index in the color array
| DO NOT SAY FIRST...
124
CODE READING: colors[2] = "green"
a string value of green which is being assigned to the value at the 2 index of the color array
125
CODE READING: var amountOfStudents = students.length
length property of the students array being assigned to the variable amountOfStudents
126
What are some good use cases for using objects inside arrays?
student data (name, age, grade)
insurance policy (name, plan, cost)
user info (email, password, full name)
127
What is the primary advantage to storing your selected elements in a variable?
if you need to use the same element more than once
128
How can you better prepare when writing HTML for DOM manipulation in your JavaScript code?
add ids and classes
129
What are the differences between innertext and textContent?
textContent gets the content of all elements, including and