CSS/HTML/JavaScript
What is the syntax for an embedded expression in JavaScript?
${expression}
How would you indicate both .class2 should be a descendant (nested under) .class1 when selected in a CSS rule?
.class1 .class2 (space between them)
An image map, with clickable areas:
<area>
How does this code work to return the highest number?
Because each time the loop is iterated through, myHand[0] is assigned the next element in the array.
What is CSS?
Cascading Stylesheets is a declarative language used by a browser to style a web page, overwriting rules for HTML elements in cascading layers of increasing selector specificity and source precedence. CSS rules will be inherited by child nodes of these elements.
What's the difference between block and inline-block?
Compared to display: block , the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
What's the difference between inline, inline block, and block?
In line will flow with the text (in p tags in all examples here) before and after it. Inline block will start after text but bring up the text after it Block will be completely separate, on separate lines, from text before and after https://www.w3schools.com/cssref/pr_class_display.asp
How do you vertically position an element in CSS?
Set an absolute element inside a relative one <!DOCTYPE html> <html> <head> <style> .container { height: 200px; position: relative; border: 3px solid green; } .vertical-center { margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } </style> </head> <body> <h2>Vertical Center</h2> <p>In this example, we use positioning and the transform property to vertically center an element inside a container element:</p> <div class="container"> <div class="vertical-center"> <p>I am vertically centered.</p> </div> </div> </body> </html>
What is the body part of a for loop?
The block of code to execute until the condition is false
What is fall through in a switch case?
When a break statement is reached, the switch terminates, and the flow of control jumps to the next line following the switch statement. Not every case needs to contain a break. If no break appears, the flow of control will fall through to subsequent cases until a break is reached.
Will the default case in a switch statement run if a non-default switch case expression is run but there is no break statement after it?
Yes
Will a web page work even without a DOCTYPE declaration?
Yes, but it's best practice
What are the three parts of a for statement in a for loop called?
clauses
What does <meta name="viewport" content="width=device-width"> do?
ensures sites use the proper width for mobile devices
What does the head section of an HTML page contain?
info about the page itself
Where does the title of an HTML document show up?
the tab of your browser with the favicon
28) Does a <!DOCTYPE html> tag is a HTML tag? No, the <!DOCTYPE html> declaration is not an HTML tag. There are many type of HTML e.g. HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1 etc. So, <!DOCTYPE html> is used to instruct the web browser about the HTML page.
x
What is the syntax for single and multiline comments in CSS?
/* */
What are some essential attributes that have to do with color in CSS?
1 color: font color 2 background-color: an element's background color 3 border: border color 4 box-shadow: an element's shadow 5 text-shadow: font shadow
What are two reasons you should build both a mobile and a desktop site?
1. A mobile site on desktop is usable but plain. 2. A desktop site on mobile can be completely unusable.
What are three essential characteristics of block elements?
1. Always starts on a new line 2. Takes up available width of the parent 3. Respects box style aspects of width/height/padding/margin
What are some characteristics of block display?
1. Always takes up the full width of the viewport (browser size) by default 2. Cannot add adjacent elements 3. Can decrease width and center (see lesson companion)
What are two ways you can specify what style changes animations will make, with examples?
1. By using from and to 2. By using percentages Examples: 1. @keyframes example { from {background-color: red;} to {background-color: yellow;} } The following example will change the background-color of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete: 2. @keyframes example {0% {background-color: red;}25% {background-color: yellow;}50% {background-color: blue;}100% {background-color: green;}} The element applied to for both examples: div {width: 100px;height: 100px;background-color: red;animation-name: example;animation-duration: 4s;}
What are three essential characteristics of inline elements?
1. Don't start on a new line 2. Don't respect top & bottom padding/margin 3. Don't respect width & height
What are some characteristics of the 140 color names modern browsers support?
1. Easy to type/remember 2. Very limited choices 3. Good for quick builds/tutorials/sandbox
What are three challenges with layouts that flexbox attempts to make up for?
1. HTML initially made to share scientific articles 2. CSS was built with similar solutions to newspaper layouts 3. Monitors used to be similar in size and ratios
What are some characteristics of the 16 million hex values modern browsers support?
1. Lots of colors available 2. Compatible with older browsers 3. Numbering not intuitive
How do you write different rules by screen size?
1. Need separate rule 2. Rule will overwrite other rules once the size is met
What are the two purposes for including the alt attribute?
1. So readers for the visually impaired can be used to identify the image, area, or input 2. To show relevant text information if the element containing the attribute does not render correctly
What are the characteristics of a specific hex value?
1. Starts with a # 2. Values range from 0 - 9 and then A - F 3. 0 is the least intense, F is most intense 4. Can be 3, 4, 6 or 8 numbers long 5. Value order is red, green, blue, alpha(optional)
What are some examples of pseudo selectors?
1. When a link has been visited :visited 2. When an element is hovered over :hover 3. Choosing every other element, or following another numeric pattern :nth-child() 4. Selecting everything but NOT some element :not
What characterizes mobile-first design?
1. build smaller then scale up 2. build minimally and add components
What is the specificity order for CSS rules?
1. id 2. classes, attributes and pseudo-classes 3. elements and pseudo-elements
What is each of the three clauses in the for statement of. a for loop called?
1. initializer (or initialization) 2. condition 3. afterthought (or incrementation)
How does each of the values for flex-direction orient the rows and columns?
1. row (default): left to right in ltr; right to left in rtl 2. row-reverse: right to left in ltr; left to right in rtl 3. column: same as row but top to bottom 4. column-reverse: same as row-reverse but bottom to top
What are the properties in a track tag?
1. src 2. kind 3. srclang 4. label
In Flexbox, what are the parent element and child elements called?
1. the flex container 2. the flex items
How many named colors do modern browsers support?
140
How many hex color values are there?
16 million
When was Flexbox released?
2009
What are the pseudoelements in CSS, what do they do, and what are examples?
::after p::after. Insert something after the content of each <p> element ::before p::before. Insert something before the content of each <p> element ::first-letter p::first-letter. Selects the first letter of each <p> elemen t::first-line p::first-line. Selects the first line of each <p> element ::marker ::marker Selects the markers of list items ::selection p::selection Selects the portion of an element that is selected by a user
What are the pseudoclasses in CSS, what do they do, and what are examples of what they do?
:active a:active Selects the active link :checked input:checked Selects every checked <input> element :disabled input:disabled Selects every disabled <input> element :empty p:empty Selects every <p> element that has no children :enabled input:enabled Selects every enabled <input> element :first-child p:first-child Selects every <p> element that is the first child of its parent :first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent :focus input:focus Selects the <input> element that has focus :hover a:hover Selects links on mouse over :in-range input:in-range Selects <input> elements with a value within a specified range :invalid input:invalid Selects all <input> elements with an invalid value :lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it" :last-child p:last-child Selects every <p> element that is the last child of its parent :last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent :link a:link Selects all unvisited links :not(selector) :not(p) Selects every element that is not a <p> element :nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent :nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child :nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child :nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent :only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent :only-child p:only-child Selects every <p> element that is the only child of its parent :optional input:optional Selects <input> elements with no "required" attribute :out-of-range input:out-of-range Selects <input> elements with a value outside a specified range :read-only input:read-only Selects <input> elements with a "readonly" attribute specified :read-write input:read-write Selects <input> elements with no "readonly" attribute :required input:required Selects <input> elements with a "required" attribute specified :root root Selects the document's root element :target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) :valid input:valid Selects all <input> elements with a valid value :visited a:visited Selects all visited links
How are <span> and <div> tags different?
<div> is a block-level element and <span> is an inline element.
What tags can you use for italics, bold, strike through, and underline if the semantic tags for them don't work?
<i>, <b>, <s>, <u>
How do we add a red asterisk after a required input field?
<span class="required-field">*</span>
What's the difference between wrap and wrap-reverse for the flex-wrap property (when the text-direction is set to column)?
???
What's the difference between left and start as values for the Flexbox justify-content property?
??? With left, items are packed toward left edge of the container, unless that doesn't make sense with the flex-direction, then it behaves like start.
What properties do CSS animations have and what do they do?
@keyframes Specifies the animation code animation A shorthand property for setting all the animation properties animation-delay Specifies a delay for the start of an animation animation-direction Specifies whether an animation should be played forwards, backwards or in alternate cycles animation-duration Specifies how long time an animation should take to complete one cycle animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) animation-iteration-count Specifies the number of times an animation should be played animation-name Specifies the name of the @keyframes animation animation-play-state Specifies whether the animation is running or paused animation-timing-function Specifies the speed curve of the animation
What is Bootstrap?
A CSS framework
What is a card in terms of HTML?
A collection of HTML elements that are repeated on a website that are presented in a consistent style
What is a cubic bezier curve in CSS?
A curve that is is defined by four points: P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve, and in CSS these points are fixed, with the coordinates as ratios.
Is the flex-grow property set on a flex container or a flex item?
A flex item
What determines a flex item's main size?
A flex item's width or height, whichever is in the main dimension
What helps screenreaders understand how to prompt the user accessing your form?
A label's "for" attribute connects to the "id" of an input
What controls are shown when the controls attribute is used with audio tags?
A play button and a slider control for volume.
What is the difference between a pseudo element and a pseudo class in CSS?
A pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element Insert content before, or after, the content of an element A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it gets focus
Show rule (or rule-set) selector, declaration, property, and declaration value in a diagram.
A rule, or rule-set is a specific combination of selectors and declarations that go together 1 div { 2 border-style: solid; text-align 3 : center 4 ; } 1 selector 2 declaration 3. property 4. declaration value
How should JSON best be thought of as?
A textual, language-independent data-exchange format, much like XML, CSV or YAML. It is an object but it works like a string
What kind of value does the flex-grow property
A unitless value that serves as a proportion
What do the <legend> tags in a fieldset do?
Act as a title
What does a pseudo selector in CSS let us do?
Allow us to choose HTML elements in special states
What are CSS Animations?
An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.
Which is more dynamic and flexible: transitions or animations, and why?
Animations, because they can change property values inside their keyframes, while transitions only define how a change occurs rather than provide specific start and end values
What's the difference between attributes and properties regarding HTML?
Attributes are defined by HTML and CSS. Properties are defined by the DOM. Value of an attribute is constant. Value of a property is variable; a value that you can get or set (like changing the content of an HTML element).
Why does NaN not equal itself?
Because NaN is part of the Number class, so the value of NaN is not actually a number???
Why does console.log("hello") return "hello" then undefined?
Because it is a statement but it is also an expression, as it evaluates to "hello" when the console.log() method executes.
What's the difference between the <u> tag and the <ins> tag?
Both create an underline but are used for different purposes. The <ins> tag is for underlining text that is the correct text to follow incorrect text that has a strike-through mark through it (that has <del> tags). The <u> tag represents some text that is unarticulated and styled differently from normal text, such as misspelled words or proper names in Chinese text.
What does the flexbox order property do?
By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.
What's the difference between CSS Transitions and CSS Transforms?
CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration. CSS transforms allow elements styled with CSS to be transformed in two-dimensional or three-dimensional space.
Characteristics of inline styles
Can manipulate with JavaScript Overrides all other styles Difficult to maintain for multiple similar tags Try it in the lesson companion
What do you do to make <li> tags (or any block element) appear side by side?
Change the display format to inline-block
What does the matrix() method, which is a value of the CSS property transform, do?
Combines all the 2D transform methods into one. The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements. The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
What is the usual keyboard shortcut for commenting out lines in an IDE?
Command + forward slash
What does the box-sizing property do?
Defines how the width and height of an element are calculated: should they include padding and borders, or not. With the border-box value, the height and width of a child box is adjusted to fit the parent box (container) ... the already existing height, width, padding, and border size of the parent are taken into consideration and not added to the size of the parent box but are subsumed in it
Z-index
Determines the element's position in a stack. Think of the z-axis. Accepts any integer as a value. Default is 0 Can only be used on positioned elements
What is a flex item's main size property?
Either the 'width' or 'height' property, whichever is in the main dimension
What does ECMA stand for?
European Computer Manufacturers Association
Which is best practice for coding CSS, in one line or in an expanded block?
Expanded block
Why does the console return undefined when assigning a value to a variable?
Expressions always return a value. Statements always return undefined. This happens because a variable declaration ( var something = something ) is a statement, whereas a variable assignment ( something = something ) to the already declared variable is an expression. In this way, an initial value itself does not represent an expression.
In Flexbox, how are the cross-start and cross-end sides situated?
Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
Is Flexbox layout or Grid layout more appropriate to the components of an application, and small-scale layouts?
Flexbox layout
How are flex-items laid out?
Following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).
What is the kind attribute for in <video> tags with subtitles/captions?
For indicating whether subtitles or captions are used
What is the <track> tag for in <video> tags?
For using WebVTT files
What are some examples of kinds of types in <input> tags?
Format Specific (URL, email, number) Password (hidden characters) Date (may have date picker support) Color (may have color picker support) Button (for uses other than submit) File (for uploading files)
What is the "Holy Grail" layout?
Full-width header and footer Navigation, aside and main are proportionately resized
What's the difference between subtitles and captions?
Generally, subtitles refer to foreign language translations for those who don't understand the language of the original content, and captions are for those who cannot hear the audio, providing both words and non-verbal sound effects.
Is Flexbox layout or Grid layout more appropriate for larger scale layouts?
Grid
What does the flex-grow property of a flex-item determine?
How much of the available space in a flex container the flex-item takes up
Why should you include a message that reads "Your browser doesn't support the audio tag!" when embedding audio and video files in a website?
In case a user has a very old browser that doesn't support HTML5 (WAV, MP3, and OGG file types are not supported)
Where does localStorage store variables when coded for it?
In this browser In this website
Bootstrap
Initially developed at Twitter Made open source in 2011 Used by 21.5% of websites, according to W3techs.com
Where do you find a public link and already coded iframe for a Google Calendar calendar, with the option to customize?
Integrate calendar, after clicking on the three vertical dots to the right of the specific calendar involved then clicking on settings above the box of color option circles
Why can using autoplay loop with audio controls be a bad idea?
It doesn't work on some common browsers and it's often considered annoying for a website to load with sounds/music already playing.
What does the controls attribute in audio tags do?
It gives the user a set of control buttons to use.
What does the <fieldset> tag do?
It groups inputs in a form and draws a box around them.
What is the purpose of the HTML lang attribute's identification of text content for the related web page?
It helps search engines return language specific results, It is used by screen readers that switch language profiles to provide the correct accent and pronunciation
Is it easier to build the mobile site or the desktop site first?
It is easier to build the mobile site first
What does making an element that's inline by default and making its display attribute inline-block do?
It lets you set the height and width of the element
Why is Flexbox called "flex"?
It provides a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic
What does the afterthought in the for statement in a for loop do?
It runs at the end of each cycle of the loop ("this is how I get from where I start to where I stop")
What is the initializer in the for statement of a for loop?
It sets a value to start with and runs before the loop
What does the pattern HTML attribute do?
It specifies a regular expression that the <input> element's value is checked against on form submission. Note: The pattern attribute works with the following input types: text, date, search, url, tel, email, and password. Tip: Use the global title attribute to describe the pattern to help the user. They use regular expressions to determine the allowed patterns. Example: <form action="/action_page.php"> <label for="country_code">Country code:</label> <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br> <input type="submit"> </form> Note: The pattern attribute doesn't itself make an input field required, but it does limit it when something is actually entered
What does the Flexbox flex-shrink property do?
It specifies how the item will shrink relative to the rest of the flexible items inside the same container. The flex-shrink property is a sub-property of the Flexible Box Layout module. It specifies the "flex shrink factor", which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row. When omitted, it is set to 1 and the flex shrink factor is multiplied by the flex basis when distributing negative space.
What was the problem with the "Holy Grail" layout?
It was very hard to achieve before newer CSS like flexbox
What does it mean if an element is not positioned?
It's static, either default or even if explicitly shown as position: static
Is a JSON object a string?
No. JSON is a text-based data format following JavaScript object syntax. ME: In this sense, JSON and JS are the same, but JSON is a specific kind of object that exists as a string in terms of JSON exists as a string — useful when you want to transmit data across a network. It needs to be converted to a native JavaScript object when you want to access the data. From the context of data - JSON is not a string.
Is your embedded Google Calendar publicly accessible by default when you include it in an <iframe> tag?
No. It will only be viewable to people who you have shared the calendar
Can you encounter errors in CSS?
No. It will try to render whatever you've written as best as possible.
Are WebVTT files something automatically provided when a video is made?
No. The files need to be constructed. Writing subtitles on a WebVTT text file manually takes a lot of time. Services will do it for you for a cost either completely or will provide the technology for you to see and edit the subtitles being made from the video files with options to edit them
Can a JavaScript class have multiple constructors?
Not in the same scope (ME) Because an object has a single associated prototype, JavaScript cannot dynamically inherit from more than one prototype chain.
What are some benefits of using an external stylesheet for CSS?
One file can be applied to multiple pages on a web site Separates content from style Better organization for teamwork and large projects
What are boolean attributes in <input> tags and an example?
Only values are ON or OFF (presence means "ON") "readonly", "required", and "checked" are great examples of this
What is a use case for explicitly defining static positioning?
Override another rule that has the element positioned otherwise
What HTTP Verb would you choose for your form's method if you were sending a username and password combo?
POST, because the data is not visible in URL and it will be encrypted when sent!
Sticky positioning
Position toggles between relative and fixed based on the element's current scroll position Requires at least one of the top, bottom, left, or right properties for the "sticky" part to work Might be worth mentioning it's not fully supported across all browsers like the other values are Majority support it though. If they haven't seen it yet, this is a good place to briefly introduce caniuse https://caniuse.com/?search=position%3A%20sticky
absolute positioning
Positions the element relative to its closest positioned (non-static) ancestor
Fixed positioning
Positions the element relative to the browser window and will stay there even while scrolling
What is the Geolocation API?
Provide location to web applications Entry point of API: navigator.geolocation Main class of the API: Geolocation An API entry point is the base URL for all operations. The Navigator interface represents the state and the identity of the user agent. The navigator.geolocation property is read-only and returns a Geolocation object.
What is shown in DevTools under local storage automatically when the browser attempts to turn a set value that's an array or an object into a string?
Remember that saving values in localStorage turns them to strings *automatically* When the browser tries to turn something like an array or an object, which contains other variables, into a string, it creates this pretty useless '[object Object]' string.
What are some disadvantages to using <iframe> tags?
SLOW: IFrames are undeniably slow compared to most other web content you could be loading, so definitely don't make a practice of putting a bunch on a single page! INSECURE: Any time we're loading content that didn't come directly from code we wrote ourselves, there's a potential security risk. While there are some ways to make iframes more secure (such as the sandbox attribute), it's a good thing to keep security in mind as we learn to write back-end code and store sensitive data in databases.
What are two benefits of using CSS for styling?
Separation of Concerns: HTML is for content and CSS is for appearance Reusable styles: use one stylesheet for many pages across a web site
How do you allow everyone to see the calendar even if they are not logged in and you haven't specifically shared it with them?
Set it to public
What is the <bdo> tag for?
Showing bidirectional text (with dir attribute with ltr as default but takes value rtl)
Why should you use the <abbr> tag even though the text shows that an abbreviation is being used?
So that screen readers will read it as an abbreviation and not a word
How are flexbox properties organized in general?
Some of them are meant to be set on the container (parent element, known as "flex container") whereas the others are meant to be set on the children ("flex items")
Padding
Space around the content. It's transparent, so it will be the same color as the background-color of the element.
What does the transition-timing-function property do?
Specifies the speed curve of the transition effect
Why is it important to learn Flexbox?
Static layouts became very challenging to create Flexbox was created with a new set of logic to build responsive layouts
How do you show struck-through text in HTML?
The <del> tag
How do you show text that's italicized in HTML?
The <em> tag
How do you show text that's underlined in HTML?
The <ins> tag
Does the POST or GET method pass data in the URL's querystring?
The GET method
What are the <details> and <summary> tags used for?
The HTML Details Element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element.
Difference between Javascript engine and runtime
The JavaScript code would be the instructions to the robot to put out a fire. The JavaScript engine would be the robot which can understand the instructions and act on it. The JavaScript runtime would be the fire truck, and the water gun.
What is the alt attribute for?
The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.
What properties in CSS can be used with the cubic-bezier() function?
The animation-timing-function property and the transition-timing-function property
If none of an element's ancestors are positioned, where will an element that has absolute positioning be positioned relative to?
The browser window
Do the ::before and ::after pseudoelements place content before/after an element's tags or directly after the content within the tags?
The content within the tags
With Flexbox, what is the axis perpendicular to the main axis called?
The cross axis
What's the difference between a do while loop and a while loop?
The do-while loop is similar to while loop; differences: the block part comes first, after the do keyword, then comes the while keyword then the condition and a parenthesis It executes the block and evaluates the while condition after the execution of code. Then it follows along the usual logic of a while loop. So do-while loop will execute the code block at least once.
How is the flexbox layout different from regular layouts?
The flexbox layout is direction-agnostic. With regular layouts, block is vertically-based and inline is horizontally-based.
What is tweening in CSS?
The in-between states of a CSS Transition, done in a smooth and appealing way
What does the Flexbox justify-content property do?
The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). Defines the alignment along the main axis Helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size Exerts some control over the alignment of items when they overflow the line
What does the direction of the cross axis depend on?
The main axis direction
What is The main axis of a flex container?
The primary axis along which flex items are laid out.
What happens if all flex-items in a flex-container are set to 1?
The remaining space in the container will be distributed equally to all children
What would happen if one of the children in a container of several children of equal width with a flex-grow value of 1 is given a value of 2?
The space of the one with a value of 2 would take up twice as much space as the others (or it will try to, at least)
Is the display property declared on an element that contains elements that represent the desired display option or the specific elements themselves?
The specific elements themselves
What does the srcset attribute for tags such as <img> and <source> do?
The srcset attribute specifies the URL of the image to use in different situations. This attribute is required when <source> is used in <picture>.
What's the difference between.a transition and an animation in CSS?
The transition defines how the change occurs, but not the specific start and end values. Animations, on the other hand, can change property values inside their keyframes. The property values don't even need to exist outside of the animation keyframes. This makes animation far more dynamic and flexible than transitions.
What is a flex-item's cross size?
The width or height of a flex item, whichever is in the cross dimension
What do pseudoelements do in CSS?
They add content to the content of "regular" CSS dynamically.
How are <span> and <div> tags similar?
They are both container elements.
How do elements behave with static positioning?
They follow the normal flow of the document
How do elements behave with relative positioning?
They're positioned relative to their default position
What's the difference between PX, EM, and REM; and %, VW, and VH?
While PX, EM, and REM are primarily used for font sizing, %, VW, and VH are mostly used for margins, padding, spacing, and widths/heights. To reiterate, VH stands for "viewport height", which is the viewable screen's height. 100VH would represent 100% of the viewport's height, or the full height of the screen.
What's the difference between content-box and border-box as possible values for box-sizing?
With content-box (default), width and height only apply to the content of the element (so the size of the bordered box could be much larger than the size of the text content) With border-box, width and height apply to all parts of the element: content, padding and borders
What's the difference between wrap and wrap-reverse for the flex-wrap property (when the text-direction is set to row)?
With wrap, flex items will wrap onto multiple lines, from top to bottom. With wrap-reverse, flex items will wrap onto multiple lines from bottom to top.
Are WebVTT files simple text files?
Yes
Can an element have more than one class?
Yes
Can multiple sources be used for the same resource with an audio tag?
Yes
Does a table footer (<tfoot> tag) need <tr>/<td> tags?
Yes
In JS, can you have a constructor call more than one constructor function within it?
Yes
Is the <span> tag easily styled by CSS or manipulated with JavaScript using the class or id attribute?
Yes
Is the first source used for a resource in audio tags when there are multiple sources indicated?
Yes
Must the thousandths of a second be included for the time-stamps (the ttt in hh:mm:ss.ttt) in a VTT file to work?
Yes
Can a more specific element selector, such as a nav compared to body, override the more general element selector?
Yes Example: body { background-color: #0000ff; font-family: 'Courier New', Courier, monospace; color: rgb(255, 255, 255);} nav { background-color: #8f00b8;}
Does a JS class have an implicit constructor?
Yes (ME as an object would be able to be constructed through the prototype even without the syntactic sugar of a class) However, if you provide your own constructor, and your class derives from some parent class, then you must explicitly call the parent class constructor using super
In most cases, are captions required by US Law?
Yes Relevant laws include: - The Rehabilitation Act (1973) - The Americans with Disabilities Act (1990) - The 21st Century Communications and Video Accessibility Act (2010)
You can use the same id for multiple elements of different kinds, but can you do so for the same kind of element?
Yes, but you should use class instead
Should you put a break statement after the default in a switch case statement? If so, why?
Yes. Refactorability. If all your branches end with break or return, you can reorder them without changing the meaning. This makes it less likely for such a reordering to introduce a regression. Consistency, and Least Surprise. Consistency says your branches should end consistently, unless they are actually different in meaning. The Principle of Least Surprise dictates that similar things should look similar. Ending the last branch of a switch block exactly like the preceding ones fulfills both, which makes for easier reading and understanding. If you leave out the explicit break, the last branch will be optically different (which is especially important for quick scanning), and in order to see that it's really not different, the reader has to descend to the nitty-gritty level of reading individual statements. Protecting yourself. If you make a habit of ending all your switch branches with a break, it will become automatic after a while, and you'll be less likely to accidentally forget it where it does matter. Training yourself to expect the break at the end of every branch also helps detecting missing break statements, which is great for debugging and troubleshooting.
Must JSON object keys be strings?
Yes. JSON objects are written in key/value pairs. Keys must be strings, and values must be a valid JSON data type (string, number, object, array, boolean or null). Keys and values are separated by a colon. Each key/value pair is separated by a comma.
Is console part of the method name for log()?
Yes. In JS, log() is a method of the Math class.
Is the size of child elements set explicitly with flex-grow and flex-shrink properties still dependent on their content?
Yes. The content of a flex item has an impact on how flex-grow, flex-shrink, and flex-basis work together.
What do you get from an AJAX request? (What kind of data type and in which format/language?)
a JSON string
What does the variable (key) stored in localStorage.setItem(var(key), value) become?
a string
Which property should you use to align Flexbox properties vertically?
align-items
What properties can be used to center the contents of a flex-item vertically?
align-items align-self justify-content
What is the <span> tag?
an inline container used to mark up a part of a text, or a part of a document
What are the six properties that are used in the animation shorthand property and an example value for each?
animation-name: example; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate;
What display style are <li> tags by default?
block
What symbols do you use in a grouping operator in a CSS rule, parentheses or brackets?
brackets Ex. .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
What HTML property is used to merge cells (<td> tags) in tables?
colspan
Which CSS property defines a flex container?
display
Is the default value for the transition-timing-function ease or linear?
ease
What are the six optional values for the animation-timing-function property in CSS?
ease - Specifies an animation with a slow start, then fast, then end slowly (this is default) linear - Specifies an animation with the same speed from start to end ease-in - Specifies an animation with a slow start ease-out - Specifies an animation with a slow end ease-in-out - Specifies an animation with a slow start and end cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function
What values can the transition-timing-function property in CSS have?
ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) linear - specifies a transition effect with the same speed from start to end ease-in - specifies a transition effect with a slow start ease-out - specifies a transition effect with a slow end ease-in-out - specifies a transition effect with a slow start and end cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
In Flexbox, which property establishes the main axis?
flex-direction
What is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container's main and cross axes?
flex-flow
A "regular" layout is based on both block and inline flow directions, but what is the flex layout based on?
flex-flow directions
Which Flexbox property defines the ability for a flex item to grow if necessary and dictates what amount of the available space inside the flex container the item should take up?
flex-grow
What values does the Flexbox justify-content property allow?
flex-start flex-end center space-between space-around space-evenly start end left right + safe | unsafe;
What are all Flexbox justify-content property values and function?
flex-start (default): items are packed toward the start of the flex-direction. flex-end: items are packed toward the end of the flex-direction. start: items are packed toward the start of the writing-mode direction. end: items are packed toward the end of the writing-mode direction. left: items are packed toward left edge of the container, unless that doesn't make sense with the flex-direction, then it behaves like start. right: items are packed toward right edge of the container, unless that doesn't make sense with the flex-direction, then it behaves like end. center: items are centered along the line space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies. space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal. Note that that browser support for these values is nuanced. For example, space-between never got support from some versions of Edge, and start/end/left/right aren't in Chrome yet. MDN has detailed charts. The safest values are flex-start, flex-end, and center. Still true ???
By default, flex items will all try to fit onto one line. What property do you use to wrap as needed?
flex-wrap
How do you make a url not navigate anywhere in your code, such as when you make a logout link?
href='#!'
How to rotate an image in CSS?
img { transform: rotate(315deg); }
Which values can the display property of a flex container have?
inline (inline-flex) or block (default flex)
CSS translate property
is for moving elements
Regular layouts work well for pages, but what do flexbox layouts work better for?
large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.), when more flexibility is needed
Are tables or lists often used in navbars?
lists (though tables used to be used for it)
Will a value stored in sessionStorage be persisted if the browser is closed and reopened?
no
What values does the flex-wrap property allow?
nowrap wrap wrap-reverse
In Flexbox, what property controls the order of flex-items?
order
Which CSS property controls whether or not there is scrolling?
overflow
Which attribute allows us to enforce a pattern on acceptable input values based on Regex patterns?
pattern
What's the difference between right and end as values for the Flexbox justify-content property?
right: items are packed toward right edge of the container, unless that doesn't make sense with the flex-direction, then it behaves like end.
What possible values are there for the flex-direction property in Flexbox?
row column row-reverse column-reverse
What is the default value for flex-flow?
row nowrap
What's the difference between storing a value with localStorage and with sessionStorage?
sessionStorage is only for the duration of the session and localStorage is for beyond the duration of a session
What is the default value for the position attribute in CSS?
static
What are the five position values in CSS?
static relative absolute fixed sticky
What are the six valid JS types for JSON values?
string, number, boolean, null, array, object
What does the kind attribute in <video> tags default to?
subtitles
What enables a flex context for all its direct children?
the CSS display property of a flex container
Which rule is chosen if both of them have the same selector and the same level of specificity?
the last one
What is an HTML iframe used for?
to display a web page within a web page.
What four properties can you use to move a positioned element?
top right bottom left
What quality does the alpha value in a hex value determine?
transparency/opacity
JSON.stringify(obj)
turns object to a string
JSON.parse(string)
turns string to object
What's an example of a semantic input type?
type="number", "email", etc.
Will a value stored in localSession be persisted if the browser is closed and reopened?
yes
How would you indicate both classes .class1 and .class2 are to be selected in a CSS rule?
.class1.class2 (run together)
What do each of these combinators mean: <space>, >,
<space> --> nested, all descendants > --> direct child + --> adjacent sibling ~ --> all siblings
What is the condition in the for statement of a for loop?
A boolean expression which stops the loop when it evaluates to false
What can be a module in JavaScript?
A file or a script
What's the difference between inline and inline-block?
Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
Is the type attribute applied to the style tag necessary?
No, but it can be considered a best practice. The type attribute applied to the style tag has only one acceptable value: text/css . In theory, other types of styling could also be used between style tags-thus the need for a type attribute.
max - specifies the maximum value allowed min - specifies the minimum value allowed step - specifies the legal number intervals value - Specifies the default value
extra attributes for number and range types
What is the default value for the display property in XML?
inline, including SVG elements
Name four values for the display property.
none, inline, block, inline-block
Property Inline CSS can be added as an HTML element attribute, known as a property. <div style="border: 1px solid black; font-size: 18px; "> Text </div> Order of precedence Within a specificity level, which rules overwrite others is based on the last rule to be parsed, starting from the top of a style sheet or block to the bottom, and which sheet is loaded last. Rule In a <style> block or external .css file, CSS is defined by a rule made up of a selector and key-value settings. div { border : 1px solid black; font-size : 18px; } Selectors include: Universal: * Element: html, div, p Class: .class-name Id: #id-name Attribute: [attribute-key] And can be grouped using ,: div, li { ... } Or target child elements of a specific selector: .class-name > li { ... } Or descendants of a selector: li a { ... }
xxx
Example of VTT file with subtitles
WEBVTT - no cues 00:00:00.050 --> 00:00:01.800 Hello dear, what's up? 00:00:02.000 --> 00:00:04.000 I'm so excited! I found the perfect aviary for our wedding! 00:00:04.600 --> 00:00:06.000 Great! Let's go!
The variables in a program disappear when a user does one of what three actions?
When the user refreshes When the user goes to another page When the user closes their browser
Why should you place your JS script tags at the bottom of an HTML page?
When you place your JavaScript at the bottom of your HTML body, it gives the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time.
How does The @keyframes Rule work?
When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. To get an animation to work, you must bind the animation to an element.
What is a flex-item's cross size property?
Whichever of 'width' or 'height' that is in the cross dimension
Is Java pass by value or pass by reference?
Java is always pass-by-value.Unfortunately, we never handle an object at all, instead juggling object-handles called references (which are passed by value of course). The chosen terminology and semantics easily confuse many beginners. It goes like this: public static void main(String[] args) { Dog aDog = new Dog("Max"); Dog oldDog = aDog; // we pass the object to foo foo(aDog); // aDog variable is still pointing to the "Max" dog when foo(...) returns aDog.getName().equals("Max"); // true aDog.getName().equals("Fifi"); // false aDog == oldDog; // true } public static void foo(Dog d) { d.getName().equals("Max"); // true // change d inside of foo() to point to a new Dog instance "Fifi" d = new Dog("Fifi"); d.getName().equals("Fifi"); // true } In the example above aDog.getName() will still return "Max". The value aDog within main is not changed in the function foo with the Dog "Fifi" as the object reference is passed by value. If it were passed by reference, then the aDog.getName() in main would return "Fifi" after the call to foo. Likewise: public static void main(String[] args) { Dog aDog = new Dog("Max"); Dog oldDog = aDog; foo(aDog); // when foo(...) returns, the name of the dog has been changed to "Fifi" aDog.getName().equals("Fifi"); // true // but it is still the same dog: aDog == oldDog; // true } public static void foo(Dog d) { d.getName().equals("Max"); // true // this changes the name of d to be "Fifi" d.setName("Fifi"); } In the above example, Fifi is the dog's name after call to foo(aDog) because the object's name was set inside of foo(...). Any operations that foo performs on d are such that, for all practical purposes, they are performed on aDog, but it is not possible to change the value of the variable aDog itself. Java, C#, Python, Ruby, JavaScript, and PHP are actually pass-by-value languages. (C# and PHP have the "ref" keyword and the "&" sigil respectively for passing by reference.) Some of these languages (Python and Ruby) have no concept of "primitives." What happens in all of these languages when passing objects as arguments goes by the names "call by sharing" or "passing references by value," but this is not to be confused with pass-by-reference behavior (which you find in Fortran).
What's the difference between Flexbox justify-content and align-content?
Justify-content relates to individual rows of elements within the main (horizontal) axis but align-content relates to multiple rows of elements across the cross (vertical) axis
Great explanation of flexbox concept.
Let us spend a little while thinking about what display: flex really means. In the Display Module Level 3, each value of display is described as actually being a combination of two things: an inner display model, and an outer display model. When we add display: flex, we are really defining display: block flex. The outer display type of our flex container is block; it acts like a block level element in normal flow. The inner display type is flex, so items directly inside our container will participate in flex layout. This is something you might never have really thought about but probably understand anyway. The flex container acts like any other block on your page. If you have a paragraph followed by a flex container, both of these things behave as we have become accustomed to block elements behaving.
What is JSON and what is JS, in comparison?
Lets clarify first what JSON actually is. JSON is a textual, language-independent data-exchange format, much like XML, CSV or YAML. Data can be stored in many ways, but if it should be stored in a text file and be readable by a computer, it needs to follow some structure. JSON is one of the many formats that define such a structure. Such formats are typically language-independent, meaning they can be processed by Java, Python, JavaScript, PHP, you name it. In contrast, JavaScript is a programming language. Of course JavaScript also provides a way to define/describe data, but the syntax is very specific to JavaScript. As a counter example, Python has the concept of tuples, their syntax is (x, y). JavaScript doesn't have something like this.
What's the difference between JSON and an object literal in JS?
Lets look at the syntactical differences between JSON and JavaScript object literals. JSON has the following syntactical constraints: Object keys must be strings (i.e. a character sequence enclosed in double quotes "). The values can be either:a stringa numberan (JSON) objectan arraytruefalsenull Duplicate keys ({"foo":"bar","foo":"baz"}) produce undefined, implementation-specific results; the JSON specification specifically does not define their semantics In JavaScript, object literals can have String literals, number literals or identifier names as keys (since ES6, keys can now also be computed, which introduces yet another syntax). The values can be any valid JavaScript expression, including function definitions and undefined. Duplicate keys produce defined, specified results (in loose mode, the latter definition replaces the former; in strict mode, it's an error).
How do you add an alpha value to a hex code?
Make the hex code eight numbers/letters long, with the final two values being 00-100 for using numbers to show the level of transparency and AA-FF for using characters to show the level of transparency
Why are multiple layouts needed for a website?
Many people visit websites on mobile first Many will continue to use the mobile version more often than desktop The width, height and overall size of a desktop monitor vs mobile are quite different Different layout strategies are needed
Can an element have more than one id?
No
Can flex-grow values be negative?
No
Do CSS columns have any effect on a flex container?
No
Is JavaScript necessary to use CSS animations?
No
Is a function a valid JSON value?
No
It's possible, but is it common to add a property to an object?
No
Does the for HTML attribute have any functionality in and of itself?
No, but what if you wanted to use it as an attribute selector in CSS?
Is the main-axis (primary axis) of flex container necessarily horizontal? Why or why not?
No, it depends on the flex-direction property
If the number of <td> tags for a row don't match the number of them that each <tr> is supposed to have, are the two related cells merged?
No, just the cell for the tag will be missing
Can you add as many animation changes as you like with both from and to, and percentages?
No, only with percentages
Is it a sure thing that the alpha value at the end of hex values will be functional in any browser?
No, opacity in hex is fairly new and may not be supported by all browsers
Does just setting the position of elements to relative do anything visually?
No, some properties are needed alongside it to actually move the elements
align-content
This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note: This property only takes effect on multi-line flexible containers, where flex-flow is set to either wrap or wrap-reverse). A single-line flexible container (i.e. where flex-flow is set to its default value, no-wrap) will not reflect align-content. .container { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; } normal (default): items are packed in their default position as if no value was set. flex-start / start: items packed to the start of the container. The (more supported) flex-start honors the flex-direction while start honors the writing-mode direction. flex-end / end: items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction. center: items centered in the container space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end space-around: items evenly distributed with equal space around each line space-evenly: items are evenly distributed with equal space around them stretch: lines stretch to take up the remaining space The safe and unsafe modifier keywords can be used in conjunction with all the rest of these keywords (although note browser support), and deal with helping you prevent aligning elements such that the content becomes inaccessible.
align-self
This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. Please see the align-items explanation to understand the available values. .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
What does the flexbox flex-grow property do?
This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).
align-items
This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis). .container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe; } stretch (default): stretch to fill the container (still respect min-width/max-width) flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules. flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules. center: items are centered in the cross-axis baseline: items are aligned such as their baselines align The safe and unsafe modifier keywords can be used in conjunction with all the rest of these keywords (although note browser support), and deal with helping you prevent aligning elements such that the content becomes inaccessible.
What is the Flexbox children property flex for?
This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. A single value (besides none, auto, etc.) will refer to the basis value. It is recommended that you use this shorthand property rather than set the individual properties. The shorthand sets the other values intelligently.
What is the main idea behind the flex layout?
To give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.
JSX
Transpiles to normal JavaScript to run in a browser Brings the concise syntax of HTML to JavaScript Has all the features of normal JavaScript (we can use variables!) We can assign JSX to JavaScript variables JSX needs to be written with a single containing element
What is type coercion?
Type coercion means that when the operands of an operator are different types, one of them will be converted to an "equivalent" value of the other operand's type. For instance, if you do: boolean == integer the boolean operand will be converted to an integer: false becomes 0, true becomes 1. Then the two values are compared. However, if you use the non-converting comparison operator ===, no such conversion occurs. When the operands are of different types, this operator returns false, and only compares the values when they're of the same type.
How do you style the marker box of a bullet or number in a list in CSS?
Use the ::marker pseudo-element Example: ::marker { color: blue; font-size: 1.2em; }
What do the safe and unsafe keyword optional values for the Flexbox justify-content property do?
Using safe ensures that however you do this type of positioning, you can't push an element such that it renders off-screen (e.g. off the top) in such a way the content can't be scrolled too (called "data loss").
What does the VTT in WebVTT stand for?
Video Text Tracks
Example of VTT file with captions
WEBVTT - no cues 00:00:00.000 --> 00:00:04.600 [Bills flipping] 00:00:04.600 --> 00:00:05.500 SLURP! 00:00:05.500 --> 00:00:07.000 [Girl Laughing]
