Free Code Camp Flashcards
what does target=”blank on a link mean?
it means that when you click on a link it opens in a new window
how do you create an internal link to another section of the website?
on the href of the a tag…. you add the id of the section you want to go to
a href=#contactsPage
how do wwe comment out in html? (non shortcut)
basically two arrows using dashes, the first set gets an exclamation point
how do you make an image a link?
nest the img tag inside of an anchor tag
a href >
img src />
/a>
What does HTML stand for?
Hyper Text Markup Language
Using the analogy of a body, what is HTML?
The bones of the body.
h1 is the first h tag, what is the lowest ?
it goes from h1 - h6
What is the purpose of h1 - h6 tags
Tells the browser about the structure of your page
h1 is specifically used for what?
Main heading of page
h2 is specifically used for what?
sub headings on page
h3 - h6 is specifically used for what?
for different sections on the page
What does every img tag need?
an alt tag
What does an alt tag do? What is the purpose?
In the event that a picture doesnt load, the alt tag’s text will be displayed so we will still know what it is.
What is the difference between an ul and an ol tag? And what do they stand for?
The ul, is an unordered list - meaning that the order of the list item doesnt matter. The list items are bulleted.
The ol, is an ordered list - meaning that the order of the list items does matter. The list items are numbered.
When do you use an input tag?
When you want the user to input information, or you want to gather information from the user.
What type of input do you use when you want the user to enter text?
input type =”text”
What do we want to wrap a collection of our inputs in?
a form tag
What attribute do we want to place on a form tag? And what does its value do?
action =
its value tells the form what to do with the information that has been input by the user.
How does a form tag know when the user is done entering information inside of the input tags it contains?
The best practice is a submit button that a user can click at the end of the form. This will trigger the action attribute on the form tag.
button type=”submit”
What is the required attribute on an input tag do? And When do we want to use it?
It makes an input box required to be filled for the submit button to work.
What are radio buttons and how do you render them?
Radio buttons are for when you want the user to pick only one answer out of a list of choices.
input type=”radio”
What should we always nest our radio and checkboxes inputs in ?
a label tag
What do label tags do?
a label renders the name of the choice to the user so they can see what they are clicking.
What happens if you dont use label tags on checkboxes and radio buttons?
The boxes and buttons will have no names for the user so he or she will not be able to make a selection because they wont know what they are actually choosing. It’s pointless without labels
All radio button inputs must share the same type=”radio” and what other attribute?
They must share the same name attribute, this way the page knows that only one of the buttons can be selected at a time. If buttons dont have the same name multiple ones can be selected at the same time, thus defeating the purpose of radio buttons in the first place
input type =”radio” name=”gender”
input type =”radio” name=”gender”
Whats the difference between radio buttons and checkboxes?
With radio boxes you check one of a group.
With checkboxes you can select one or more. Or you can select none
All input tags should have at least what four attributes?
type name id {always}
value {for react and changing state in react}
What is the checked attribute and what type of inputs does it go on?
It sets particular buttons to be already checked by default. The user would have to click it to uncheck it or check another option to change it if it were incorrect.
It goes on radio inputs and checkbox inputs
What does CSS stand for?
Cascading Style Sheets
What is the DOM stand for?
Document Object Model
What is Inline Styling?
It is styling an HTML element directly in the HTML line of code.
What attribute do we add to the HTML element in order to add inline styling?
style=” “
How do we apply the value to a style tag?
style= “ name : value “
style=”color: red”
What does the CSS property ‘color’ do?
It sets the color of the text of an element
What is Internal Styling?
It is styling an HTML element inside the HMTL file but not inside of the line. You do it the same way as you would style it externally except that you wrap the styling in a style tag.
style >
h1 {
color: blue
}
/style>
What CSS property changes the font?
font-family:
What tag and attribute combination do we use to import fonts/stylesheets to our HMTL page?
link href />
What is the head tag?
The Head tag is where we place all our meta data about our page, like the stylesheets and fonts and tltles etc. Not the actual content that will be rendered.
What is the Title tag?
The Title tag is the name of page. It is the name or the content that shows up on the tab when the page opens. Usually goes along with a logo
How do you add multiple fonts to a font-family and why would you do that?
You add a comma between the names of the fonts
font-family: helvitica, sans-serif
You would do this to basically say….if the first font is there - use that. If not, use the other. If neither is there then your browser will assign a default font.
How do we make any border into a perfect circle?
border-radius : 50%
What does the CSS property Padding do?
It increases the space between the content of an element and its borders on all sides.
p {
padding : 20px
}
this will push the borders on the top, left, right, and bottom away from the paragraph text.
What happens if you set the padding of an element ‘s content to a value less than the established width or height already assigned?
You wont see a difference in appearance. The padding will get bigger still, but you wont see it because it wont actually affect the border at all because the border is already farther out
What is the CSS property Margin do?
It increases the space between the border of the element and other elements on the page
What is the operating order of Clockwise Notation?
top, right, bottom, left (like a clock)
What is the name of setting 4 numeric values to a CSS property like border to an element?
Clockwise Notation.
What is Inheritance in CSS?
When an element has no specific styling in regards to a particular aspect of its appearance and adopts or inherits styling from a parent element or grandparent that it is nested in.
When you have contradictory styling on a HTML element, which styling is going to get applied?
The more specified element
When you have contradictory styling on a HTML element, AND they have the same specificity which styling is going to get applied?
The style rule that is lower on the style-sheet.
It gets read in the code last so it gets applied to the DOM last so its the one that you see,
If your HTML element has multiple classes with contradictory styling declarations, does the order of these classes in the element code affect which style gets rendered?
No the order of the classes and how they are listed and applied to the element have no bearing on which style gets rendered. In this case, the style that is lower in the style sheet is the one that will get rendered.
If you have contradictory styling declarations on an HTML element, lets say one set rules on a class and another on an id , which style will get rendered?
The Id style will get rendered because it is more specific than class
When it comes to CSS styling, what overrides any other type of CSS rules being declared on the element?
Inline Styling.
Hard coding the element with a style attribute will override any CSS assigned through internal or external stylings.
What CSS keyword can you use to get CSS to ignore normal Override Rules and apply a particular CSS declaration?
!important
p {
color: red !important
}
When setting a CSS value for any one of the color properties, how does RGB work?
rgb( red, green, blue, transparency)
In a RGB value what is the lowest and highest possible values for the Red, Green and Blue values?
0 minimum
255 is the maximum.
Theres 256 values all together with the counting beginning at 0.
What is the RGB value for the color black?
color: rgb( 0,0,0)
What is the RGB value for the color white?
color: rgb(255, 255, 255)
Which CSS property do we use to adjust the text of an element?
text-align:
example:
h1 {
text-align: center;
What does the CSS value justify do?
Stretches the lines so that each line has equal width (like in newspapers and magazines) except the last line.
How do you make something bold text?
By adding a strong text around the text
or adding font-weight: bold to it in CSS
How do you make something underlined?
use the u tag
or
text–decoration: underline in CSS
How do you make text italicized?
use the em tag
or
font-style: italic in CSS
How do you make text with a line cutting through it (strike-through text?
use the del tag
or
text-decoration: line-through
What does the hr tag do?
Its a self closing tag that creates a horizontal line that goes across the length of its containing element.
This is good for sectioning off different topics or sections
In RGB, we know that it stands for red, green and blue, but what is the name of the section that controls transparency?
Alpha
rgba( 0,0,0,0.1)
In RGBA what is the range of possible values for Alpha?
0 - 1
example 0.2
When setting Alpha values, which contains the most opacity and which contains the least opacity?
0, is the most - completely see through
1, is the least - not see through at all
What does the CSS property Box Shadow do?
It attaches one or more shadows to an element
What is the basic syntax for Box Shadow Property?
box-shadow: horizontal offset vertical offset color
box-shadow: 5px 5px blue
If we want to add multiple shadows to an element how do we do so?
By adding multiple shadow values to an element separated by a comma
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
this will give us an element with three different and distinct shadows
What is the Blur value on Box-Shadow in CSS and where do we set it in the syntax?
The Blue value applies a blurred effect to the shadow of your element. If you want to apply this you would add it after the value for the Vertical Offset. The higher the number the more blurred the shadow.
box-shadow: 5px 10px 18px red
this would be very blurred; if 18px was changed to 3px the blur effect would decrease significantly
What is the Spread value on Box-Shadow in CSS and where do we set in in the syntax?
The Spread value determines how big the shadow of the element is, a positive number increases the shadow. A negative number decreases the shadow.
The value will be fourth on the box-shadow property
box-shadow: 5px 10px 18px {10px} red
If we want to adjust the transparency of an element, but dont need to set a full RGBA property, what CSS property do we use? And what values do we use?
Opacity -
And you can set anything from 0.1 to 1.0 …..the higher the number the less see through it will be.
The lower the number, the more see through it will be.
You can use double digit decimals as well
Opacity: 0.25 would set it to 75% opacity.
What is the Text-Transform Property in CSS? And what are three values and what do they do?
It adjusts the capitalization of text.
lowercase : makes the text lower case
uppercase : makes every letter uppercase
capitalize : makes the first letter of every word capital.
What do you need to add to the value of a Font-Family property in CSS when importing it from a stylesheet as opposed to a ready built in font already known by your browser?
You need to add quotations.
{built in fonts}
font-family: monospace;
{imported fonts]
font-family: “Open sans” ;
What is Font-Weight in CSS? What are the numeric values? What are the non numeric values?
It sets how think or thin you want the characters of text to be.
Numeric Values are set from 100 - 900
900 being more bold, 100 being the the least
____________________________________
Non Numeric Values are :
lighter
Normal (400)
bold (700)
bolder
What is Line-Height Property in CSS and what is the default setting for most browsers?
The Line-Height property determines how much space there is in between lines. This is the most effective way to adjust how much room a group of text will take up on the page.
The default setting for line-height in most browsers
is 110% - 120%
How can we remove the underline effect on the hyperlinks of your page, or any other underlined element?
text-decoration: none;
What is the Hover pseudo-class? What is the syntax to apply it?
It allows a visual effect to take place when the mouse/cursor goes over an element but doesn’t click or do anything to activate the element.
element : hover {
property: value
}
What is CSS Box Model in a nutshell?
CSS treats each individual element as its own box
What is a Block-Level Elements?
It is an element that automatically begin on a new line.
Think : paragraphs, divs and headers tags
What are Inline-Elements?
They are element that sit on the same line as other elements, and are surrounded by other elements.
Think: span, bold, underline, image tags
What is Normal Flow of a document?
Displays elements as they are listed on the document, starting from the top left of the page and go straight down to the bottom.
What CSS property can we use to take a document out of Normal Flow?
We can use the CSS property Position
What does the value of Relative do on the CSS Position property?
It allows you to take an element out of normal flow and move it in relation to its regular position in Normal Flow
What CSS properties are used in conjunction with Position: Relative to move the desired element?
left, right, top and bottom
values can be pixels or percentages.
Does changing an element out of Normal Flow take the whole page out of Normal Flow?
No it doesn’t. The rest of the page stays in normal flow. The Position property overrides Normal Flow on that specific element but doesn’t change the flow of the page all together.
If you can move elements wherever you want using the Position property, does it matter how you write your HTML? People never see it, so what does it matter?
Practicing good Semantic HTML is important even if it doesn’t visually represent how the page will look. Mainly because the structure of the page represents the importance of information for screen readers and search engines and allows visually impaired users to successfully navigate and access the desired information on your page.
What is the Absolute value for the Position property do?
It locks the element in place relative to the closest positioned ancestor. Usually a parent an usually this is done by declaring position: relative on the parent.
What happens if you declare Position: Absolute and its parent isnt a positioned element?
It will keep looking up the chain looking for a positioned element. If it doesn’t find one it will default to the body tag.
When an element is given Position: Absolute, does it remain in normal flow ?
No, the element is taken out of normal flow and all of the other elements ignore it like it isnt even there.
What is the value of Fixed for the CSS property Position?
It is a type of absolute positioning where the element is positioned in relation to the browser window.
Are elements that are assigned with the Position of Fixed taken out of Normal Flow?
Yes, they are taken out of Normal Flow and other elements don’t realize that the element is there at all
What is the main difference between Absolute and Fixed besides its Position relativity?
The Fixed element doesn’t move when the user scrolls. It stays in that one spot no matter what the user does.
What is the Float property in CSS? And what values does it take?
Floated elements take a value of either Left or Right.
This property will take the element and place it either to left or the right of its parent container
Which CSS property is often used with Float to adjust how much horizontal space it takes up of the parent element?
It is used with Width.
Does Absolutely positioned elements recognized the Float property on other elements?
No, they ignore them.
How can you use a Div and the Float property to style the first letter or word of a paragraph?
You can put a div around the first letter, apply Float: left to it to have it stand out from the rest of the paragraph.
Apply a class name to the div, then go into CSS and add styling to the class name to enlarge it or make it a different font or color.
Do Floated elements remain in Normal Flow?
No they do not, they are taken out of normal flow..so other elements will go along side the left or the right of them if there is space
What does the CSS Clear property do?
When an element is given the Float property, it is taken out of Normal Flow meaning that other elements will go along the left or the right of it. This might not be a desired effect. Adding a Clear property will tell the browser to not place any elements along side the element in that direction.
note: this only applies to other floated items. so if you want to clear the space both the element and the element you are trying to clear must be floated
What are the values of the Clear property in CSS?
Left, Right and Both
What is the Z-Index property in CSS?
When elements are positioned to overlap, the element coming later in the HTML markup will by default appear on top of the earlier written elements.
Z-Index allows you to specify the order in which these elements overlap
How does the specification of elements using Z-Index work?
Every element that is in the overlap stack takes the property Z-Index: with a full number as a value. The element with the highest number will be on top and the element with the lowest number will be on bottom.
How can you center a block element horizontally?
by setting its Margin to Auto
if there is no other element on the left or the right of it that is in its way, the block element will be centered
Images by default are what type of elements?
Inline Elements
How do you change an Inline Element to a Block Element?
Display: Block
What is Linear-Gradient and what CSS property is it used with?
It is a way to make one color change into another color.
It is accessed with the CSS property Background.
Since Linear-Gradients have to do with color, can we use them whenever we want to add color somewhere, like text or borders?
No we cannot because Gradient is technically an Image data type, so it can only be used where images can be used. Basically, through the Background property
What is the syntax of Linear-Gradient?
Background: Linear-Gradient( gradient direction, color 1, color 2, color 3….)
What is Repeating-Linear-Gradient?
Repeating Linear Gradient is like Linear Gradient except that it requires color Start/Stop points other wise it works just like regular linear Gradient.
Also, where you place the stop point for the final color will be where the first repetition of the colors will begin. For example
(red 0%, blue, yellow50%)
would have red start the transition and go to blue and then yellow and this transition would be completed at the halfway mark of the div. Then the transition would start again with Red at 51% and then blue and yellow at 100%, which would be a total of two repetitions of the pattern
if you set it as
(red0% blue yellow 10%)
the entire transition would be complete at 10% and then repeat again and again until the div was taken up, meaning there would be a total of 10 repetitions of the patterns
What is the default direction for Gradients?
Top to Bottom
What are the directional Gradient values?
To Bottom (default) To Right To Left To Top To Top Left To Top Right To Bottom Left To Bottom Right (+/- num)degs
When you use a Linear Gradient, when does the transition from one color start to take place?
It starts happening right away. The colors will not be pure except for the end and the very beginning
Is there a way for you to set where the transition from one color to the next begins to take place when using a Gradient?
Yes, you can add a percentage or a px value after the name or assignment of the color to say basically :
“start transitioning here”
linear-gradient( red 25%, blue)
this will keep red pure all the way until it reaches 25% of the container and then start transitioning to blue along the remaining 75% until it reaches pure blue at the end
What is Radial-Gradient?
It is the same as Linear-Gradient, but it goes in a circle instead of in one direction
What happens if you set the end of a color in the same place as a beginning of a color using a Gradient?
There will be no transition, the colors will just have a clean break with a switch from one color to the next
linear-gradient( red 50%, blue 50%)
in the middle of the page, the colors will switch from red to blue with no transition
When adding color starts and stops, how many values can you place per color?
Two - a start and a stop
(red 35% 50%)
this would make the color red go from 35% of the element - half way through the element.
Do the first and last colors in a Gradient need to have both start and stop places specified?
No, the first color will start at 0% by default so only the stop place is required.
The last color will automatically stop at 100% so only the start place is required.
(red 25%, blue 25% 50&, yellow 50% 75%, orange 75% )
red is already starting at zero
orange is already stopping at 100
so additional start and stop values arent needed.
Blue and yellow are in the middle, so where they start and stop need to be added if you want to specify where the transition starts and stops
How do we add a Background Image to an element?
background-image: url(‘ ‘)
What does the value Scale do on the Transform CSS property? And what is the syntax?
It allows you to increase the size of your image or image like element. The number you put in the parenthasis is the amount of times larger the element compared to its normal, or currently set size.
transform: scale(3)
this will make a picture or image like element three times as big as it currently is
What does the SkewX and SkewY value do on the CSS property Transform? What is the syntax?
It skews the edges diagonally along the X or Y axis.
transform: skewX(23deg)
What do the pseudo elements :Before and :After do?
They target or set what comes before or after an element. For example of a list element
li : before {
content: “this is a list item”
}
This would make the string
this is a list item come before every list item on the page
What is the Animation-Name and Animation-Duration CSS properties? Where are they placed?
They describe the name of the animation and how long it will take to complete or to run the entire animation.
These are placed inside of the elements CSS rule set.
h1 {
animation-name: changeColors;
animation-duration: 10s;
}
How do you we set what actually happens in the animation after we have set it on a particular element in CSS?
We use
@keyframes animation-name {
length of time {
what we actually want to happen
}
}
@keyframes changeColor {
0% {
background-color: red
}
50% {
background-color: black;
}
}
This will start the back ground color at red….this would last for 5 seconds ( if we set the animation duration for 10 seconds) and then it would turn black.
What are some popular times to use Animation to change colors or add different effects like slightly enlarging the size of an element?
During Hover’s or button onclicks
What is Animation-Fill-Mode: Forwards in CSS and why do we use it?
When we set an animation, at the end of the duration, it reverts back to its original state and will run again once the code is called again.
Animation-Fill-Mode: Forwards
sets it up so the element stays at the final stage as long as what triggered the animation is still true.
for example, if a page load triggers the animation, then the final animation stage will remain visible because the page is still loaded and will not reset until the page is loaded again.
if Hover triggers the animation, then animation will remain in the final stage as long as Hover is still being utilized. Once you move your mouse, the original animation stage will take back over and will refire once Hover is reapplied.
Can you use Animation Rules to create movement of elements on a page?
Yes you can, as long as an element has a specified position like relative or fixed. The CSS offset properties like left/right can be used to create animation movement.
This is an example of @keyframes moving an element up and then down while changing the color.
@keyframes rainbow {
0% {
background-color: blue;
top: 0px;
}
50% {
background-color: green;
top: 50px;
}
100% {
background-color: yellow;
top: 0px;
}
}
What is the CSS property Animation-Iteration-Count? Which values can it take?
This property sets how many consecutive times your animation will run.
You can set it to a specific number
or you can set it to infinite and the animation will keep running.
animation-iteration-count: 3
animation-iteration-count: infinite
What is a good styling tip to keep in mind about your Animated elements?
You can change their size movements, colors and durations and how many times they run independent of one another. They dont need to all share the same rules so that they have a uniform look….sometimes its good to give them their own independent life so it looks more interactive and lifelike and less robotic.
think of the twinkling stars challenge
What is the Animation-Timing-Function property in CSS? What is a good mental model to have about it so it doesnt get confused with Animation-Duration?
Animation Duration is the overall road trip. SF to NY. This is the total ground that needs to be covered. We can set this to 5 seconds. This is how long the trip is from A - B.
Animation-Timing-Function is how that trip is travelled. The distance from SF to NY will still be the same and take the same amount of time, but do you speed first through the western states and slow down and take your time in teh eastern states? Or do you take your time and sight see in the western states and speed through the eastern states to get to your destination?
Or do you just take a nice steady course, nice and easy all the way through?
Animation-Timing-Function determines this mode of travel.
What is the default value for Animation-Timing-Function whether set or not? What does this value mean?
Ease.
start slow, speed up in the middle, slows down again in the end.
What is the Ease-Out/Ease-In value on the CSS Animation-Timing-Function property?
Ease-Out:
Quick start. Slow End.
Ease-In:
Slow start. Fast End
What is the Linear value on the CSS Animation-Timing-Function property?
This applies a constant animation speed throughout the course of the animation duration.
What does Accessibility refer to, when being discussed in the context of Web Development?
means having web content and a user interface that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility or cognitive disabilities
Why is an ALT tag important for search engines?
Alt tags are used by search engines to index what is in a photo so it can return related images to a search.
Why is an ALT tag important for visually impaired users? If they can’t see the image or the text, why would an ALT tag help them at all?
The ALT tag is also read by screen readers so people who cant see can be told what is in an image audibly
What are some times where you would want to add an EMPTY STRING to an ALT tag of an IMG? What are some examples of this?
Photos that are used for decoration only and dont add any meaning to the content or to the page itself.
examples of this would be
background images for decoration purposes.
If an IMG already has a caption in its content explaining what it is - should you use an ALT with a string or an ALT without a string?
It is possible to use an ALT without a string even the caption would be redundant because of the caption.
But i would opt to use one because of the screen readers and because the alt tag is used to index photos in search engines.
How many times should you use H1 on a page?
once.
There are H1 - H6, should you pick H#’s by their size and how they look?
No you shouldn’t. Choose them by relevancy of their content. H2’s should be a sub section of H1
H3’s should be sub sections of H2’s
H4’s should be sub sections of H3’s and so on and so forth
Why is important for your H#’s to have Semantic Meaning and relate to one another?
Some screen readers can be set to read only the headings on a page so the user gets a summary of the page.
Its important that your headings facilitate this for the users.
Should you skip H#’s ? Like if you have an H1 should you jump straight to an H5?
No, this confuses screen readers. You should order your content one header at a time.
Its ok to not use certain headers, but if you do use them, you shouldnt skip them.
What is the MAIN tag and how many should there be on the page? Using this tag allows for what functionality?
It wraps the main content of a page, shouldnt include repeating content like nav bars etc.
There should be one per page.
Assistive technologies allow a “Jump to Main Content” link that takes users to the main content of a page.
What is the Article tag and what is it used for Semantically?
Used to group independant, self contained content. Content that can be understood outside of the context of other content.
Think of an article as a book
What is the Section tag and what is it used for Semantically?
Used to group thematically related content . These can be used inside of Article tags.
If the Article tag is a book,
then the Section tag would be the chapters.
What is the Div tag and what is it used for Semantically?
It is used to group content when there is no relationship between groups of content
What is the Header tag? And why do we use it? Using this tag allows for what functionality?
It is used to wrap introductory information or navigation links for its parent tag and works well around content thats repeated at the top of multiple pages.
Header tag allows assistive technologies to quickly navigate to that content.
What is the Nav tag and what is it used for? What functionality does using this tag afford?
This tag is meant to wrap around the main navigation link in your page.
This tag allows for easy screen reading navigation.
If the links in the Nav bar are repeated at the bottom of the page, is a second Nav tag necessary?
No, a second Nav tag isnt necessary. A Footer tag will do just fine.
What does the Footer tag do? What functionality does it afford?
It wraps information about copyright or links related to documents that usually sit at the bottom of the page.
This has built in Landmark features that allow easy navigation to this section using assistive technologies
What is a Boolean Attribute?
Its an attribute that doesnt need a value. Its presence turns the feature on.
for example
checked, required etc.
What is the Audio tag? What is it used for? What is the syntax?
It is used to add audio to your webpage
audio controls src=”audio.mp3”>/audio
What does the Boolean Attribute ‘Controls’ do?
It brings up media controls for audio/video that allows you to play/pause the media file amongst other things.
Audio and other type of media also should include what?
A text component along with a visual component to accessible to people who are deaf or hard of hearing
What is the tag Figure and Figcaption tag and what are they used for? What is the syntax?
These tags are used together to wrap a visual representation like a chart or an image along with its caption. The figcaption tag can be used to give the conclusion or findings represented by a chart.
figure> img src alt > figcaption > This Chart says you broke /figcaption> /figure>
How do we use the For attribute on a Label tag?
The value of ‘For’ attribute on the label tag should be the same as the value of the Name or ID attribute on the input tag thats wrapped in it.
label for=”email”>
input type=text name=email>
/label>
What is the Fieldset tag? What default styling does it come with?
A fieldset tag groups a bunch of inputs - radio buttons for example. This sections off the whole are where the user is to put in inputs
It has a default styling of a box around whatever is nested inside of its tags…this default styling can be changed in css
What is the Legend tag?
The legend tag is the name of a section of related inputs.
form>
fieldset>
legend> Whats your fav sport
label> baseball
input > type =radio
label> football
input> type ="radio
label> football
input>type=radio
legend> whats you fav food etc..
What is the difference between Legend and Label?
Legend is the name of a section of related inputs.
Label is the name of the input themselves
How do you add a DatePicker to your page?
input type=date>
What is the Time tag and what does it do with the Datetime attribute?
The time tag is used with the datetime attribute to wrap a date in text. This is to standardize time that may be written informally and can be used by screen readers and others assistive devices.
we went on
If an element is Screen Read Only, what does that mean?
It means that the element cannot be seen but the information is read by a screen reader.
Why would we want an element to be Screen Read Only?
If we have a chart that requires sight to get the information from it. You might have to also make a table for a screen reader to read the table the make the information accessible.
But you dont want to put a chart and a table, because it does no good to have both. So you would show the chart for those that can see and make the table screen read only so it is read to those who cant see the chart
What is the syntax for making something Screen Read Only?
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}If you make the CSS of an element Display: None or Width/Height: 0px?
No, these will make it so the screen reader ignores it too and it wont get read.
What is an Accesskey attribute and what is it used for? What is the syntax?
It is added to links on a page to allow keyboard users to click a key like SHIFT or CTL plus whatever value you add to the accesskey attribute and it will go to that page.
a href =”wwf.com” accesskey=”g” ><a></a>
What two things does setting the attribute/value pair Tabindex=”0” do to an element?
It makes it so it can tab to access it the same way you can links and buttons for key board only users
and it can make it so that you can style it using the pseudo class :focus on it.
What does applying an integer high than 0 to the value of Tabindex do?
It makes sets the focus order for tabbed elements. The element with the value of 1 will go first and then 2 and then so on and so forth
What could be a unintended consequence of setting the values for Tabindex on elements?
Most if not all keyboard users are used to the keyboard focus on the hitting tab to go from top to bottom. When you set the tabindex it takes it out of normal rotation that could be confusing for some users
How do you change the visual appearance of something depending on the screen height and width?
You use a media query
@media (min/max-height/width: numpx) {
element {
property: value
}
}
How do we make images responsive in CSS? And what does the image need to be wrapped in?
it needs to be wrapped in a div or some sort of parent element
img {
width: 100%;
display: block;
height: auto;
}
The max-width of 100%
makes sure the image is never wider than the container it is in.
The height of auto will make the image keep its original aspect ratio
What trick do you do to pictures to make sure that they work well with Retina/IOS?
Make sure that you set the height and the width of an image to half of that of the original picture
Besides percentages and pixels what is another useful way to size objects or pictures based on the viewport itself?
Viewport units.
What does VW and VH stand for as measurement units?
Viewport Width and Viewport Height
The number that goes with it is the percentage of that
header {
height: 100vh
}
means the header is going to be 100 percent of the viewports height.
What does Vmin and Vmax stand for as measurement units?
Vmin - of whichever screen is smaller
Vmax - of whichever screen is larger
Where can we use Viewport Units?
We can use them wherever we use px or %’s
What can you do to safeguard against browsers that dont support viewport?
you can set up, a regular declaration with px’s directly before a Viewport Unit declaration and if the browser supports Viewport Units - it will use that instead. If it doesnt it will use the regular px declaration
What happens when you add Display: flex to a container that has block elements nested inside of it?
They become stacked horizontally left to right
What is a Flex Container?
It is a parent element that has display: flex applied to it
What is a Flex Item?
A child of a flex container that will move depending on how the flex is applied
What is Flex-Direction?
This is the property that dictates the direction that the flex items are displayed in
What is the default Flex-Direction?
Row
What are the Four Flex Directions?
Row, Row-Reverse
Column, Column-Reverse
What is the Main Axis of a row?
horizontal line going right through it
What is the Main Axis of a column?
vertical line going right through it
What is Justify-Content Css property?
This property aligns flex items along the main axis of the flex direction.
What does Justify-Content: center; do?
It places the flex items along the main axis in the center of container.
What does Justify-Content: flex-start do?
It places the flex items on the main axis along the beginning of the container.
What does Justify-Content: flex-end do?
It places the flex items on the main axis along the end of the container.
What does Justify-Content: space-between do?
Places outer most flex items along the border of the flex container and divides the spaces in between the remaining flex items
What does Justify-Content: space-around do?
Splits between the items looks double what they are along the edges because each item gets its on space buffer - which between them looks like double space.
What does Justify-Content: space-evenly do?
It makes the space between the flex items even on both sides regardless of the amount of space or items
What is the Cross Axis of a Row?
The vertical line.
What is the Cross Axis of a Column?
The horizontal line.
What does the property Align-Items do?
It alings flex items along the cross axis of a flex container
What does Align-Items: flex-start do?
It aligns the flex items along the start of the cross axis
What does Align-Items: flex-end do?
It aligns the flex items along the end of the cross axis
What does Align-Items: center do?
It aligns the flex items in the center of the cross axis
What does Align-Items: stretch do?
It stretches the flex items the full height/width of the flex container depending on the cross axis of the flex direction
What does Align-Items: baseline do?
It will make sure that the text inside of the flex elements are lined up even if the actual height/width are not exactly the same amongst the flex items. This helps your texts look consistent
What does Flex-Wrap do?
It tells CSS to wrap flex items to the next row or column if there isnt enough space on one line.
What determines if there is enough space to wrap flex items?
The space of the container and the space of the flex items.
What is the default value for Align-Items for grid items?
Stretch.
What is Flex-Wrap: No Wrap?
This setting does not wrap flex items and keeps all flex items on the same line.
What is the default setting of Flex-Wrap?
no-wrap
What does Flex-Wrap: Wrap do?
It wraps flex items on to the next line depending on the flex direction of the container
What does Flex-Wrap: Wrap-Reverse do?
Wraps items in the opposite order of Wrap
What does Flex-Shrink do? When do we use it?
When the flex container’s width/height is smaller than the combined width/height of the flex items, Flex shrink can be used on flex items to allocate which items will shrink faster or slower than other items.
The higher the number, the higher the shrink rate.
flex-shrink: 3 will shrink three times as fast as flex-shrink: 1
How can Flex-Shrink be used with Width/Height?
box1 {
When flex items are in the same container as long as the container is big enough to have both items have their width/height measurements respected, both will fine. Once the flex container gets smaller and encroaches on the size of the flex items, the flex items will shrink at the desired rate you set on the Flex-Shrink property.
width/height: 200px;
flex-shrink: 2
}
width/height: 200px;
flex-shrink: 1
}
if the flex container is at 600px, both of these boxes will be 200px each, because there is enough space to accommodate both widths/heights.
But if that container were to go down to 300px. Then Flex-shrink would come into play and shrink box 1 and twice the rate as box #2 meaning the 300px would leave the boxes as
box 1 100px
box 2 200px
What happens if you add 100% width/height on all the flex items?
They will divide it up evenly and give each other equal parts.
What happens if you add Flex-Shrink on to flex items with 100 percent width/height on each of them?
If there is two and given different flex shrink values then they will automatically adjust to divide up the space.
If two or more or given and are given different values, more often than not only two elements will be divided up and the other elements will be shrunk to the point where you dont see them
What is the default value for Flex-Shrink?
1
What is Flex-Grow? How does it work?
It works exactly the same as Flex-Shrink except when the container expands it grows the flex items at the rate that you decide
How do you set the starting point of a flex item before it starts growing or shrinking?
flex-basis :
with some measurement value
Why is it a better idea to use Flex-basis as for flex items rather than width/height or min-width?
Because you can do it in the short hand notation of Flex.
And when it comes to min-width, when you get to that small size say for a photo, the image will stay the same size but just make you scroll to see it.
where flex basis will actually shrink the photo or the element to fit into thay space rather than make you scroll.
What is the syntax for the shorthand Flex property?
flex : grow, shrink, basis
What is the Order property?
It puts the flex items in the order that they should appear. The number value is that order, it can take negative nums too
order: 1
order: 2
Whats the default of the Order property?
Flex items will be ordered in the order that they appear in the source HTML
What is the Align-Self property?
This property allows you to adjust each item’s alignment individually, instead of setting them all at once. This is useful since other common adjustment techniques using the CSS properties float, clear, and vertical-align do not work on flex items.
What values does Align-Self take?
align-self accepts the same values as align-items and will override any value set by the align-items property.
Can any HTML element be made into a Grid Container?
Yes any HTML element
How do you turn an HTML element into a Grid Container?
You apply display: grid; to it
This gives you the ability to use all the other properties associated with CSS Grid
How do we add Grid Columns to a Grid Container?
We use the property grid-template-columns
How are the number of columns determined by Grid-Template-Columns?
The number of values applied to the property determines the amount of columns the container will have.
grid-template-columns: 50px 50px 50px 50px
This container would have 4 columns
How is the width of columns decided when creating columns with Grid-Template-Columns?
The measurements of the values determine the width of the columns
grid-template-columns: 50px 50px 50px 50px
This will set 4 columns of 50px in width each.
How do you make Rows instead of Columns with CSS Grid? How does it work?
grid-template-rows
it works the same way as grid-template-colums
What measurements can we use for Grid-Template-Columns/Rows? And how do they work?
We can use the usual set units like px/vh/vw
We can use percentages
We can use auto
(which size is only that of the content it has, like a inline element)
We can use Fr
(this works like a fraction, the number represents the parts it will take up of the remaining space)
grid-template-rows: 1fr 2fr
This will divide the container into three parts….
the first row will get 1/3 and the second row will get 2/3
How do you create a gap between Columns when using Grid-Template-Columns?
grid-column-gap
How to specify how big of a gap is made when using Grid-Column-Gap?
The value will determine the size of the gap in between the columns
How do we create gaps between rows when using CSS Grid? How does it work?
gird-row-gap
it works the same way as grid-column-gap
What is Grid-Gap? And how is it used?
Its a shorthand for column/row-gap properties.
If it has one value, it will set the width for all columns and all gaps
if it has two values, the first one is for rows and the second one is for columns
Grid-Column/Row are not used on Grid Containers, what are they used on?
They are used on Grid-Items.
What are Row and Column Lines?
Think of a Grid….the lines that go horizontal are the row lines. the lines that go vertical are column lines.
The number of column and rows determine the amount of lines there are. These lines are numbered from the top left corner of the page and run downwards for columns and to the right for rows
1 2 3 4
2
3
4
a four column/row grid would look like this
How does Grid-Column/Row work?
You give two numbers on the value of grid-column/row
the first number is the line that you want the grid item to start
then a forward slash
the second number which is the line that you want the flex item to stop.
so grid-column: 2/4
would start on line 2 go across line 3 and stop on line 4. Meaning this item would cover two columns
What is the Repeat value on the Grid-Template-Row/Column property? What is the syntax?
The repeat value will allow you to make as many columns or rows of a particular container that you want. It takes two parameters. The first one is how many rows/columns that you want. The second will be the width/height
grid-template-columns: repeat(3, 1fr)
This will make 3 columns that take up 1/3 of the container each.
What is a Cell in CSS Grid? Is every Cell a Flex-Item?
It is the space in which the Flex Item sits. The space in between the row/column lines that make up the columns/ rows. Every Cell isn’t a Flex-Item. They would occupy the same space but Cells can be empty.
Think of Cell as Jail Cell, but Flex Items are the prisoners inside of the cell. They can move around the cell and be in different positions of the cell, the cell could be empty - but the prisoner and the cell are not the same even if they occupy the same space.
How can you move the content HORIZONTALLY inside of a CSS Cell?
You can use the property justify-self
What is the default value of the Justify-Self property in CSS Grid? What does it do?
Stretch.
This will make the content fit the entire width of the cell.
What are the values of Justify-Self property in CSS Grid?
Start - justifies the item to the left of the cell.
Center - justifies content to the center of the cell
End - justifies content to the end of the cell
Stretch - content covers entire width of the cell
How do you can you move content Vertically inside of a CSS Cell? And what values does it take?
By using the align-self property.
It takes all the same values as justify-self
If you want to move the content inside of the Cell Horizontally for all the Grid Items what can you use? What values does it take?
justify-items
Takes the same values as justify/align-self:
If you want to move the content inside of the Cell Vertically for all the Grid Items what can you use? What values does it take?
align-items
Takes the same values as justify/align-self
What element do you apply Align/Justify - Items on when making a grid?
the Grid Container
When you use Justify/Align-Items on content, How will the height and width be determined?
The height and the width will be determined by what the content dictates.
What is an Area in CSS Grid? How do they work?
An Area are rows of the container grouped together by a custom/variable/class name
Each row is placed between quotations
1 2 3 4
1 “header header header header”
2 “ad content content ad”
3 “content content content content”
4 “footer footer footer footer”
Each different name is a different Area
What if there is a section of your Grid that has empty cells, how would you label it when creating Areas?
You place a period where there is an empty cell.
How do you create Areas in CSS Grids?
use grid-template-areas:
and then use quotations and to section off rows and classify custom cell names
grid-template-areas:
“header header header”
“ad content ad”
“footer footer footer”
this will create 4 areas
header, ad , content and footer
Does creating Grid Areas, does that automatically place the Grid-Item into it? Meaning, are they linked for CSS styles and things of that nature?
No, creating the area is literally assigning a name to the space, Not to the Grid item itself. The Grid Item will still need to be linked to the area name.
How do you assign an Grid Item to a Grid Area?
By using grid-area on the grid item
item1 {
grid-area: header,
}
This lets the grid know that you want the item1 class to go in the area named header. In this case, the item will use the entire top row because that whole row is named as the header area.
What is you want to add an Area to an item in particular to a grid that doesn’t have a Grid-Template-Row/Column property set?
you can use grid-area
the values are separated with forward slices
the values are
horizontal start / vertical start / horizontal end/ vertical end
grid-area: 1/1/2/4;
So the item in the example will consume the rows between lines 1 and 2, and the columns between lines 1 and 4.
What if you wanted to make multiple Rows/Columns with the same width, but wanted to make one or more with different width/height than the rest?
You can add another value after/ before the Repeat( ) function.
grid-template-columns : repeat(3, 50px) 100px;
this would make 3 columns that are 50px each and then put a column that is 100px after it.
How do we use the Minmax function along with Grid-Template-Row/Column? Whats the syntax?
This is used to set the min and the max width/height of the row/column after setting the starting width/height in the event that the container/browser grows/shrinks.
minmax( min , max)
grid-template-rows: repeat(3,50px) minmax( 25px, 100px)
this will make three rows where the height is set to 50px, but when the container shrinks it will shrink the rows up until it reaches 25px
if the container grows the grid items will grow until it reaches 100px
Can you use the Minmax function inside of the Repeat function?
Yes you can.
grid-template-columns: repeat(3, minmax(90px, 1fr)) ;
This will make a three columns that will take up 1/3 of the container but will not get smaller than 90px
How do you use Auto-Fill with the Repeat function? What does it do and what is the syntax?
Auto fill allows the container to add rows/columns when the container grows or shrinks. If there is Grid Items they will slide up to fill the row/column if the container grows, if it shrinks the Grid items will wrap to the next column/row
repeat( auto-fill , minmax(90px, 1fr)
this will look at the container size and see how many 90px’s can fit into the height/width and make the proper amount of rows/columns.
The item will never go less than 90px.
As the screen grows, each item will take a fraction of the total amount of rows/columns. So if they are 5 columns - the grid items will take 1/5th - if there 10 rows/columns the grid items will 1/10th of the container.
What is Auto-Fit and how is it different than Auto-Fill?
auto-fit works almost identically to auto-fill. The only difference is that when the container’s size exceeds the size of all the items combined, auto-fill keeps inserting empty rows or columns and pushes your items to the side, while auto-fit collapses those empty rows or columns and stretches your items to fit the size of the container.
Note: If your container can’t fit all your items on one row, it will move them down to a new one.
auto-fill:
1 2 3 4 5 6 empty empty empty empty
auto-fit:
1 2 3 4 5 6
How can we use Media Queries with Grid-Template-Areas to make our pages responsive?
When can name our grid areas and then change them depending on the grid size
set:
grid-template-areas :
"header"
"advert"
"content"
"footer";
this is one column; 4 rows - at 300px
we can change that when we get to 400px
@media query (min-width: 400px) {
grid-template-areas:
"advert header"
"advert content"
"advert footer";
This will make 2 colums; 3 rows and take the advertisement section and place it along the left side of the page.
Can you make a Grid inside of a Grid?
Yes, take one of the Grid Items, and in the CSS
apply
display: grid;
and grid-template-row/column:
and define the grid that you want.
What is the most efficient way to get unstuck when you are stuck on a coding problem?
When you get stuck, remember: Read-Search-Ask.
Read the documentation or error
Search Google
Ask your friends for help
How do we link a CSS file to a HTML file?
link rel=”stylesheet” type=”text/css” href=”tribute.css” />
Whats the best way to add images to Grid’s?
use the background image property on the grid item
and then place :
background-size: cover;
background-position: center;
background-repeat: no-repeat;
on the grid container
What is the CODE tag used for?
It turns the text inside of into monospace. This code is where you add code to the page. This code tag is semantic.
Should you comment out regularly and explain what your code is doing?
Yes, this is a good practice for others that need to see your code and know what it is doing, But also to your future self to help explain what your code is doing as sometimes it gets confusing.
In computer science what does DATA refer to?
anything that is meaningful to the computer
JavaScript provides eight different data types which are?
undefined, null, boolean, string, symbol, bigint, number, and object
What is the term we use for creating a variable?
Declaring a variable.
What are variables ?
They are nicknames for a particular piece of Data
Are the Variables the same as the Data they are assigned to?
No Variables are just a label that POINT TO the data, but are not the data itself.
Can Variables store different Data at different times?
Yes they can. They can be dynamically changed
What is the Assignment Operator?
the equal sign =
When assigning a Variable does assignment go from left to right, or right to left?
Assignment goes from right to left, meaning everything on the right of the equal sign is resolved before the value is assigned to the variable on the left
What is Initialization?
Initialization is giving a declared variable its first value
What are the two steps of assigning a Variable and giving it a value?
Declaration and Initialization
var myName (declaration)
= rashaan (initialization)
var myName = rashaan
declaration and initialization
If you declare a variable but do not initialize it, what value does it have?
undefined.
If you do a mathematical operation on an undefined variable what will the result be?
NaN,
What does NaN stand for?
Not a Number.
If you Concatenate a string with an undefined variable what will the result be?
string of Undefined
How can increase and decrease a variable with a number data type by one
withe the ++/–operator
variableName++ (+ 1)
variableName– ( - 1)
What is a Float Number?
a decimal number
What do we need to remember about the accuracy of Floating numbers?
Not all real numbers can be represented in Floating Numbers, this can lead to rounding errors.
Can you use the same Mathematical Operators on Float numbers as you would Integer numbers?
Yes you can.
What are Integer numbers?
Whole numbers
What is the Remainder Operator?
%
and it gives the remainder of the division of two numbers.
How can we use the Remainder Operator to check if a number is even or odd?
We can use the operator by two… and if it has a remainder it is odd and if it doesnt it is even.
myVar % 2 = 1 (odd)
myVar % 2 = 0 (even)
What should we not confuse the Remainder Operator with?
The modulus operator. It is very similar but does not work properly with negative numbers.
What is Compound Assignment?
When you want to update the current variable with a new value using a mathmatical operator.
myVar =+ 5
this is the same as
myVar = myVar + 5
When using Compound Assignment which operator comes first?
The Math Operator comes first and then the Assignment Operator
What is a String Literal?
A series of zero or more characters that are enclosed in single or double qoutes.
What is Escaping Quotation marks with a BackSlash?
Every string needs to start and end with single or double quotes. But when we need to use quotes inside of a string, we can use a BACKSLASH \
Where do we place the Escaping Backslash in relation to the inside Quotes?
Before both sets of Inside Quotes.
" lets go "
How do you Escape Quotation marks with other Quotation marks?
Every string needs to begin with matching sets of single or double qoutes. If you start with single you can safely use doubles inside of the string, and vice versa
How do we Escape a Backslash to show a Backslash inside of a string?
\
What does \n mean inside of a string?
it creates a new line in the string
What does \t mean inside a string?
it means Tab and creates a tab sized space inside a string
What is the Concatenate Operator? What does it do?
It is +
It is used with strings and creates new strings by adding them together
When using the Concatenate Operator does it add spaces?
No it doesnt, so you have to add the spaces yourself.
How do we use Compound Concatenation?
We can add a string to the end of another string
var ourStr = “I come first. “;
ourStr += “I come second.”;
ourStr is now “I come first. I come second.”
Can you Concatenate strings with Variable Names?
Yes, you dont need to use quotations with variable names.
var ourName = "freeCodeCamp"; var ourStr = "Hello, our name is " + ourName + ", how are you?"; // ourStr is now "Hello, our name is freeCodeCamp, how are you?"
How to Concatenate Variable Names with other Variable Names?
We can use Compound Concatenation
var anAdjective = "awesome!"; var ourStr = "freeCodeCamp is "; ourStr += anAdjective; // ourStr is now "freeCodeCamp is awesome!"
What is a String Variable as opposed to a string literal?
It is a variable name that has a string stored inside of it
myStr = “this is a string”
myStr (string variable)
“this is a string” ( string literal)
How can you find the length of a string from a String Literal and a String Variable?
by using .length on the end of it. It will tell you how many characters are in the string. Even the spaces.
What is Bracket Notation on a string? What is the syntax?
It is a way to get a character at a specific index within a string?
firstName = “Charles”;
firstName[0];
firstLetter is “C”
What is Zero-Based-Indexing?
That the count on indexing doesnt start at 1 like normal. It starts with 0.
What does it mean if something are Immutable?
That it cannot be changed once it is set.
Are String Values Immutable? In Other words, Can you the individual characters in a String Literal be changed using Bracket Notation?
Yes they are. You cannot change the individual character of a string literal using Bracket Notation.
If String Variable values are immutable, how can we change the value?
We have to reassign the variable name to a different value all together.
var myStr = "Bob"; myStr = "Job";
What does the nth number mean?
Its a generic number holder for an unknown number.
its like the x variable in algebra
How do we use Bracket Notation to find the last character in a string?
variableName[variableName.length - 1]
var firstName = "Charles"; var lastLetter = firstName[firstName.length - 1]; // lastLetter is "s"
How do we Use Bracket Notation to Find the Nth-to-Last Character in a String?
You can add any number after the subraction operator to get that index character.
firstName[firstName.length - 3]
Does Zero-Based-Indexing work the same way in reverse? For example, when using the [.length - n ] method to access characters at the end of a string?
No, zero based indexing only works in a linear fashion.
the first character will be 0 no matter what and doesnt change depending on the way that you are counting.
How do we store several pieces of data in one place?
With an Array
Whats the difference between Using Bracket Notation on arrays vs Strings?
In arrays, the whole item is returned and not just the character
Are array entries/items Immutable?
No they are not, meaning you can change them using bracket notation.
var ourArray = [50,40,30]; ourArray[0] = 15; // equals [15,40,30]
What is a Nested Array?
It is an Array inside of another Array.
What is a Multi-Dimensional Array?
It is an Array of Arrays
How do we Index Nested Arrays and Multi-Dimensional Arrays?
We start indexing from the outside first and then work our way down
var arr = [ [1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14] ]; arr[3]; // equals [[10,11,12], 13, 14] arr[3][0]; // equals [10,11,12] arr[3][0][1]; // equals 11
What does .push( ) do?
It adds the item or array inside the parens to the end of the array.
var arr1 = [1,2,3]; arr1.push(4); // arr1 is now [1,2,3,4]
var arr2 = ["Stimpson", "J", "cat"]; arr2.push(["happy", "joy"]); // arr2 now equals ["Stimpson", "J", "cat", ["happy", "joy"]]
What does .pop( ) do?
This is used to take the value off the end of an array.
What does push( ) return?
The length of the new array
What does .pop( ) return?
It returns the item that was popped off the end
How can we store a popped off item of an array?
Store it in a variable
storedVariable = array.pop( )
What does .shift( ) do?
Removes the first item of an array and returns it
What does unshift( ) do?
Adds an item to the beginning of an array and returns the length of the new array
What is a function?
It is a piece of reusable code.
What are Parameters?
Parameters are variables that act as placeholders for the values that are to be input to a function at the time that it is called.
What does are Arguments?
Arguments are the actual values that go in the place of parameters when the function is called.
What does “Passing through” an argument mean?
It means inputting the Argument values in the place of parameters
When we discuss Scope, what does it refer to?
The visibility of variables.
Variables that are defined outside of a function have what Scope?
They have Global Scope. Meaning they can be seen everywhere in your JS code.
Variables that are defined without using the keyword var/let/const are in what Scope?
They are in Global Scope.
Should you ever declare a function without using a Keyword like let/var/const?
No you should not. If you want to make it Global, then use a Keyword and Variable Name outside a function.
If you want it local then declare it inside of a function
Why should you not declare a variable without using a keyword?
Because it will cause unintended consequences elsewhere in your code and it will be really hard to debug
Variables declared within a function have what Scope?
They have local scope.
Variables that are passed through as Arguments have what Scope?
They have local scope
What does Local Scope mean?
It means that the variable can only be seen within that specific function
When there is a Global and Local Variable with the same name which one takes precedence?
The Local Variable takes precedence over the Global.
When do we use a Return Statement in a function?
When we want to send a value outside of the function
What happens when your function produces a value but does not have a return statement?
It produces an Undefined result.
What two values do Booleans have?
True or False
Are Boolean Values every written in Quotations?
No they are not.
What are If Statements?
They are code that allows you to run one type of code if the boolean is true and another type of code if the boolean is false
What are Comparison Operators?
These are operators that compare two values. like lesser than and greater than >
What values do Comparison Operators return?
Booleans (true or false)
What is the Equality Operator?
==
This checks to see if the left value is equal to the right value. If so True is returned
if not False is returned
What is Data Type Coercion? When is it used?
It is when the Equality Operator is used on two different data types… this converts the data into the same type and then compares them.
1 == 1 // true
1 == 2 // false
1 == ‘1’ // true
“3” == 3 // true
the strings and the number data types return true because their value is equal even though the data type is not
What is the Strict Equality Operator? How does it work?
===
It works the same way as the Equality Operator except that it doesnt perform Data Type Coercion. Meaning the data type and the value have to be equal for it to return a true.
3 === 3 // true
3 === ‘3’ // false
How can you check the type of data something is?
by using the typeof operator.
typeof 3 // returns ‘number’
typeof ‘3’ // returns ‘string’
What is the Inequality Operator? How does it work?
!=
It works the same way the Equality operator does except it returns True when unequal and False when they are equal.
This perfroms Data Coercion
What is the Strict Inequality Operator?
!==
It works the same way as === except it returns True when they are unequal and False when they are equal
Does Type Coercion also take place with > Greater than or < Less than or >= or <=?
Yes, these will compare different data types
What is the && Operator?
It returns true if both sides of the operator are true. Otherwise it returns false.
What is the | | operator?
It returns True if at least one side of the operator is true
What should we keep in mind when we are creating If/Else statements about the order that we put them in?
The If statement will stop executing at its first true. So Its important to put it in the right order.
This is the wrong way:
if (val < 10) {
return "Less than 10";
} else if (val < 5) {
return "Less than 5";
} else {
return "Greater than or equal to 10";
}
}
If the whats passed in for Val is a 2.. it will return a true and stop running the code. Its less than 10, but its more correct to say that its less than 5. Thats the code we want to run.
______________________
This is the right way
if (val < 5) {
return "Less than 5";
} else if (val < 10) {
return "Less than 10";
} else {
return "Greater than or equal to 10";
}
}
If 5 returns a false, then we look to see if its less than 10 and so on and so forth.
What is a Switch Statement?
It does the same thing as If statement but can run code if there are more options than just True or False. We can use this when there are more options available than just the two
Can a Switch Statement be used in another function?
Yes, its just like an If statement, it can be used inside of a function.
Do we need a parameter when starting a switch statement ?
Yes we do, we need to pass in an argument to a parameter
How do we begin a Switch Statement?
switch (param1){
}
What is a Case when using a Switch Statement? What is the syntax?
A Case is a possible value for the Param. There can be as many as you want.
case “value” :
How does the Beginning of a Switch Statement look with one case option?
switch (param){
case “value” :
Where do you put the code that you want ran when the Argument matches a Case?
You place it after the colon after the case value.
case “value” :
console.log(‘this code’)
What does a Switch Statement look like with its beginning, case statement and code to be ran?
switch (param){
case “value”:
console.log(‘run this code’)
