CSS

Question 1

What are the names of individual pieces of a CSS rule?

Answer 1

selector, curly brackets, property, value

Question 2

In CSS, how do you select elements by their class attribute?

Answer 2

.class

Question 3

In CSS, how do you select elements by their type?

Answer 3

element {}

Question 4

In CSS how do you select an element by its id attribute?

Answer 4

id {}

Question 5

Name three different types of values you can use to specify colors in CSS.

Answer 5

hex, rgb, color name(keyword)

bonus points rgba, hsl, hsla

Question 6

What CSS properties make up the box model?

Answer 6

border, margin, padding

Question 7

Which CSS property pushes boes away from each other?

Answer 7

margin

Question 8

Which CSS property adds space between a box’s content and its border?

Answer 8

padding

Question 9

What is a pseudo-class?

Answer 9

keyword that specifies a special state of the selected element
eg: button:hover{}

Question 10

What are CSS pseudo-classes useful for?

Answer 10

lets you apply styling to elements in relation to external factors

Question 11

Name at least two units of type size in CSS

Answer 11

px, em, rem, pt

Question 12

What CSS property controls the font used for the text inside an element?

Answer 12

font-family

Question 13

What is the default flex-direction of a flex container?

Answer 13

row (left to right)

Question 14

What is the default flex-wrap of a flex container?

Answer 14

no wrap (everything on one line)

Question 15

Why do two div elements “vertically stack” on one another by default?

Answer 15

div elements are block elements

Question 16

What is the default flex-direction of an element with display:flex

Answer 16

row (left to right)

Question 17

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

Answer 17

static

Question 18

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

Answer 18

allows us to move the element relative to where it should be

does not change document flow - purely visual

Question 19

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

Answer 19

with no other augments - it would be the same

needs top, bottom, left, right to modify

Question 20

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

Answer 20

it is removed from the normal flow - doesn’t affect position of surroundings (used to place elements on top of other elements)

Question 21

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

Answer 21

positions relative to the boundary of the previous parent non-statically positioned element

Question 22

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

Answer 22

set the containing block to be a non static element (usually position: relative)

Question 23

What are the four box offset properties?

Answer 23

top, bottom, left, right

Question 24

What are the four components of “the Cascade”.

Answer 24

source order, inheritance, specificity, important rule

Question 25

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

Answer 25

styling lower in the style sheet takes priority

Question 26

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

Answer 26

inheritance rule

Question 27

List the three selector types in order of increasing specificity.

Answer 27

element/type > class > id

Question 28

Why is using !important considered bad practice?

Answer 28

overrides cascade

Question 29

What does the transform property do?

Answer 29

lets you rotate, scale, skew, or translate an element

Question 30

Give four examples of CSS transform functions.

Answer 30

rotate, scale, skew, translate

Question 31

The transition property is shorthand for which four CSS properties?

Answer 31

transition-property, transition-duration, transition-timing-function, transition-delay

Question 32

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

Answer 32

focus

Question 33

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

Answer 33

blur

Question 34

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

Answer 34

input

Question 35

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

Answer 35

submit

Question 36

What does the event.preventDefault() method do?

Answer 36

if the event does not get explicitly handled, the default action should not be taken as it normally would be ie a default behavior of type checkbox is to be checked, preventDefault() prevents box from being checked

Question 37

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

Answer 37

Automatically load the form values.

Question 38

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

Answer 38

elements property

Question 39

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

Answer 39

value

Question 40

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

Answer 40

no way to know where the code is bugged

Question 41

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

Answer 41

immediate feedback

Question 42

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

Answer 42

no, it has to be appended first

Question 43

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

Answer 43

element.appendChild()

Question 44

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

Answer 44

('name of the attribute', 'attribute value')

Question 45

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

Answer 45

1) query select element to be appended to 2) create element 3) append element

Question 46

What is the textContent property of an element object for?

Answer 46

gets the text content of the element | also allows us to set the text content of the element

Question 47

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

Answer 47

element.setAttribute() and className property and classList property

Question 48

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

Answer 48

reusability

Question 49

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

Answer 49

min width, max width, height, etc

Question 50

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

Answer 50

viewport

Question 51

Where should media queries go?

Answer 51

at the bottom of the css sheet to override existing defaults for web

Question 52

What is the event.target?

Answer 52

returns the object (dom element) that the event is attached to/where the event originated from

Question 53

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

Answer 53

event bubbling

Question 54

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

Answer 54

.tagName

Question 55

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

Answer 55

takes a selector and returns closest node that matches the selector

Question 56

How can you remove an element from the DOM?

Answer 56

remove() ON the element that you want to be removed

Question 57

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 57

take advantage of bubbling and put event listener on the parent element

Question 58

What is the event.target?

Answer 58

the object for the element where the event originated from

Question 59

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

Answer 59

does not show the element on the web page

Question 60

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

Answer 60

takes a selector as an argument, returns a boolean

Question 61

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

Answer 61

getAttribute()

Question 62

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

Answer 62

verifying element location, values of attributes

Question 63

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 63

would need to include event listeners for each individual element

Question 64

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 64

a huge if conditional code block

Question 65

What is a breakpoint in responsive Web design?

Answer 65

breakpoints determine where the styling would change (any media features)

Question 66

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 66

with percentages the layout adapts to the exact dimensions of the viewport's width.

Question 67

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 67

The lower one wins due to css rules

Question 68

What is JSON

Answer 68

text-based data format

Question 69

What are serialization and deserialization?

Answer 69

how data is transformed into bytes and back

Question 70

Why are serialization and deserialization useful?

Answer 70

Allows for storage and withdrawal from storage

Question 71

How do you serialize a data structure into a JSON string using JavaScript?

Answer 71

JSON.stringify

Question 72

How do you deserialize a JSON string into a data structure using JavaScript?

Answer 72

JSON.parse