Coding 2 Flashcards
1
Q
what is !DOCTYPE html?
A
its the first thing in a html document, it tells the browser that its html 5
2
Q
what is the html tag?
A
it is the root element, meaning all other elements exist within it
3
Q
what is the head tag?
A
child of html tag-
it is where we bundle information about our document, link fonts and titles. Not stuff you generally see on the web page
4
Q
How many different types of elements can be in the head element
A
7
5
Q
what is the meta tag?
A
child of the head tag-
it is a versatile tag. Each instance carries different information about the document such as the character encoding and the pages dimensions
6
Q
what is charset?
A
goes with a meta tag-
tells the browser about the character encoding
7
Q
what is viewport?
A
goes with a meta tag-
tells the browser about the pages dimensions
8
Q
what is the title tag?
A
child of the head tag-
the text that is put here, goes on the browser tab when the web page is opened.
9
Q
is the title tag required for all HTML documents?
A
Yes it is.
10
Q
why is it important for HTML documents to have a title?
A
Webcrawlers look for this element to help them index the web page correctly which helps with SEO
11
Q
What is SEO?
A
Search Engine Optimization
12
Q
What is the link tag?
A
child of the head tag –
used to link the html page to other resources like fonts and stylesheets
13
Q
what is the body tag?
A
child of the html tag-
this where the main displayable content of the webpage is put
14
Q
what is the h1 tag?
A
a first level heading tag. It has default styling which will make it large and bold. There is only one of these on a page.
15
Q
what is h2 -h6?
A
lower level heading tags, these also have default styling properties. More than one of these can be used per page
16
Q
Should we skip lower level heading tags ? h2-h6?
A
no we should not skip them, just go in order - do not choose the head line tag based on shape or size. These will be adjusted in CSS
17
Q
what is the importance of header tags?
A
they help web crawlers know what the page is about, so its also important for SEO
18
Q
what is the p tag?
A
child of the body -
used to say that the text put here is a paragraph
19
Q
what is the ul tag?
A
it is the unnumbered list tag, it creates a list of bulleted items
20
Q
what is li tag?
A
it is a child of ul tag-
it is a listed item under a ul
21
Q
what is an A tag?
A
its an anchor tag, which is used to create a clickable link that leads people to other websites or other pages on web page.
22
Q
what is a div tag?
A
it is a basic generic container tag, that is used to group content together.
23
Q
what do we wrap our elements in ?
A
opening and closing tags
24
Q
what is the difference between opening and closing tags?
A
they are identical except for the fact that closing tags have a forward slash infront of the tag name
25
what is the anchor tag plus the href attribute used for?
it is used for creating a link that either links to another website or another page on the same website
26
what are shorthand properties?
are CSS properties that let you set the values of multiple other CSS properties simultaneously.
For instance, the CSS BACKGROUND property is a shorthand property that's able to define the values of background-color, background-image, background-repeat, and background-position
27
what happens when you use a shorthand property and dont set a specific value?
the value is set to its default value, which means that it overrides previously set values.
FOR EXAMPLE
background-color: red;
background: url(images/bg.gif) no-repeat left top;
will not set the color of the background to red but to background-color's default, transparent, as the second rule has precedence.
28
What is background-color's default value?
transparent
29
what is the css property 'border'?
its a shorthand property that sets an elements border
30
what values does the shorthand property border set?
border-width
border-style
border-border color
31
Can border be used to set the value for border-image?
no it cannot, it can only reset its value to the default value....which is none
32
border is best used when?
when you want all four borders to be the same.
33
what should you use if you want to make the borders different from each other?
you can use the longhand border-width, border-style, and border-color properties, which accept different values for each side
34
what should you use if you want to focus on one border at a time?
Alternatively, you can target one border at a time with the physical (e.g., border-top )
35
what is the default value of border?
none
36
Measurement values for properties when only one measurement is specified effects what?
all four sides
border-width: 2px
all four sides will be 2px
37
Measurement values for properties when two measurements are specified, effects what?
When 2 values are specified, the first width applies to the top and bottom, the second to the left and right
38
Measurement values for properties when 3 measurements are specified, effects what?
When three values are specified, the first width applies to the top, the second to the left and right, the third to the bottom.
39
Measurement values for properties when 4 measurements are specified, effects what?
When four values are specified, the widths apply to the top, right, bottom, and left in that order (clockwise).
40
when using multiple non measurable values on a border property, does the order matter?
no it doesn't.
border: solid black 2px thinck;
OR
border: 2px solid black thick;
and it will render the same
41
what is the padding property?
it is a shorthand property that sets the padding area on all four sides of an element.
it increases the space between the content and the border
42
What is an elements padding area?
it is the area between its content and its border
43
can a value for the padding property ever be negative?
no it is not possible
44
the padding property is shorthand for what?
padding-top, padding-right, padding-bottom, and padding-left.
45
what are the possible values for padding tag?
either specific length measurements or percentage relative to the width of the containing block.
46
difference between using the padding on an element and using the padding in the body of a document?
when using padding on an element, it pushes the border out away from the inner content which can be text or a picture or anything,
when using padding on the body, the border itself is considered the content, so as the padding is increased things are pushed towards the center of the page and away from the edges.
so there are two ways to get something off of the edge of the browser page. Adjusting the padding on the element will move just that element. Adjusting the body will effect everything
47
why is html not considered a full fledged programming language?
because it doesn't allow logical statements
48
what are logical statements?
logical statements are when you set up code to behave one way if a statement is true and behave another way if the behavior is not
49
what are tags used for?
marking off the beginning and usually the end of an element
50
do all tags have closing tags?
no some tags are closing tags so they do not have closing tags
51
what is an html element?
a function, a piece of content or a group content represented and sectioned off by tags
52
what are html attributes?
attributes are used for setting properties on an html element
53
class and id are attributes that can be used on all html elements except for?
- base
- meta
- head
- param
- title
54
what element is the href attribute specific to?
a
the anchor element
55
what do we mean when we say html is about structuring content?
we mean it
1. specifies each and every one of its elements, whether seen by the user or not
2. specifies the hierarchical relationship between elements in a document
56
elements that have the same hierarchical level are called what?
siblings
57
elements that are one step lower than another element are called what?
children
58
elements that are one step higher than another element are called what?
parents
59
elements that are two or more steps lower than another element are called what?
descendants
60
what goes in the header tag?
the h1 element - which is the most important header on the page. Its what the page is about.
61
how many h1 should be on a page?
only one
62
where does the header tag go?
in the body, before the main
63
where does h2 -h6 go?
in the main section
64
can we have more than one h2 - h6?
yes as many as you want
65
should we skip the order of h2 - h6?
no, you shouldn't jump from h2 - h5
66
should we chose our headline based on the default styling properties of the h's?
no you can adjust all of that in css
67
what is a css reset?
frontend developers often use what is called a CSS reset to zero out default styles and ensure a consistent user experience across browsers.
68
two ways to make a comment tag
1. /* */
| 2. control + /
69
what is commenting out code?
intentionally using the comment tag around code to disable it so you can debug it or put it to the side for later
70
what is semantic html and what does it mean?
when you're choosing an HTML element to wrap content, you should choose the one that most clearly aligns with the meaning of your content. For instance, if you're putting a paragraph of content into the body of your HTML page, use a p element (and not, say, a div
71
what is the max-width/height property?
it sets the maximum width/height of a property.
72
what does max width over ride?
width
73
what does overflow: scroll do?
when the content of an element goes outside of the height and width you can use this to create a scroll bar
74
what overrides max width?
min width
75
what does min width/height do?
sets the minimum width/height of a property
76
why is a block like element like a gas?
because it will take up the size of whatever container/parent element it is put in. it stretches as far as it can up down and left and right
77
how much space does an image take up?
it takes up all the space it can, only being constrained by its natural height and width dimensions
78
if an image is larger than the div or parent element it is put in what happens?
the image exceeds the div or parent element
79
what happens when you put a image that larger than the browser window?
it gets a scroll bar
80
how do we resize an image?
in css, you mage the image the selector and change the width and the height
81
how do you set up a hyperlink that will open up the destination in a new tab?
(a href="website.com"target="_blank")Name of link(/a)
82
how do you set up a link that opens up the user's email client to send an email to a specific address?
(a href="mailto:address@email.com")name of link(/a)
83
how do you set up a link that opens the user's email client to send an email to a person of the user's choosing?
(a href="mailto:")name of link(/a)
84
what additional features can you add to the "mailto" href pattern?
you can cc , bcc, add a subject and add text in the body of the email
85
when adding additional features to "mailto" pattern with a destination email, do you put extra features inside the same quotations as the email? or do you create its own set?
you include it inside the same quotations
| a href="email.com?subject=check out this email">email us(/a
86
when you're adding one additional feature to a mailto pattern, what do you use to set apart the email and the additional feature?
you use a question mark ?
| a href="email.com?subject=check out this email">email us(/a
87
when you're adding two or more additional features to a mailto pattern, what do you use to set apart the email and the additional features?
you use the ? mark for the first one and then &'s for the rest
(a href="email.com?subject=check out this email&cc=baysauce415@yahoo.com&bcc=halaup16@gmail.com">email us(/a)
88
when adding additional features to a mailto pattern, does the whole value share one set of quotations?
yes, they all share one set of quotations
| a href="email.com?subject=check out this email&cc=baysauce415@yahoo.com&bcc=halaup16@gmail.com">email us(/a
89
what is a good reason to leave the destination email blank when creating a mailto pattern?
for a share button, when you want the user to share something with their friends or associates
90
whens a good time to fill the email destination in a mailto pattern?
for contact info or to sign up or subscribe to something
91
is it possible to add additional features to a mailto pattern that has a blank email destination?
yes of course, just add the ? directly after the mailto pattern - they share one quotation as well
(a href="mailto:?subject=hey there")click here(/a)
92
when creating a href that opening in another window, does the target="_blank" share the same quotations as the destination web address?
no it doesnt, it gets its own set of quotations, its its own attribute
(a href="website.com"target="_blank")two different attributes(/a)
93
what is the alt attribute and name two reasons we use it?
it gives text to the image that will display in the even that the image isnt able to display.
also, the text is read aloud by screen readers which is used by visually impaired users
94
do we need to use an alt attribute everytime we use an image?
yes every single time
95
what is the video tag?
the video tag allows you add videos to your page, much in the same way you use images.
(video src="www.videoaddress.mp4")(/video)
96
what are some of the common attributes used with the video tag?
autoplay, loop, controls, and muted
97
how do you add attributes to the video tag?
add one or more of the attribute names before or after the src with no commas or quotes inside of the opening tag
98
does the video tag need a closing tag?
yes it does
99
what is a video extension?
it is the part of the url that points to the video source itself
(.mp4, .avi, etc)
100
what do we know about a url for a video that doesnt have a video extension?
it means that its pointing to the page and not to the video, so in order to add the video to a webpage youre going to have to do a little more digging
101
what does the attribute target do?
target specifies when a link is clicked where it is opened up
102
what is the default value for the target attribute on links?
it is "_self"
meaning if you want it to open up in a different window you must set the target attribute and change it manually
103
what does the value "_self" on the target attribute do?
it opens up the clicked link in the same window being used by the user
104
what does the value "_blank" on the target attribute do?
it opens the clicked link in a brand new tab
105
what element are href and target used on ?
(a)
| the anchor element
106
when two or more links are placed by each other not under a ul or ol tag which way do they display?
side by side, horizontally
107
can h2 be used in a header tag?
yeah provided it is subtext of a present h1 in the same header tag or a h1 header tag already present somewhere on the page.
108
what does the strong and the b tag do?
its an inline styling element that makes certain part of text bold
109
what does the em and i tag do ?
its an inline styling element that makes certain parts of the text italicized
110
what is a footer tag?
a footer tag is the section closest to the bottom, this usually has contact info, copyrights and various links at the end of web page.
111
where does the footer go?
in the body beneath the main section
112
what is a ruleset?
one or more rules or declarations that are targeting a particular element or aspect of a webpage
113
what is a css selector?
a selector, is the element or aspect of the webpage that is being targeted by the declaration block
114
what are the two parts of the rule set?
selector and declaration box
115
what is the css declaration box?
is a set of rules or declarations that are set to the selector
116
what is the css declaration box contained in?
curly brackets
117
how is a css declaration or a rule constructed?
it is constructed by a property and a value
118
what is a css property?
a property represents the thing that is being changed about the selector.
body {
background-color: black}
the body is the selector,
background color is the property, the thing of the selector that is being changed
119
what is a css value?
a value specifies the exact change in the property
120
can any css value be used with any css property?
no specific values are associated with specific properties
121
what is the css property name followed by?
a colon
122
what is the css value followed by?
a semi colon
123
what is a css universal selector?
it is a selector that applies to everything on the page
124
how do we render a css universal selector?
*{
| }
125
how do we target a single element type in css?
single element name {
| }
126
how do we target two different css elements?
first element name, second element name {
| }
127
how do we target a class in css?
```
.class name {
}
```
128
how do we target an id in css?
```
#id name {
}
```
129
Should we target id's as selectors in css?
Avoid these, its usually better to use a class selector instead
130
How do we target an element with a class in css?
```
element name.class name {
}
```
131
how to target descendents of an element of a particular class?
```
element name.class name descendent name {
}
```
example:
ul.grocerylist li {
{
all li''s that are nested under the element classified as grocery list will be targeted.
no matter how deep the li's are nested they will be targeted
132
when writing out pixel measurements, can you separate the number from the px marker?
No, there can be no space between the two otherwise it wont render properly
133
when targeting two elements in css, does there need to be a space after the comma separating the two elements?
there can be no space or just one space, it doesn't matter as long as the comma is there
134
are css selectors case sensitive?
yes they are
135
can you target descendents of a generic element with no class?
yes you can
element descendent name {
}
section li {
}
this will target all li's in any section regardless of the classification of the sections
136
when a browser reads CSS it reads from which way?
it reads from right to left - so the more specific selectors are rendered first and more likely to override ones on the same element that are less specific
137
how do you target direct children of an element?
parent element > child element {
| }
138
can we add multiple combinations of selectors to the same declaration block?
yes, just add a comma in between the different selectors in the rule set
footer > p , section li {
border: 16px solid black;
}
this will target the children paragraph of the footer and it will target any li descendant nested anywhere under any section tag
139
when creating rule sets, should we use as many selectors as possible?
no we should use the least amount of selectors as possible.
140
why should we try and use the least amount of selectors as possible when creating rule sets?
because it allows for more flexibility.
for example : we can create a rule set for p.emphasis which would be valid code and get the job done that we want to achieve. But we could also just make a rule set for .emphasis - this would accomplish the same thing.
And if we wanted to put the styling attributes on another element, all we would have to do is create a div for it and classify it as . emphasis and it will automatically take on the new styling properties. This is preferable than having to make a whole new seperate rule set targeting a new specific element
141
what is a pseudo class?
is used to specify a special state of an element
142
what is a pseudo element?
is used to stylize a special part of the element
143
what is a margin?
a margin is the space from the border going outwards - the higher the margin the more space pushed outwards going away from the edge of the border
144
using padding is mainly used for what?
pushing content off the edge of its own border
145
what is margin mainly used for?
pushing other content away from itself
146
when we add numeric values to the border property what increases or decreases?
the thickness of the border only, it doesn't push or move anything closer or further from it, padding and margin do that
147
what is text align ?
it dictates how the text is formatted in a space
148
what are the some common values to know for text align?
left, right, center and justify, justify-all
149
what does justify mean?
tells the text to fill the entire width of the document so that each line is flush right to the edge, regardless of whether it affects the spacing between words.
it basically makes it into a box, except for the last sentence
150
what is justify all ?
its the same thing as justify except that the last sentence is also justified, meaning that the adjustments in the spacing may be more severe throughout the document.
151
what is border radius?
border radius makes the border curve....0 is a straight box, 100 percent is a complete circle, everything else is varying degrees of rounded edges
152
what is text transform?
specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
153
what are some of the main values that go on the text transform property?
capitalize, lowercase, uppercase
154
what is the difference between uppercase and capitalize?
capitalize, capitalizes every word
| uppercase capitalizes every letter
155
how do we create a pseudo element?
selector/selectors :: pseudo element {
| }
156
how do we create a pseudo class?
selector/selectors: pseudo class {
| }
157
what is ::first-letter ?
is a pseudo element that allows you to put styles on the first letter of the first sentence of a block level element
158
what should we keep in mind when we use ::first-letter?
That punctuation and special characters used before the first letter will also be stylized
159
what is :hover?
this pseudo class allows you to stylize what happens when a user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer)
160
what is the link to link an external css file?
(link rel="stylesheet" type="text/css" href="name of file.css")
161
where do we put the link to the css style sheet?
in the head
162
how do we make a css document?
open note pad or text editor, code up css, save as
| nameOFdocument.css in all files
163
how do you link a css page to a html page?
write out stylesheet link and place the name of the css file as the value for the href attribute
164
how to render the html and css document once linked?
place it in a folder together and open up the html file, it should open up in the web browser rendering the css and html
165
what should the first page of your website or the html you want to load be saved as?
index.html
the browser looks for this one first.
166
what is inline styling?
inline styling is when you style directly into the html code itself
167
why should you avoid inline styling?
because you cant use it on other elements, its a one and done - it only affects that specific line of code that you're coding.
168
what is the separations of concerns?
the separation of concerns is the division of using html for coding the structure and using css to code the presentation and not mixing the two
169
what is internal styling?
internal styling is using a style tag in the html and then coding inside the style element the same way you would in a css file.
170
why should we avoid using internal styling?
because it only styles that particular page, its not as extensive and flexible in usage like we want
171
what is a reason that we would want to use internal styling?
to increase page load speed
172
what is the best way to apply css to your html?
by using external stylesheets - this way you can multiple pages to your html documents and have full control over every aspect of your page
173
in css, if there are two rule sets targeting a specific selector with conflicting rules how does the browser decide which one to render?
it chooses the rule with the higher specificity
HTML
body
div class=box
p
CSS
body.box p {
green}
.box p {
red}
the paragraph will be green because body.box p is more specific than .box p
174
when we have conflicting rules what will we have to do to get our rule rendered?
make it more specific, add more div's if you need to
175
what to look for when you wrote a rule and its not rendering the way you think it should
1. misspellings
2. spaces or lack there of
3. execution of open/close brackets
4. quotations misused
5. value not set/initial value being none
6. rule with a higher specificity
176
what are conditions in reference to css?
conditions are the steps that define specificity - the more conditions the higher the specificity.
for example :
body >main div.modal a {
}
this has 5 conditions and has a very high specificity
a{
}
this only has one condition and is of low specificity
the first rule set would override the second rule set
177
the difference between conditions and selectors?
conditions are part of a selector, conditions specify a selector.
body, footer {
}
these are two separate selectors with one condition each, both of these have low specificity because neither body nor footer are being specified
body > main div.modal a, footer > div.mlb p {
}
these are two selectors with 4/5 conditions each
178
what is the cascade?
a process browsers follow to determine which CSS values get applied for all the properties on a given element
179
what trumps the cascade?
specificity
180
if two rules have the same specificity and are targeting the same element which one gets rendered?
the one lower on the style sheet/or the one that was applied later
181
What is the first step the browser takes to determine what styles to apply to an element?
1. Finds which rules apply to the element
182
What is the second step the browser takes to determine what styles to apply to an element?
2. Takes all the relevant rule sets and sorts them by origin.
183
What do we mean by “origin of a rule set”?
Inline style vs. internal vs. external
184
In sorting the origin of a rule set what overrides others?
Inline styling - it overrides external and importance
185
What is the third step the browser takes to determine what styles to apply to an element?
It takes all the rule sets that
| Have the same origin and importance and sorts them by specificity
186
What is the fourth step the browser takes to determine what styles to apply to an element?
If there are rule sets still conflicting that gave the same origin, importance and specificity ——
Then the browser takes the rule that’s declared last (lower on the style sheet)
187
What does the keyword !important ? And what does it do?
It allows you to override other rules that might have been declared later in the stylesheet or in a different file.
188
Typically if you have to use the keyword !important it is an indication of what?
there is something wrong with your style rules
for instance - you make just need to use a more specific selector
189
what is the basic idea of the box model?
that all elements on a webpage are actually rectangular boxes even if they appear in a different shape or aren't visible
190
what are the 5 aspects of an element that make up its total space?
```
width
height
padding
border
margin
```
191
what is width?
width is the length of the content area horizontally
192
what is the content area?
The content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player.
193
what is height?
height is the length of the content area vertically
194
what happens to height and width when box-sizing is set to border box?
both height and width go from defining the content area to the border area
195
what is the border area?
the area bounded by the border and everything in it
196
what is the formula to calculating the total space of an element?
width +
2x border +
2x padding +
2x margin =
total space
197
Is it possible for the width and height of an element to be different than the one explicitly set in our code?
yes, absolutely. when you set a elements width and height, you are only setting the content area, adding padding and borders will all make it larger than what you have explicitly set
198
how do we get the browser to respect the width and height that we set in our code?
add box-sizing: border-box to the element
199
what do we do if we want all the elements in our code to have their width and height explicitly?
we use the universal selector
* {
box-sizing:border-box
}
200
according to the box model, every element on the page is what? and has what 3 things?
is a rectangular box
and has
1. a height
2. a width
3. content
201
where is the content in an elements rectangular box?
it is in the middle
202
what is content surrounded by in its rectangular box?
by optional elements such as padding, border and margin
203
what is the default width of a block element?
it is the length of the page
204
what is the width of an inline element?
the length of the content
205
which way do block elements flow?
top to bottom they will be on top of one another vertically
206
what is the value name for the default of height and width?
auto
207
what is the default height of an inline element?
the height of the content
208
inline elements flow which way?
from left to right horizontally on the same line
209
most of the time what is done with the height of an element?
its left default/undefined
210
can we apply padding to any html element?
yes, we can
211
can padding take a negative value?
no it cannot
212
when you change the background color of the content area what happens to the padding area?
it changes to the same color as the content area
213
Is margin taken into account when calculating the width and the height of an element?
No it is not, it is considered external space of an element, so we dont consider it apart of the height or the weight.
we do count it towards the elements total space though
214
is margin every visible?
no its always transparent and takes the background image of the parent element
215
do inline boxes (text boxes, links, etc) take up 100 percent of the parent element?
no they do not, their height and weight are generally the size of the content
216
what is a replaced inline element?
it's an element whose dimensions are set outside of the document and is linked to the page externally.
think images, videos etc.
217
what is a non replaced inline element?
it is an inline element thats content is not external but entered into the document itself
218
what tag do we use for a short quote into our html document?
the inline q tag
219
what tag do we use for a longer quote?
the block element, blockquote
220
what is the a css reset?
since different browsers have different default settings developers use CSS resets or CSS normalization to ensure a consistent experience across browsers
221
what is the background-image property and how do we apply it?
it adds background images to a div
background-image: url( image source address);
222
how do we adjust the size of a background image inside of a div?
we use background-size: and set the numerical value for the size with the width going first and the height following or using percentages or keywords.
223
how do we make a background image repeat inside of a div?
we use background-repeat: repeat
or we can use :none; to stop it from repeating
224
what does linear-gradient do?
it sets up a transition that allows the background of an element to go from one color to the next
225
what is the syntax for a simple linear gradient transition?
background: linear-gradient( color , color);
this will set a transistion from one color to the next, this is no adjustment to direction, or transparency or where colors change or more than one color, or background image. Its the most basic linear gradient application
226
what does an element need to have specified in it for a linear gradient to work?
a height
227
what is radial-gradient?
it does the same thing as linear gradient, except its not on a linear line... it starts from the center and radiates outward a cyclicar fashion
228
what does the gradient property work with?
the background property and the background image property, not the background-color property
gradient properties are considered an image
229
the background property is shorthand for what?
background property and background image
230
how many colors can you have inside of the parenthesis for a linear gradient property?
unlimited, just make sure to add a comma in between the colors
231
can there be a space in between linear gradient and the ( )?
no there cant be
232
what is the default direction of linear gradient?
it is top to bottom
233
what is the default starting and finishing points for linear gradient with two colors?
1 color = 0% (is when its pure)
2 color = 100% ( is when its pure)
```
so for example :
linear gradient(red, yellow);
```
means that at
0% of the page (the very top) will be where it is pure red
and
100% of the page ( the very bottom) is where it will be pure yellow
234
in linear gradient when does the transition of color start happening?
immediately, its starts to shift to the next color right away...
so a color thats pure at 0% will start to mix and transition with the next color at 1% and will continue that way until it becomes the next color and the process will repeat it self until the end of the document
235
how do we specify that we want a color to remain pure until a certain part of the document before it starts changing?
you add a percentage after the color
so if you had linear-gradient:(green, yellow)
we know that the green is pure at 0%, but what if we wanted it to be pure for half the page until it started transition.... then you would put ....
linear-gradient:(green 50%, yellow)
this would make the green half the page and transition to yellow in the last half
236
when dealing with linear gradient percentages labeling where they start and stop, do we need to put 0% and 100%?
no the 0 and the 100% are already implied as the start and end of the gradient line respectively
237
do we have to use percentages when using gradients?
No we do not at all - we can use any measurement we want...px's for example
238
what if we wanted to colors to sharply divide between themselves? what if we didnt want a transition at all?
then you make them share the same stopping point...
for example
linear-gradient:(red 50%, yellow 50%) this will make a hard stop in the middle of the page and it will look half red and half yellow
same thing with any percentage or value, it doesnt have to be 50 percent
239
how can we change direction of which way a linear gradient transitions?
you can add a direction inside the parenthesis, with a comma, before the colors
linear-gradient:(to top right, green, yellow);
240
which directions can we apply to a linear gradient property?
to right, to left, to top, to top right, to top left, to bottom right, to bottom left
to bottom (default)
and you can add degrees if you wanted to get more specific
241
what is the measurement in degrees for the default direction (to bottom) for the linear-gradient property?
180 degrees
bottom to top would be 0 degrees
left to right would be 90 degrees
242
besides colors what can gradient property also support as if it was a color?
it can support transparent, which is used just like the a color, it can be used in transition, it can be made half the page.
consider it another color to use, whatever you put behind it will show
243
do we need to add a second color to the linear gradient property if transparent is present inside the parentheses?
no, transparent works just like another color
244
Can we use transparency to stack background images?
yes we can, we can make one part of the image transparent and then add a background image url after the closed parenthesis of the colors section and a comma
linear-gradient:(green, transparent 50%), url (image);
245
how to use rgba syntax
1. place color make sure it works
2. delete color
3. type rgba
4. create parenthasis
5. add 4 zeros with commas inside parenthasis except for last
6. adjust r,g,b, and a
246
what does rgba stand for?
red, green, blue and alpha - the zeros correlate to these colors and opacities
alpha - basically means transparency
247
in the rgba setting for transparency (alpha) which is no transparency which is full transparency?
0 is full transparency, 1 is no transparency
and everything in between are levels so o
0.5 is half transparency
248
when you use rgba's instead of colors does every set of zeros get its own set of parentheses?
yes they do, separated by commas
| 0,0,0,) , (0,0,0,0
249
when applying start and stop measurements to rgba's do we need to add a comma between the parentheses and the number value?
no, the comma will go after the number value unless it is the end of the value otherwise put a semi colon
(0,0,0,0) 45% , (0,0,0,0) 30% ;
250
when adding degrees or directional values to rgba's do we still need to use a comma before the first set of parentheses?
yes when you add degrees or a direction use a comma as you would with a color
(45deg, (0,0,0,0) , (0,0,0,0);
251
what you should keep in mind when trying to make stripes using linear gradient
colors appear in what order you place in the code, so in order to have clear defining stripes you cant just go orange black orange black because that will create a transition on one end or the other.... thats ok if that is the desired effect, but for clear cut stripes you have to
go
black orange orange black black orange orange black black etc
252
what is repeating linear gradient?
repeating linear gradient is the easiest way to make stripes and other patterns without having to repeat over and over again the specific start and stop points
253
can you place both start and stop points for a color at the same time?
yes just add the start and stop percents before the comma as you would the start point
brown blue 25% 50 % red 50% 90% green
blue will start a quarter in and end half way throught the page and then red will take over until it reaches 90 percent and then green will take over
blue and green dont need values because 0 and 100 are always implied
254
what degrees do we need to make it if we wanted to flip the order of 45 degrees when doing a linear gradient?
make it 225 degrees
255
when adding multiple selectors in css what does no spaces between conditions mean as opposed to a comma?
think about it like this:
no space = and
comma = or
.foo.bar = means all elements with .foo AND .bar will get targeted
.foo, .bar= means all elements with EITHER .foo OR .bar will get targeted
256
what do the pseudo elements ::after and ::before do?
they allow you to add content before or after your element
257
when using ::after or ::before what else do you need to render content?
you need to use the content property
content : "what you want added here"
258
how do you create smart quotes?
Use ALT+0145 and ALT+0146 for the left and right single quotation mark or apostrophe, respectively.
Use ALT+0147 and ALT+0148 for the left and right double quotation marks, respectively.
259
how to get rid of the bullet points or numbers in a ul or an ol?
list-type: none
260
what are 5 of the most common pseudo elements for styling anchors (a) tag?
link, visited, hover, focus and active
261
what does visited pseudo element do?
it allows you to style how a link look once its been clicked and the website to the link has been visited
262
what does the link pseudo element do?
it allows you to style how a link look before its been clicked
263
what does the pseudo element hover do?
it allows you to style how an element looks when you hover the cursor or the mouse over it but not activate it
264
what does the pseudo element focus do?
it allows you to style how a link or button looks when you keyboard focus on it
265
what is keyboard focus?
keyboard focus is when users of only a keyboard click on tab and shift + tab to cycle through clickable options on a page along with the directional buttons....when this is activated the clickable items on a page will highlight
266
what does the pseudo element active do?
active is while you're clicking on a link, not before and not after the moment during. Active allows you to style this aspect of it
267
what are radio buttons ?
they are small buttons that allow you to select one option at a time...great for multiple choice questions
268
what are attribute selectors?
using css to target specific attributes and values, regardless of what element they are on
269
how to target an element by its attribute?
element[attribute]{
| }
270
what happens when you add a title attribute to an element?
when you hover over it - what ever value you add to the title attribute will come up
271
what does the button tag do ?
the button tag creates a button
272
what are the three main values for the button tag?
```
submit = that enters information
reset = resets all controls to their initial values
button = doesn't do anything, just acts a place holder
```
273
what is the main attribute to be used with button tag?
type
html example
button type= submit
274
how to target a attribute and value?
[attribute="value"][
}
example
button[type=submit]{
color: red}
275
how to target an element by one keyword anywhere in the value?
[value ~="keyword"]{
}
this word has to be surrounded by blanks in order to be recognized because spaces count as characters
276
when targeting attributes and values is adding the element necessary?
its not necessary for it to work, but it may become necessary once you start working on bigger projects with lots of code
277
how to target attributes that have a specific keyword in the beginning of it ?
[attribute^="keyword"]{
| }
278
when is a time you might want to target particular values that all start with the same keywords?
when youre targeting a href links, for example if you want to target all the ones that start with http as opposed to something found locally on a computer
279
how to target an attributes that have specific keywords in the end of their value?
[attribute$="keyword"]{
| }
280
when is a time you want to target particular values that all end with the same keyword?
if you wanted to target all links that ended with .com as opposed to .gov
281
how to target an attribute that has a specific collection of characters anywhere in its value?
[attribute*="characters"]{
}
usually words not surronded by spaces
this doesnt have to be full words, if you put econ in there it wont just look for econ, it will look for it in between other words as well
so the word second for example would count because it has the combination of characters of "econ" in it
282
when targeting attributes that have a specific collection of characters anywhere in its value, do spaces count as characters?
yes they do, the value of "ird h"
would work for "third helping"
but not "thirdhelping"
the spaces count as characters
283
how do you rotate an image?
transform: rotate(deg)
284
what is the lang attribute?
it goes on the html attribute and sets the language for the web page _ this allows screen readers read it in the appropriate language
285
what is the display property?
the display property determines how the elements box is rendered in the browser
286
what is an inline element?
it is an element that does not start on a new line and its height and width are that of its content. In line elements go left to right
287
what is a block element?
it starts on a new line, and its height and width can be expressily set
288
why should we set max width property for paragraph elements?
because people dont like to read really wide paragraphs so using max width is a common practice
289
block elements width is set to what default?
it will take up the entire width of the parent element it is under.
290
If inline elements go left to right, and block elements go on top of one another, how do we get block elements to go left/right or side by side?
by turning them into inline block elements
291
how do we make a block element an inline block element?
by adding the property and value of
display: inline-block;
292
how do you remove the white space that occurs between a set of inline block elements?
setting font-size to 0 on the parent of a set of inline block elements removes white space between them.
293
what happens when you put two inline elements one after the other on different lines?
the browser renders the line break as just a space and puts the two inline elements on the same line
294
can you set inline elements to behave like block elements and vice versa?
yes you can. this is a good strategy when you want to use a particular element because it is semantically correct, but its default display is not what your designs call for.
295
what is a common place you will see a block element changed into a inline element
links that appear in a nav bar. By default, both unordered lists and list items are block-level elements, but by setting their display property to inline-block, you can get them to display side- by-side in the nav.
296
how do we center horizontally a block element?
by adding
margin-left: auto
margin -right: auto
297
when you use margin-left: auto and margin-right: auto the block level element gets put in the center of what?
the parent element
298
how do we horizontally center a inline element inside of a block element?
text-align: center;
299
can we use text-align to move non text inline elements?
absolutely, for example you can use it for images
300
when creating like features on a page that are similar but will be different, what can you do besides adding extra classes?
add names to the class name
```
instead of
div class = design
div = top row
div= box 1
div = box 2
```
you can eliminate the top row div by simply going
div class=design
div = top box 1
div = top box 2
301
what are forms?
forms are containers that hold a set of inputs
302
what are inputs?
are individual components that a user interacts with - typically corresponding to a single data point. HTML provides numerous input types (text, email, number, password, etc.)
303
what is the form tag?
the form tag wraps all of the labels and inputs.
think of it as the html element of the form, everything has to go inside of it
304
what do you want to make sure that you set on a form tag?
the method and action attributes
305
why must we ensure that we set the method and the action attributes in a form tag?
This will ensure user input can be submitted even if JavaScript is disabled or breaks.
306
what is the action attribute in a form tag do?
The action attribute is the URL of the server endpoint that submitted form data should be sent to
307
what is the method attribute in a form tag do?
The method attribute is the request method that the browser should use when sending the data to the server.
308
what are the two methods you can use in a form tag?
method="post"
and
methos="get"
309
what is the method we are mostly going to use at this point in time in a form tag?
we will use the post method
310
what is the fieldset tag?
The fieldset element is used to group together related inputs and labels such as contact info, employment history etc
311
what to remember about fieldsets?
they have default styling that you might have to override
312
what is the point of the fieldset tag and its default styling?
they help web crawlers and screen readers understand how inputs are grouped together (even if this is not revealed visually to sighted users).
313
what is the legend element?
he legend element is like a title for the fieldset. For screen readers, it adds extra context to the inputs in the fieldset. For instance, when a screen reader user arrives at the "First name" input, they will hear something like, "First name, edit text, Contact info".
314
when we have single input for a single topic do we need to use fieldset tag?
no, the point of fieldsets are to group sets of input together so they dont serve much benefit if there is only one possible input
315
what is an example of a top with only one input?
if you have a single question with multiple choice answer. there single answer will only be one input, so if this is all you have then there would be no point in making a seperate fieldset tag
316
if we have one input for one topic, what should we use instead of a fieldset?
just use a label, one label for one topic is enough
317
what are type=text inputs?
they are inputs that accept text
318
what does a label tag do?
a label tells humans and webcrawlers and screen readers what an input is for
(label for="first-name")First name (/label)
319
what attribute do you need to use with the label tag ?
for=
320
what should you set for the value of the "for" attribute on the label tag?
it should be the ID of the value that the input is for
| label for="first-name")First name (/label
(input id="first-name")
321
do label tags need a closing tag?
yes they do
322
do input tags need a closing tag?
no they dont
323
why should you set the value of the "for" attribute to the ID of the input element?
because label association wont work without it
324
what does label association do ?
This association is what makes inputs take focus when you click on their labels, as we mentioned above.
325
can you wrap the input element in the label element?
yes you can,
| label)First name
(input id="first-name" type="text"
(/label)
326
what must you do if you want to wrap the input tag inside the label tag?
omit the for attritbute
| label)First name
(input id="first-name" type="text"
(/label)
327
how does wrapping an input element in a label element affect a right margin?
if you set a right margin on a label wrapping an input, that margin right will appear to come after the input, not the label.
328
what is a placeholder attribute on an input element?
placeholder is used to set text that initially displays before the user has input any data. Typically, placeholders are used for example entries, and usually, they're styled to be lighter than user input text
329
can we placeholders in place of labels?
Because they are meant to offer examples of desired input, they should not be used in place of labels.
330
what is a required attribute on a input element?
indicate that an input must be filled out
331
what is the pattern attribute on an input element?
is used to supply regular expression patterns that the user's input must match in order to be valid.
For example, we can use this to require that the phone number entry consists of only numbers, and optionally dashes.
332
what is the type attribute do on an input element
his attribute determines how the element looks and how its validation works. For instance, an input with type='email' will be valid if the user inputs text that has an @ with text before and after.
333
what are some ways that input types affect accessibility?
Input types also provide some accessibility by dictating the kind of keyboard a smartphone will display for a user: number inputs will show only the number pad; email inputs will show a keyboard with the @ symbol in a prominent place.
334
how do we get a "pick one and only one" behavior from inputs of a radio type?
you use the same "name" attribute with the same value on all the options
335
what is the select element?
the select element is used much like the ul/ol element - it provides a list of options to choose from
336
what is the option element?
are individual options - they work much in the same way li's do - they are wrapped in a select element
337
how do we preselect an option in a form?
add the attribute selected in the opening tag of the option element
338
what is the optgroup element?
it is a way to group large amounts of options under a given name, this is used to large lists of options
339
what should you always remember about designing forms?
keep them short and simple and to the point, the longer and more convoluted they are - the less likely someone will finish them. which is the point of a form in the first place.
340
how do you disable the default stylings set for the fieldset element?
```
fieldset {
padding: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
border: none;
```
341
what is the position property mainly about?
its mainly about the flow of the element in a html document
342
what are the 4 most common values for position property?
static, fixed, relative and absolute
343
what is the default setting for the position property?
static
344
what is static value mean?
means the element will have normal flow
345
what is normal flow?
block-level elements get rendered in the same order that they appear in the HTML markup, one on top of another, starting from the top left corner of the document, and inline elements stretch as wide as their inside content (usually text).
346
what is the fixed value mean?
When an element's position is set to fixed, it will stay in place even when the user scrolls. Fixed elements are taken out of the normal flow, and other elements will position themselves as if the fixed element does not exist
347
an example of a good time to use a fixed value
For navbars or footers that you want to remain stuck to the top or bottom of the screen, this is often the best approach.
348
what is the viewport?
the area of a browser's window in which web content can be seen
349
what are the four offset properties?
top, bottom, left, right
350
what elements can the offset properties be set to?
to elements that have been set to fixed, absolute or relative
351
what elements can offsets not be set to?
elements set to static, or elements not defined (which are static because static is the default)
352
how do you set which direction you want your element to go using offsets?
you want to put the numerical value according to where you want the element to move away from - not in the direction in which you want it to go.
if you want to make something 20px's from the top you but top:20px
353
what is the relative value?
the relative value is also in normal flow but you can set the offsets such as left right top and bottom
354
When an element is set to relative does it affect the positioning of any other elements?
no it doesn't, all the other elements act as if the element is not offset
355
what is the absolute value?
absolute elements are outside the normal flow and can be offset, but unlike fixed elements, they are offset in relation to the first parent container with a non-static position.
356
what is a common use of the absolute value?
A common use case for absolute positioning is when you have a navbar where you want to align a logo to the left and a set of links to the right,
357
what should we keep in mind about elements with an absolute positioning ?
it will be a child of another element so it will start inside of another element and will be moved and location in relation to that parent element
358
what is the primary use for the float property?
to wrap text around an image or any other container
359
what happens when we apply float to an image?
it takes it out of normal flow and pushes it to whatever direction you set the value to
float: right will push the images to the right and the text will wrap around it to the left
360
what happens when you have more than one floated element next to each other?
they stack horizontally provided there is space left in the parent element?
361
what happens if you have multiple floated elements next to each other but there is no more room in the parent element for them to stack horizontally?
they will go on to the next line
362
what is the clear property?
the clear property allows an element that does not recognize that is next to a floated element that it is next to one and moves it to the next available line
363
when do we need to use the clear property?
since float takes elements out of normal flow, elements around it will behave as if they are not there, so sometimes other elements will be on teh same line as floated elements, adding clear to the elements on the same line as the floated elements will move them off the same line
364
when you create a nav element, what is the first thing you should put in there before anything else?
links or a div containing links - anything else creates a white space between the nav bar and top of the page
365
how do you get rid of underlines on a link?
add the property and value
| text-decoration:none;
366
when taking the underline off of links can you take them off in a group?
no you have to apply the text -decoration: none; separately
367
how can you adjust the spacing between letters in a word?
with the letter-spacing property
368
can negative properties be used with the letter spacing property ?
yes you can, this makes the space smaller?
369
what to do when border radius makes your edges look boxy?
instead of using percentages use pixels instead
370
how to specify a particular class of links to change the font?
put the element name before a:link
parent a:link
371
what is a responsive layout?
it is a layout that responds or adjusts to the size of the screen
372
how do we use flexbox?
define a flex container by using with the css property display: flex
373
what can be made into a flex container?
any element on a html page including the body
374
what are flex items?
all direct children of a flex container
375
what items will be arranged by flexbox?
flex items
376
what are the two ways in which a flex box is managed?
by specifying the behavior of the flex box or specifying the behavior of the flex items
377
what 3 main properties control a flex container?
flex direction:
justify content:
align items:
378
what is flex direction?
describes the main axis of the container.
379
what is the main axis?
the line that goes through a document in which content is laid out.....if the main axis is set horizontally, the content will go left to right or right to left... if the main axis is set vertically, the content will go top to bottom or bottom to top
380
regardless of flex direction what does every flex container have?
a start and an end
381
by default how are items added to the flex container?
from the start of the container towards the end
382
what 4 values does flex-direction take?
Row
row-reverse
column
column-reverse
383
what is the row value do?
items are laid out from left to right
384
what is the default for flex direction?
row
385
what does the value row-reverse do?
items are laid out from right to left
386
what does the value column do?
items are laid out from top to bottom
387
what does the value column-reverse do?
items are laid up from bottom to top
388
what is justify-content?
it describes how items are arranged on the main axis
389
what three positional values for the justify content property?
center
flex-start
flex-end
390
what do the positional values center, flex-start and flex-end used for?
hese specify how elements are packed in the container, from the center, start or end respectively
391
when can you use the additional values space-between,
| space-around and space-evenly for justify content?
when you have more than one item in the flex container
392
what do space-around, space-between and space-evenly do?
Each of these describes how to distribute the extra space not taken up by the items themselves.
393
what is the cross axis?
the cross axis is the axis perpendicular to the main axis.
394
what is the align-items property?
it is used to adjust how items are laid out along the cross axis
395
what positional values can you set to the align-items property?
you can also add
center,
flex-end
flex-start
396
can justify content and align items be used on the same container?
yes justify content adjusts location of content on main axis.
align items adjusts location of content on cross axis
397
what is the align-self property?
this allows you to adjust an individual item in the flex container - you add it to the item itself in css
398
what values does the align-self property take?
same as align items and justify content
center,
flex-end
flex-start
399
when creating a design should you design with mobile devices in mind first or computers?
you should design for mobile first and adjust off that
400
what is graceful degradation?
process of creating a layout where you start with the most complex layout and as many features as you like, then try to remove features and rearrange elements to fit on a smaller screen. This approach is known as graceful degradation.
401
what is progressive enhancement?
design the page to work on the smallest screen first, then progressively add features and rearrange the layout to take advantage of the larger screen sizes
402
what is progressive enhancement also known as?
mobile first design
403
how to inspect what a website will look like on a mobile phone but on a computer using dev tools?
Choose a page, and open DevTools. Make sure you're on the "Elements" tab. At the top left, right by the list of tabs, you'll see an icon to "Toggle device toolbar". Click it.
404
should you 100 percent use chrome dev tools to see how your web page looks on a device?
no because they arent a 100 percent accurate, you should always check on an actual device if you can -but dev tools is good if you dont have an available device
405
what is a media query used for?
to create different styles for different screen conditions
406
what does a media query consist of?
a media type and any number of media features
407
what is the basic syntax for a media query?
@media (media type) () {
(CSS Rules)
}
408
what can be set as media types?
all, print, screen, or speech
409
what are some popular media features that a media query can be set to?
The list of media features is long but a few examples are:
width
height
orientation
color
410
what is a burger icon?
a burger icon is the three thick horizontal lines that signify a drop down menu on mobile apps
411
do we use traditional nav bars on mobile devices?
its customary to use a burger icon to create drop down nav apps on mobile devices
412
What is the break point?
The break point the point in which we want to modify the layout from the mobile design to the large design
413
How do we find the break point?
Start with a smallest screen size and then slowly increase the width until the layout:
1. Starts to look awkward
2. Has enough space for a horizontal layout
414
what is flex-grow:?
specifies how items grow relative to each other to occupy available space
415
what is flex-basis:?
sets the initial size of an item in a flex -container
basically it sets the width of an item in a flex container and is the starting point from which flex grow and flex shrink take place
416
what is flex-shrink?
tells how much an item shrinks when put into a smaller viewport
417
what are the values for flex-grow and flex-shrink?
1-3
418
what is the value of flex-basis?
a distance ie something measured in px's or something similar
419
what is the shorthand for the flex properties?
flex:
420
how can the flex values be consolidated?
grow- shrink- basis
flex-grow: 0;
flex-shrink: 0;
flex-basis: 120px;
can become
flex: 0 0 120px;
421
what does space-between do ?
this evenly dispurces the space evenly between items - but pushes items along the borders
422
what does space around do?
this puts the equal amount of space around an item on both sides, so these items will be pushed off the side of the border of the container
423
does space around look equally spread out?
no it will not look equally spread out, items in the middle will look like they have more space because the space that is divided equally is going on the sides of the items ....so two items next to one another both have space assigned to them so it will look like double space in between them where along the edges there will be a single space
424
what does space evenly do?
items are distributed so that the spacing between any two items and the space to the edges is equal
425
does a flex container naturally wrap to the next line?
no it doesn't , it is naturally set to no wrap, so everything in a container will go along the main axis forever and ever until there is no content
426
how do we get a flex container to wrap?
flex-wrap:
427
what are the values for flex-wrap:?
nowrap, wrap, wrap-reverse
428
how to center all items along the cross axis in a flex container?
add align-items:center; to the flex container
429
what is javascript?
its a piece of software that lives inside your browser that can control its environment and do lots of different things
"the implementation of the ecma script standard"
430
What is the v8 engine?
it is the most popular version of Javascript
431
what is the ecma script?
is the standard/uniform regulations that make up javascript.
like how all cars have a steering wheel and gas is on the right and brake is on the left ....all of these are standards
432
what are the two things ecma script define?
the engine and the language
433
what are variables used for?
are used to create and represent data in our applications
434
what do you use when you want to create data?
a variable
435
what do you use when you want to make data do something what do you use?
functions
436
what are 7 of the basic data types that javascript understand?
```
number
string
boolean
null
undefined
symbol
objects
```
437
can we create custom types of data?
yes of course
438
whats the difference between undefined and not defined?
not defined is when the engine cannot find the variable name, undefined is when the engine can find the variable name but cannot fine a value associated with it
439
when a user doesn't give a variable a value, what is the initial value of all variables in the ecma standard?
undefined
440
what is a var keyword?
var sets a variable
var x = 3
441
if we intentionally want to not set a value for a variable, should we set it to undefined?
No, in general we should set it to null and let the engine tell us when something is undefined, this way we know that we forgot to set a variable and need to go back into our code and set a value for something
442
what are complex data types?
functions, arrays and custom data types
443
at the end of the day what category of basic data types do the complex data types fall under?
they fall under objects, they are just objects with special features.
like function is an object that does something
444
what does calling a function mean?
it means calling it to perform the action that you set it to do
445
what is the syntax of calling a function?
identifier( )
example:
kick( )
446
What is the if/else block?
If - is used to specify a type of code to be executed if the the condition is true
Else - is used to specify a type of code to executed if the condition is false
447
What is the information between curly brackets known as?
A block
448
Are there conditions where you just use the conditional “if”?
Yes
449
What is the else if conditional?
It’s a way to specify a new condition to test if the first condition is false
450
What is a switch statement?
A way to specify many different alternative blocks of code to be executed depending on the condition
One way to keep code clean instead of writing a million different else if conditions
451
What is an operator?
Operators are used to assign values, compare values
452
What are the basic categories of operators?
```
Arithmetic
Assignment
String
Comparison
Logical
Ternary
```
453
What does typeof keyword do?
Tells you the day type of a value
454
what is the difference between var and let?
let is the newer in date version. Var is the old version, don't use it anymore
455
what is the difference between let and const?
let names a variable that can be changed at any time
const names a variable that will not be changed
456
what is the syntax for creating a const?
const identifier = value
const myBirthday = 71086
457
what happens if you try to reassign the value to a previously set const?
it will come back as an error
458
what is the assignment operator?
it is the equal sign, it assigns a value to an identifier
459
can we assign an identifier name without giving it a value?
yes, by using let or var
let myBirthday;
460
can you assign an identifier name without giving it a value using const?
no you cant.
461
how do you later assign a value to an identifier without a name?
identifier = value
462
what will be assigned as a value to a identifier that hasn't been defined by the developer?
undefined
463
what are reserved words?
reserved words are words that are already stored with meaning in a program language that cant be used as a variable name a keyword or a identifier
for example you cant use var var = 3
var is already assigned and understood by the engine
464
exception to the rule when using reserved words in a variable name
you can use a reserved word inside of a variable name
for example
you can use var varname = 4
although it would be redundant
465
character restrictions in using variable names
every variable has to begin with an upper or lower case letter an _ or a $
466
where in a variable name can you use numbers?
in the middle or the end, anywhere but the beginning
467
can spaces live in the variable name?
no, no spaces anywhere
468
can comparison or logical operators be used in variable names?
no not at all
469
what are stylistic restrictions when making variable names?
they are restrictions that if you dont follow will not break your code, but it will cause it to look funny and hard to read for other coders or developers working on your program.
470
what technique should we use when we are creating variable names?
camel-casing
471
what is camel casing?
camel casing is when you start with a lowercase word and then every word after that has the first letter capitalized
472
when choosing a name for the variables what should we do?
when we choose variable names in JavaScript, we should choose names that reflect how the variable gets used in the program. A well-chosen variable name can help other people reading the code to understand how the variable is intended to be used.
473
how can we ensure that we dont use global variables?
we can assign strict mode at the top of our java file
this is recommended to be used at the top of all your java files unless you have a reason not to
474
how do we apply strict mode to our java file ?
'use strict';
475
what is an integer number?
a whole number with no decimals
476
what is a float number?
a number with a decimal
477
what is null?
null is a special value used to indicate that a variable has no value
478
when you use typeof on null what comes back?
it comes back as an object, this is a mistake in javascript that hasnt been fixed in the new version
479
what are booleans?
they work with conditionals using one type of code if a value is true and another type if it is false
480
what does the ! signify in a boolean?
it inverts the true and false value
so !true evaluates to false
and
!false evaluates to true
481
what is coercion?
this is when you use an operator to combine two different data types java will force them together in one data type
482
what does the built in alert function do in javascript?
it takes the text you put inside the parentheses and puts in a pop up window when activated
alert('Hello from JavaScript Land');
483
what is a parameter?
it is the variable that holds the place for an argument
484
what is alerts main responsibility?
display a pop up window to the user with a message in it
485
How many arguments does alert take?
One. the text you want to appear in the window
486
what does determinate mean?
Given the same inputs on separate invocations, the result should be exactly the same. No matter what else is happening in your program
487
when we define a function does it automatically run?
defining a function and calling/invoking it are separate things, and when you define a function, the code isn't automatically run
488
if you create a function to multiply only two numbers and you add more than two numbers when you run the code what will happen?
it will run the function as you asked only taking into account the first two numbers you placed, it will act as if the other numbers aren't there. It wont break the code or show up as an error but it will not compute them either
489
what does parse mean?
when a browser reads code
490
what are fat arrows?
=> <=
491
how can we use fat arrows to create a function with a function expression?
```
const add = (num1, num2) => num1 + num2;
add(2, 3);
```
this would be the same as
```
const addAlt = function(num1, num2) {
return num1 + num2;
}
```
492
if creating a multi line function with fat arrows, what two things do we need to make sure we include?
you need to add curly brackets around the action part of the code.
and if the code is meant to return a value, add the keyword return.
```
const add = (num1, num2) => {
console.log('Adding', num1, num2);
return num1 + num2;
};
```
493
do fat arrows need parameters when used to make functions?
no they don't need parameters simply use empty parens followed by the arrow
const alertMe = () => alert("You've been alerted!");
494
what are parens?
they are short hand for parenthesis
495
When defining a arrow function that has a single parameter do we need parens?
When defining an arrow function that takes a single parameter, the parentheses are optional:
const isEven = num => num % 2 === 0;
// same as
const isEvenAlt = (num) => num % 2 === 0;
496
what is concatenation?
JavaScript lets us use the + operator to concatenate — which just means "connect" — 2 strings into a bigger one.
497
what is the difference between concatenation and coercion?
concatenation is two strings being connected together, coercion is when two different data types are made into one
498
what if you wanted to use double quotes inside a string that is already using double quotes to say it is a string?
you add a back slash before the inner quotes
```
const heSaid = "He said, \"Foo!\"";
console.log(heSaid); // => He said, "Foo!"
```
499
what does \t do inside of a string?
creates a tab sized space in between the two words
500
what does \n do inside of a string?
it put what comes after it on a new line
501
what is the maximum character count you should have on one line of code?
80 characters
502
if you have a string that is longer than 80 characters what two things can you do?
1. you can add a \ and continue it to get it to go to the next line.
2. you can close the string and add a + and start another string on the next line
```
const element = '
The quick brown fox jumps over the lazy dog. The \ quick brown fox jumps over the lazy dog. The quick brown fox jumps over \ the lazy dog.
'; ``` same as: ``` const element2 = 'The quick brown fox jumps over the lazy dog. The quick ' + 'brown fox jumps over the lazy dog. The quick brown fox jumps over the ' + 'lazy dog.
'; ```
503
how can we use === with strings?
we can use it to compare to see if they are identical
```
const string1 = 'foo';
const string2 = 'foo';
const string3 = 'bar';
```
string1 === string2; // => true
string2 === string3; // => false
504
What are Template strings?
Template strings give us a way to refer to variables and execute JavaScript code inside of a string
505
How do you indicate a a template string?
Template strings are indicated by surrounding text between opening and closing backticks (`).
506
How do you execute code inside a template string?
Inside a template string, you can refer to variables or execute code by using ${}.
507
What are regular strings full name?
Literal string
508
If using literal strings to write html what would you need If adding more than one line?
you would have to use concatenation (with +) to keep it looking neat.
```
const badArtTips = (
'
How to draw an owl:
' + '- ' +
'
- Draw a circle ' + '
- Draw the rest of the owl ' + '
509
When using template lines to write html do we need to concatenate?
With template literals, we do not need to concatenate.
```
const badArtTips = (
`
How to draw an owl:
- Draw a circle
- Draw the rest of the owl
510
what are the two different forms of the data type "numbers"?
integers and floats
511
What are arithmetic operators ?
they are operators that can manipulate numbers
512
what are the 6 arithmetic operators?
```
addition
subtraction
multiplication
division
exponentiation
remainder
```
513
what do compound operators allow us to do?
They allow us to change the number value of variable and save the new value to the variable
counter = 1
counter += 9
This will make the variable have a new value of 10
514
what does ++ signify when using number data types in JS?
it increases the value by 1
515
where can ++ be placed on the data type name?
either before or after
++ counter
counter ++
are both valid
516
whats the difference between the postfix and prefix ++ operators?
when you make it the value assigned to another variable name the value of the new the variable will be the same as the original for the postfix ++
in the prefix ++ both the new variable name and the value will be increased by 1.
x = 1 and y = 1
```
prefix = ++x
postfix = y++
```
```
the result will be
prefix = 2
x = 2
postfix = 1
y = 2
```
in the prefix the incrementation happens before a value is returned, in the postfix the incrementation happens after the value is returned (meaning the new variable name will have the same value as the original value before incremenation was rendered
517
what is the order of operations in JS?
PEMDAS
518
what is >=
greater than or equal to
519
what is ===
equal to
520
what is !==
not equal
521
what to remember about the % operator
that it is a operator and isnt apart of the value. You use it the same way you would use the addition or multiplication sign
522
what to remember about using pemdas
make sure that you are using parens correctly to accurately write your code
523
What does double ampersand mean and what is it used for?
it means "and"
| double ampersand evaluates to true if the values on both sides of the operator evaluate to true
524
what does the boolean function do ?
Boolean function, which is used to convert a value into either true or false
525
What are "falsy" values?
the values other than false that evaluate to false when coerced to a boolean):
526
what values are "falsy"?
```
Boolean(false);
Boolean(""); // empty string
Boolean(0);
Boolean(null);
Boolean(undefined);
Boolean(NaN);
```
527
If a boolean doesnt have a falsy value inside of its parens then what value does it return?
a true
528
what does || mean and what does it do?
it means "or"
| || evaluates to true if one of the values evaluate to true.
529
What does ! do?
negates a boolean value so !true evaluates to false, and !false evaluates to true.
530
What are the two Boolean values?
True and False
531
What is the strict equality operator?
===
532
What does the strict equality do? What does it look for?
it looks to see if on both sides of the operator share the same data type and the same value
5 === 5 will return true because they are both numbers and they have the same value
5=== 3 + 2 will also be true
5 === five
will be false because, although they both mean 5 one is a number and the other is a string
533
what is the normal equality operator?
==
534
what does the normal equality operator do? what does it look for?
This looks just to see if the values are the same without taking into account the data types
1 == "hello"
this will be true, because neither one of these values are "falsy" boolean values, therefor Boolean returns them both as true and they are equal so the value will be returned as true
535
how should we think about conditional keywords as far as what it means?
if --- ( if this.....do that)
else if --- ( then if this......do that too)
else --- (if not..... then just do this instead)
536
what is a common pattern using conditionals?
setting a value to null (purposely undefined) and then setting a conditional that will define it given a specific circumstance.
```
let myVar = null;
if (conditional "if this statement is true") {
myVar = 'something other than default';
}
```
537
What are the three keywords that we use in dealing with errors?
try, catch, finally
538
what is the try block?
it allows us to specify a block of behavior that is to be tried (the try block) in the event of an error
539
what is the catch block?
If the try block does not succeed, the behavior in the catch block runs.
540
what is the finally block?
And in either the success or failure case of the catch block , the instructions in the finally block will run.
541
can the catch and try block be used without the finally block?
yes it can
542
what does an error object contain?
it contains information about an error that occurs
543
what should you name your error parameters in the catch block?
name it e or err because these are conventions
544
what is throw keyword do?
intentionally cause an error for bugging purposes
545
what is a caught error?
a caught error is an error that has a catch block assigned to it, this type of error will have the catch block ran and will not stop code execution
546
what is an uncaught error?
an error that doesn't have a catch block assigned to it and this type of error will stop code execution dead in its tracks
547
what is declaring a variable?
giving a variable a name
var name
548
what is assigning a variable?
giving the variable name a value
var name = rashaan
549
What’s the opening comment out tag for html?
! - -
550
What is the closing tag for commenting out in html
- - >
551
How to you create an internal link between websites?
1. Use # and create a name to work as the url of the href
a href = “#contact-us”> info < a
2. Use that same name as the id for that element
p id = “contact-us”
552
What is a dead link? What is it’s purpose?
Sometimes you want to create a link even though you don’t know where it’s going just yet - in this case you create a dead link
553
How do you create a dead link?
a href = “#”
554
Can you make images a link?
Yes by nesting them inside of anchor tag
555
what is font degradation ?
when you set up a font in CSS for a particular element but the browser doesnt recognize that font or support it it returns to a default font
556
how can you set up a secondary font in case of font degradation ?
add a comma and a second font
p {
font-family: roman, lobster;
}
557
can you add multiple classes to an element?
yes you can.
558
how do you add multiple classes to an element?
put a space between the two classes and enclose them within one set of quotes
p = class 'happy gilmore'
happy is a class and gilmore is a different class
559
what happens when you set an elements margin to a negative number?
it grows larger
560
what is clockwise notation?
instead of using specific sides to set the deminsions of elements like border or padding, just using one shorthand property and where the numbers represent a side in a clock wise fashion.
padding, top right bottom left
padding 20px 30px 40px 50px
561
do you need commas in clockwise notation?
no you do not
562
what is grey box wireframing?
Greybox wireframes are used to prototype basic functionality. We don't consider logos, colors, or dynamic effects. Instead, greyboxing emphasizes defining content types and hierarchy.
563
What does the error 'cannot access variable name before initialization mean'? and how can you fix it?
Generally, it means that you are trying to define something while using itself inside of the definition. (
example
```
let item = array.map(function(x){
item + 2;}
```
this will cause this type of error. Because you are trying to set the name item to the value of the map method and the value of the function, but since item hasnt been set yet, when it gets to the part of the function and comes across item, it sends an error because item has no value, so it gets stuck like 'what do i add two to'?
you would have adjust the function so that item is defined and given an value and in a seperate line of code, access it
564
How do you add the text on an input type= 'button' ?
you add the attribute value ="text here"
565
when you have a button tag inside of a form tag what will be the default type and function of the button?
it will have default submit functionality meaning it will automatically try to submit info to the server even if one isnt present
