Web Development Deck Flashcards
Where do you put non-visible content about the HTML document?
Place the information in the HEAD element of the HTML document. This element can contain things such as TITLE or other metadata that can help your website be identified better by search engines.
Where do you put visible content about in the HTML document
Place it in the BODY element. This can include all of your written content such as text, images, links, etc. Examples of elements in the BODY include: h1, h2, p, span, div, etc.
Where do the HEAD and BODY tag go in a valid HTML document?
They go within the HTML element. HEAD will go above the BODY element.
What is the purpose of the < !DOCTYPE > declaration?
The purpose is to identify which version of HTML the page is using. It also helps a page render correctly. (Especially useful if using the box model)
Give five examples of HTML element types.
Examples of HTML elements include:
1. h1-h6 for creating headings of your content (h1 is the largest)
2. < p > for creating paragraphs in your webpage
3. < div > for creating divisions or sections
4. < img > for creating images
5. < ol > for creating ordered lists
What is the purpose of HTML attributes?
Provide extra information about a specific element → examples could be the language of a browser, an ID, or class
What is an example of an HTML entity (escape character)?
Escape characters are those that are used either to represent characters reserved for HTML (like the <, >, “, &) or for symbols such as copyright and trademark.
Examples:
1. < <
2. > >
3. & &
Need to check browsers to make sure it renders correctly though.
How do block-level elements affect the document flow?
They create a new line on the browser window that will take up the entire space of their parent element.
Examples will include: < div >, < h1 >, < /h1 >< p >< /p >< /div >
How do inline elements affect the document flow?
They appear on the same line as their neighboring elements. These can include elements that you want to create a semantic feel to your page.
Examples include: < em >, < strong >, < span >
What are the default width and height of a block-level element?
Because block elements create a new line on the browser window, they will take up the entire horizontal space of their parent container (the containing block). Their height will only take up what is necessary.
What are the default width and height of an inline element?
They will only take as much width and height as necessary –> as determined by the size of its content. It is bounded to the same dimensions as the tags they are residing in.
What is the difference between an ordered list and an unordered list in HTML?
Ordered lists <ol>: each item in a list is numbered → could use it for steps of a recipe; legal contract; something that needs to be defined by a number essentially
Unordered list </ol><ul> → begin with a bullet point. Does not indicate an order of anything [ingredient list]</ul>
Is an HTML list a block element or an inline element?
A list is a block element. It will create a new line for each of its list items & push everything else down the list.
What HTML tag is used to link to another website?
< a > Tag with the href attribute’s value being the page that you want people to go to when they click on your specific link.
If linking to another website, you would use the absolute URL.
< /a >
What is an absolute URL?
It is the full web address that you want someone to go to when they click on the link. For example, it starts with the domain name and can be followed to a specific page.
Could take you to a completely different website.
Example: google.com
What is a relative URL?
Links to pages within the SAME site. It is a shorthand version of a URL because you don’t need the domain name.
Instead, you just need the shorter name of it (most likely it will just be the name of the file instead; if it’s in the same folder). If it’s not in the same folder then it might be a little more complex.
How do you indicate the relative link to a parent directory?
You use ../ to indicate folder above the current one, then you follow it with the file name.
Example:
../index.html (home)
How do you indicate the relative link to a child directory?
Use the name of the child folder(directory), then a forward slash, then the file name
Example:
music/listings.html (page)
How do you indicate the relative link to a grand parent directory?
Repeat the ../ to indicate that you want to go UP two folders (instead of just one), then follow with the file name
Example:
../../index.html (returns user to homepage)
How do indicate the relative link to the same directory?
Just use the file name. You don’t need to include anything else since it is within the same folder/directory.
Example:
reviews.html
What is the purpose of an HTML form element?
It is where all of the form controls are located. - It’s where interactive controls for submitting the information is located.
Place to collect information from your user.
Give three examples of type attribute values for HTML form elements.
type=”text” → this is used for inserting text into a field.
type=”password” → similar to “text” but the characters are blocked out and hidden so someone cannot see it.
type=”radio” → clicking just one option (note → radio buttons cannot be deselected → use checkbox if you want them to deselect something)
type=”file” → upload a file
Is an HTML < input > element a block element or an inline element?
Input element is an inline-block element. Elements will line up next to each other. But! You can also set the height of the option.
→ So you need to make it a block element or add something like a div element to make it go onto a different line if you’d like for your options to stack
Give five examples of form control elements.
input: creates different types of form controls such as input: type = ”text”
textarea: creates multi-line elements
select: drop-down list
option: option of a drop-down list
fieldset: group elements together
button: create a button
What are the six primary HTML elements for creating tables?
table: Creates the table
tr: Creates the start of each row
td: Creates data elements into the row
th: Creates the heading for either a column or row
thead: Creates the heading of the table (headings should sit inside this element)
tbody: body elements (data contents should reside here)
tfoot: (not common) element for the footer of a table
What purpose do the thead and tbody elements serve?
These are semantic elements that make it easier for screen readers & accessibility purposes.
thead is good for placing the headings of your tables
tbody is good for identifying the content of your headings
Give two examples of data that would lend itself well to being displayed in a table
A financial result –> needing to identify the amount of money in your account or spending for a specific month
Sport results –> looking at the stats of different teams or players
Schedules
What are the names of the individual pieces of a CSS rule?
Selector → which element the rule applies to
Declaration Block: indicates how the element should be styled {⇒ split into two parts
Property → indicate aspects of the element you want to change
Value → indicates the setting you want to use for the property
Ends with the curly brace of the }
In CSS, how do you select elements by their class attribute?
Use a period (full stop) symbol followed by the value of the class attribute.
Example:
In CSS, how do you select elements by their tag name?
Use just their name of the element: example → p, h1, h2
In CSS, how do you select an element by its id attribute?
To match with an ID attribute, you need to use the pound or hash symbol → # & match that with the value of the ID attribute.
Example:
<p>
#entry{
}</p>
Name three different types of values you can use to specify colors in CSS.
RGB Values: colors in terms of how much red, green, and blue are used to make them
HEX Codes: 6-digit codes that represent the amount of red, green, and blue in a color; preceded by hash #
Color Names: 147 predefined color names recognized by browser.
What CSS properties make up the box model?
Content –> What’s written inside.
Padding → space between border of a box and any content contained within it. Adding padding can make text more legible
Border → separates the edge of one box from another box
Margin → sits outside the edge of the border → width can create gaps between borders of adjacent boxes
Which CSS property pushes boxes away from each other?
Margin → push boxes away from each other. This can create more gaps between different elements/boxes. It would allow your reader to have more whitespace to be easier to read.
It will push boxes away if it is a
Which CSS property adds space between a box’s content and its border?
Padding will add the space between a box’s contents & its borders. Adding padding is a great way to make your content more legible.
What is a pseudo-class?
A keyword added to a selector to specify a special state of the element that was selected. An example could be: :hover (change a color of something when the cursor hovers over it)
Another example could be: nth-child(#);
What are CSS pseudo-classes useful for?
It lets you apply the style to an element in response to external factors, changes in the status of content, or the position of the mouse.
Could be useful for user-feedback –> add active styles | can give visual feedback that something can’t be clicked or clicked
Name two types of units that can be used to adjust font-size in CSS
Rem → recommended to use at will make things proportional in your texts.
PX → this often the best way to make sure tha tit will appear as the intended size that you want
Percentages → This is the % of the default size of the element (web browser is 16%) | drawback can be if people adjusted the default size of their browser, this will alter size of the text)
Ems → This is used in relation to
What CSS property controls the font used for the text inside an element?
font-family
(You will typically want to include several values for font-family → you will want to include several different versions of it (with the generic name at the end in case browser cannot load font)
What is the default flex direction of a flex container?
The default direction is row (will appear in a horizontal row automatically)
What is the default flex wrap of a flex container?
Default flex-wrap is “no wrap” so, the items will not wrap
Why do two div elements “vertically stack” on one another by default?
Because they are block elements by default, so they will take up the entire width of their parent container.
This is why you need to set up flex wrap of the container to wrap so that the elements can wrap around each other.
What is the default flex-direction of an element with display: flex?
The default flex-direction is row → you can adjust it with column, row-reverse or column-reverse.
What is the default value for the position property of HTML elements?
position: static
How does setting position: relative on an element affect document flow?
It does not affect the rest of the document flow. The way elements appear is different though.
It only allows you to use different box-offset properties & manipulate where something appears
How does setting position: absolute on an element affect document flow?
It takes that specified element out of the document flow, so the other elements are no longer affected by it on the page.
The other elements pretend it is no longer there and fills the gap that’s left behind.
How does setting position: absolute on an element affect where it appears on the page?
It takes it out of the page so you can move the element around it may appear to overlap other elements on the page
- It appears relative to its nearest non-static ancestor
Box offset properties can be used to specify where it appears on the screen
How do you constrain an absolutely positioned element to a containing block?
You look for the parent container and set that to “position: relative” –> absolutely positioned element will appear relative to non-static ancestor
What are the four box offset properties?
Distances from:
- Top
- Left
- Bottom
- Right
What is the purpose of variables?
It stores data → allows you to call the data throughout a specific script/program.
So you can manipulate it, bring it back when you need to call it
How do you declare a variable?
You need to use a variable keywork like “var, let, const” and then give your variable a name and then you can give it a value if you want
How do you initialize (assign a value to) a variable?
To assign a value to a variable yo use the variable name with an assignment operator (=) and the value you want to give it
What characters are allowed in variable names?
It must begin with a letter, $, _ → cannot start with a number
It can contain letters, dollarsigns, or underscores
Just can’t use reserved words/letters (like var)
Use camelcase for multiple words
What does it mean to say that variable names are “case sensitive”
Means that your variables have to match if you use it throughout your program
So…. “score” and “Score” are different variables
Need to be consistent
What is the purpose of a string?
Allows you to have text content or things that need to be stored with letters/characters
What is the purpose of a number?
It can be useful for calculations → mathematical operations
What is the purpose of a boolean?
Can help determine which part of a script should be run → purpose is for decision making
Allows us to make branches/paths in our code
What does the = operator mean in Javascript?
Assignment operator → set of data is assigned to something
How do you update the value of a variable?
Use the variable’s name → and give it a new value. Don’t use “var” keyword
What is the difference between null and undefined?
Null → intentiionally is a nonexistent or invalid object
→ null is a placeholder (temporary absence of something, don’t know the value of it yet) → has to be assigned to something | when you see null (someone said this is empty on purpose, maybe needs a value later, but now it’s empty)
Undefined → nothing being assigned, no one has even given it a placeholder. Just empty.
Why is it a good habit to include “labels” when you log values to the browser console?
Organization purposes → reminders/description of what you’re doing. Without labels it’s difficult to understand what is happening
Give five examples of Javascript primitives.
Number
String
Boolean
Null
Undefined
What data type is returned by an arithmetic operation?
A number (performs basic math)
What is string concatentation?
When you combine different string values using the string and a + sign
What purpose(s) does + plus operator service in JavaScript?
It can be used for addition
It can be used to combine & join strings together
What data type is returned by comparing two values (<, >, ===, etc.)?
A boolean expression (true, false)
What does the += “plus-equals” operator do?
adds the value of the right operand to a variable and assigns the result to the variable
What are objects used for?
Useful for storing lots of different variables and details into something.
used to group items together.
What are object properties?
They are variables that are part of an object
Describe object literal notation.
You include:
Var objectName (whatever you want to name it) {
key: value (this makes up a property),
};
How do you remove a property from an object?
Use the delete operator
What are the two ways to get or update the value of a property?
You can use dot notation (name of the object . property) or you can use square brackets:
objectName[‘property’] = property value
What are arrays used for?
It can store a list of values that you want (esepcially if you don’t know how many items will be in a specific list)
Describe array literal notation.
You use the:
Var arrayName = [ value, value, value];
How are arrays different from “plain” objects?
The key for reach value of an array is an index number instead of a property name
What number represents the first index of an array?
0
What is the length property of an array?
It tells you the number of arrays that it holds
How do you calculate the last index of an array?
You use the length of the array - 1
What is a function in JavaScript?
Functions allow you to package up code for use later in your program.
They can be a list of steps that you can call over and over.
Describe the parts of a function definition.
The function keyword to begin the creation of a new function.
An optional name.
A comma-separated list of zero or more parameters, surrounded by () parentheses.
The start of the function’s code block, as indicated by an { opening curly brace.
An optional return statement.
The end of the function’s code block, as indicated by a } closing curly brace.
Describe the parts of a function call
- The function’s name.
- A comma-separated list of zero or more arguments surrounded by () parentheses.
When comparing them side-by-side, what are differences between a function call and a function definition?
When you are calling a function you are using the function name and passing arguments
When you are defining a function you are using the word “function” and declaring parameters as placeholders for values that would be in your function. Would also have a code-block { }
What is the difference between a parameter and an argument?
Parameter is a placeholder that you are using when you are defining a function.
An argument is a value that you are passing when you are calling a function. They are the actual values that are provided when you’re using them
Why are function parameters useful?
They are useful because they act as a placeholder for a value that is unknown until you call the function
Allows us to create variants in our code –> create a single tool that can be used in multiple places
What two effects does a return statement have on the behavior of a function?
1 - Causes the function to produce a value we can use in our program. (results can be used outside the function)
2- Prevents any more code in the function’s code block from being run. (stops the function)
Why do we log things to the console?
Use: console.log in your program to check the outputs of things so that you can see if your code is working the way you want it to
Can be a debugging tool if necessary
Gives you a way to see something in an easily visible space
What is a method?
It’s a function that is a property of an object → it is essentially a built-in task that can be performed by an option or a task that is called on an object → function stored into the property of an object
How is a method different from any other function?
Have to provide context of what object you are pulling it off of
Stored into an object (HAVE to state the object you are using the method from)
How do you remove the last element from an array?
Use the pop() method
How do you round a number down to the nearest integer?
Use the “Math.floor()” method of your number or value
ALWAYS rounds down
How do you generate a random number?
Use Math.random();
Prints a number between 0 and 1
Represents a percentage
How do you delete an element from an array?
Use the splice() method
You can use splice and then state which index you wish to remove and how many elements you want to remove from the starting point
How do you append an element to an array?
Append → adds to the end
Use the push ( ) method, which will allow you to add one or more elements to an array
How do you break a string up into an array?
Use the split ( ) method of an array
Inside → dictate what you want to split out of the array
Do string methods change the original string? How would you check if you weren’t sure?
No, they pass them into a new array that they create
You can check by using a console.log statement and passing the variable with the string to see if it changed
Can also look at documentation
Roughly how many string methods are there according to the MDN Web Docs?
Over 50 different string methods?
Is the return value of a function or method useful in every situation?
Should always have an application. It’s useful, but it might not always be necessary to include in something
If a function does not have a return value, the console log will say “undefined” after the function is run
Roughly how many array methods are there according to the MDN Web docs?
Over 50?
What three-letter acronym should you always include in your Google search about a JavaScript method or CSS property?
MDN
Give 6 examples of comparison operators.
<,
>,
==,
<=,
>=,
=== (strictly equal),
!=,
!== (strictly not equal to)
What data type do comparison expressions evaluate to?
Boolean (true or false)
What is the purpose of an if statement
Allows you to run a conditional statement so that your program can make decisions based on whether a condition has been met.
Can allow us to do branching actions
Is else required in order to use an if statement
No –> You can have an “if” statement on its own, you could just have an “if” and not do anything afterward
Describe the syntax (structure) of an if statement.
- if keyword
- Need a condition statement in ( )
- Opening curly brace
- Code to execute if the value is true
- Closing curly brace
What are the three logical operators?
&& (logical and)
| | (logical or)
! (logical not – boolean inverse)
How do you compare two different expressions in the same condition?
You use logical operators to make the comparisons of the different expressions (logical AND or logical OR)
You also need to use parentheses between each expression
What is the purpose of a loop?
Allows you to repeat code as many times as you want.
What is the purpose of a condition expression in a loop?
It’s the break to the loop → decides if they loop should stop or keep going
What does “iteration” mean in the context of loops?
Each pass / cycle through a loop
When does the condition expression of a while loop get evaluated?
Before each pass through a different loop (if the expression is true, the statement in the loop is executed, if it is false, it will not execute the statement in the loop
When does the initialization expression of a for loop get evaluated
It gets evaluated once before the loop begins (typically it is a counter variable)
When does the condition expression of a for loop get evaluated?
It gets evaluated before each loop iteration (if the loop evaluates to true, the statement is executed, if false, the execution exits the loop & goes to first statement after “for”)
When does the final expression of a for loop get evaluated?
End of each loop iteration (before the next evaluation of condition)
Besides a return statement, which exits its entire function block, which keyword exits a loop before its condition expression evaluates to false?
break
What does the ++ increment operator do?
It adds one to the counter (so it increments the loop)
Drives the loop toward termination
Get closer to reaching it as false
Driving the loop TOWARD termination/false
How do you iterate through the keys of an object?
You use a “for…in…” loop.
The loop inside the “for..in” loop is iterated through each property once
What are the four components of “the Cascade”
Source Order → order that CSS rules are written in your stylesheet/ Last element provided is the ultimate item taken affect
Inheritance → properties on a child HTML element receive a value from a parent element. If no CSS declared on the child
Specificity → decides how a browser decides which CSS property to apply to an element
!Important
What does the term “source order” mean with respect to CSS?
The order that CSS rules are written in your stylesheet/ Last element provided is the ultimate item taken affect
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
Inheritance makes it possible
Inherited properties = default set from parent element (children will get this computed value)
Non-inherited properties → properties set at the initial value of the property
List the three selector types in order of increasing specificity.
Type - Class - ID
Why is using !important considered bad practice?
Because it overrides specificity; Use cascade layers & lower weight specificity throughout CSS so styles can be easily overridden with more specific rules
What does the transform property do?
It allows you to rotate, scale, skew, or translate an element across the coordinate planes
Give four examples of CSS transform functions.
rotate();
translateY();
scale();
skew();
The transition property is shorthand for which four CSS properties?
transition-property,
transition-duration,
transition-timing-function,
and transition-delay.
Why do we log things to the console?
Use: console.log in your program to check the outputs of things so that you can see if your code is working the way you want it to
What is a “model”?
A diagram that represents something
Which “document” is being referred to in the phrase Document Object Model?
It is a copy of the web page you are on (HTML element)
What is the word “object” referring to in the phrase Document Object Model?
JavaScript objects → JavaScript object modeling the HTML document.
What is a DOM tree?
An element plus ALL of its content and ALL of its configurations
Could be an entire web page or just one element.
Give two examples of document methods that retrieve a single element from the DOM.
getElementById( )
querySelector( ) –> querySelector is all you really need to use.
Give one example of a document method that retrieves multiple elements from the DOM at once
querrySelectorAll( ) –> only one really needed.
Why might you want to assign the return value of a DOM query to a variable?
Because you want to store the location of the element within the DOM tree → if you use it more than once it saves the browser time looking for the element.
What console method allows you to inspect the properties of a DOM element object?
Console.dir() → allows you to see the different properties
(short for directory)
Why would a script tag need to be placed at the bottom of the HTML content instead of at the top?
B/c the browser loads the HTML document first.
Gives time for your HTML to load
What does document.querySelector() take as its argument and what does it return?
It takes a string that has one or more selectors it needs to match (needs to be a valid CSS string)
Returns FIRST element with the document that matches the specified selector or group of selectors → if no match found then NULL
What does document.querySelectorAll() take as its argument and what does it return?
It takes a string that has one or more selectors it needs to match (needs to be a valid CSS string)
Returns a non-live Node list that has one element object for each element that matches the specified selector
Why do we log things to the console?
Use: console.log in your program to check the outputs of things so that you can see if your code is working the way you want it to
What is the purpose of events and event handling?
Events provide interactivity for your users, they can trigger code that you are going to use, and they can have code that responds to users. Sometimes it can be not user driven (like time or page loading)
Event handling determines how users interact
Event handling includes;
Selecting the node that you want script to respond
Indicating events on nodes that you want to trigger responses
State the code you want run once an event occurs
Are all possible parameters required to use a JavaScript method or function?
No –> often there are optional parameters
What method of element objects lets you set up a function to be called when a specific type of event occurs?
addEventListener(……..); Call it on whatever element you want to add it for and listen for a specific event.
What is a callback function?
Function that is passed into another function as an argument, which is invoked inside the outer function.
Expected result = expected function being called will be called, too.
What object is passed into an event listener callback when the event fires?
The event object & contains all the data about that object when the event occurs –>
What is the event.target? If you weren’t sure, how would you check? Where could you get more information about it?
The actual element where the event occurred (not the element itself). Where you interacted where the event occurred.
What is the difference between these two snippets of code?
element.addEventListener(‘click’, handleClick)
element.addEventListener(‘click’, handleClick())
Without the parenthesis it represents that the function runs when the event fires –> it is a callback function
With the parentheses () it means that the code is run was the page loads –> It is a return value that will be in its place
What is the className property of element objects?
It gets and sets the value of the class attribute of the DOM specified element
How do you update the CSS class attribute of an element using JavaScript?
You use the element you want to use.
And then use the .className property
and THEN you assign that to a string variable that represents the class you want (or multiple classes with space separators)
What is the textContent property of element objects?
It allows you to collect or update text that is in the containing element
How do you update the text within an element using JavaScript?
- Whatever the DOM location query is from ( a variable)
- .
- You use the textContent property on the containing element.
- Whatever string or value you want it to be.
Is the event parameter of an event listener callback always useful?
No, it is not necessary [odds of an event listener that only influences one thing is relatively small…in general –> want to be prepared for possibility of adjusting]
Would this be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
More complicated because you would have to use the text.content property to update the count for each of the different clicks and assign it to the value.
