CSS

Question 1

What is the default value for the position property of HTML elements?

Answer 1

Position: static

Question 2

How does setting position: relative on an element affect document flow?

Answer 2

It has no effect.

Relative positioning moves an element in relation to where it would have been in normal flow.

Question 3

How does setting position: relative on an element affect where it appears on the page?

Answer 3

Has no effect on where it appears on the page

Question 4

How does setting position: absolute on an element affect document flow?

Answer 4

It is completely removed. It is no longer part of normal document flow.

Question 5

How does setting position: absolute on an element affect where it appears on the page?

Answer 5

An element set to position absolute will sit at the top-left corner of the parent element with the position that is non-static.

Question 6

How do you constrain an absolutely positioned element to a containing block?

Answer 6

Set a value on an element (the parent) that is non-static.

Question 7

When should you use absolute positioning?

Answer 7

When you need to layer things on top of others.

Ex. the meme exercise with the text and emoji layer

Question 8

How do you read the CSS Ruleset:

.pokemon > img {}?

Answer 8

New css ruleset with the selector of an image element which is a direct child of an element with the class pokemon

Question 9

How do you read the CSS ruleset:

border: 1px solid; ?

Answer 9

border SHORT HAND property with a value 1px and solid.

Question 10

how do you read the CSS ruleset:

font-family: roboto, sans-serif

Answer 10

font-family property with the value roboto with a fallback value sans-serif

Question 11

What are the four components of “the Cascade”.

Answer 11

1. Source Order
2. Inheritance
3. Specificity
4. !important

Question 12

What does the term “source order” mean with respect to CSS?

Answer 12

The styling provided for an element last in your stylesheet is the styling that will ultimately take effect.

Question 13

Why is using !important considered bad practice?

Answer 13

It overrides the cascade.

Understanding and effectively using specificity and the cascade can remove any need for the !important flag.

Question 14

List the three selector types in order of increasing specificity.

Answer 14

1. ID selector
2. CLASS selector
3. Element selector

Question 15

How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?

Answer 15

It is possible because of inheritance.
When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element.

Question 16

What does the transform property do?

Answer 16

The transform CSS property lets you rotate, scale, skew, or translate an element. By modifying coordinate space.

Question 17

Give four examples of CSS transform functions.

Answer 17

1. Matrix
2. Translate
3. Scale
4. Rotate

Question 18

The transition property is shorthand for which four CSS properties?

Answer 18

Transition-property
transition-timing-function
transition-delay
transition-duration

Question 19

What event is fired when a user places their cursor in a form control?

Answer 19

focus event

Question 20

What event is fired when a user’s cursor leaves a form control?

Answer 20

blur event

Question 21

What event is fired as a user changes the value of a form control?

Answer 21

input event

Question 22

What event is fired when a user clicks the “submit” button within a ?

Answer 22

submit event

Question 23

What does the event.preventDefault() method do?

Answer 23

It prevents the browser from automatically reloading the page with the form’s values in the URL.
It prevents the default action of the browser.

Question 24

What property of a form element object contains all of the form’s controls.

Answer 24

elements
elements collection property
ex. document.forms[index].elements[index] or dot notation

Question 25

What property of a form control object gets and sets its value?

Answer 25

value property on the form control elements | ex. contactForm.elements.message.value <===

Question 26

What is one risk of writing a lot of code without checking to see if it works so far?

Answer 26

It will be harder to find the bug

Question 27

What is an advantage of having your console open when writing a JavaScript program?

Answer 27

It will be easier to prevent bugs since you are seeing what your code is doing as you are writing it

Question 28

What does submitting a form without event.preventDefault() do?

Answer 28

It just reloads the page. | Every time you use a 'submit', ALWAYS use a preventDefault() method on the event object.

Question 29

Does the document.createElement() method insert a new element into the page?

Answer 29

No, the element does not get added until you use the appendChild method

Question 30

How do you add an element as a child to another element?

Answer 30

Use the the appendChild method

Question 31

What do you pass as the arguments to the element.setAttribute() method?

Answer 31

Two strings. 1. A string specifying the name of the attribute whose value is to be set (ex. class) 2. A string containing the value to assign to the attribute

Question 32

What steps do you need to take in order to insert a new element into the page?

Answer 32

Step 1: Create the element (createElement) Step 2: Give it content (setAttribute or TextContent) Step 3: Add it to the DOM (appendChild)

Question 33

What is the textContent property of an element object for?

Answer 33

The textContent property represents the text content of the node and allows us to change the text content with the assignment operator

Question 34

Name two ways to set the class attribute of a DOM element.

Answer 34

1. Use the setAttribute method | 2. use the className property

Question 35

What are two advantages of defining a function to do create something (like the work of creating a DOM tree)?

Answer 35

1. The function is able to make a web page automatically | 2. Saves time and money

Question 36

Give two examples of media features that you can query in an @media rule.

Answer 36

1. min-width | 2. max-width

Question 37

Which HTML meta tag is used in mobile-responsive web pages?

Answer 37

Viewport meta tag

Question 38

What is the event.target?

Answer 38

It is a reference to the object onto which the event was dispatched.

Question 39

Why is it possible to listen for events on one element that actually happen its descendent elements?

Answer 39

Because the closest() method allows us to specify which children we would like to watch for

Question 40

What DOM element property tells you what type of element it is?

Answer 40

event.target.tagName

Question 41

What does the element.closest() method take as its argument and what does it return?

Answer 41

It takes in a selectors | Returns the closest ancestor element of itself, which matches the selectors

Question 42

How can you remove an element from the DOM?

Answer 42

By using the remove method on the object for the dom element we want to remove. Element.remove()

Question 43

If you wanted to insert new clickable DOM elements into the page using JavaScript, how could you avoid adding an event listener to every new element individually?

Answer 43

Add it to the parent

Question 44

What is the event.target?

Answer 44

It is a reference to the object onto which the event was dispatched

Question 45

What is the affect of setting an element to display: none?

Answer 45

It turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.

Question 46

What does the element.matches() method take as an argument and what does it return?

Answer 46

``` The matches() method of the element tests whether the element would be selected by the specified CSS selector. The return is a boolean ```

Question 47

How can you retrieve the value of an element's attribute?

Answer 47

By using the getAttribute() method The argument is a string of the attribute name Element.getAttribute()

Question 48

At what steps of the solution would it be helpful to log things to the console?

Answer 48

Start logging things to the console from the beginning

Question 49

If you were to add another tab and view to your HTML, but you didn't use event delegation, how would your JavaScript code be written instead?

Answer 49

Add an event listener for each individual tab. | This code is not scaleable

Question 50

If you didn't use a loop to conditionally show or hide the views in the page, how would your JavaScript code be written instead?

Answer 50

By using a long list of if statement with a counter. Similar to the typing tutor challenge. This code is not scaleable.

Question 51

What is a breakpoint in responsive Web design?

Answer 51

Breakpoints were incorporated in responsive Web design to change the layout of the webpage at a specific point (breakpoint) in order to cater for the dimensions of every device.

Question 52

What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a "column" class in a responsive layout?

Answer 52

They are more flexible when creating a responsive layout because they are relative units. For example, making something 50% wide means it will always take half of the screen. On the other hand, pixels will remain static (static units)

Question 53

If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will "win". Why is that?

Answer 53

Source order

Question 54

Where should media queries be in your CSS?

Answer 54

At the very bottom