CSS

Question 1

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

Answer 1

selector & declaration (property & value)

Question 2

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

Answer 2

.classname { }

Question 3

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

Answer 3

elementname { }

Question 4

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

Answer 4

idname { }

Question 5

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

Answer 5

RGB values, hex codes, color names

Question 6

What CSS properties make up the box model?

Answer 6

border, margin, padding

Question 7

Which CSS property pushes boxes away from each other?

Answer 7

margin

Question 8

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

Answer 8

padding

Question 9

What is a pseudo-class?

Answer 9

a keyword added to a selector that specifies a special state of the element

Question 10

What are CSS pseudo-classes useful for?

Answer 10

makes it easier to apply styling without having to add additional classes

Question 11

Name at least two units of type size in CSS.

Answer 11

pixels, percentages, ems

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

Question 14

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

Answer 14

nowrap

Question 15

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

Answer 15

they are block-level elements that take up the entire width of the container

Question 16

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

Answer 16

row

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

does not affect document flow

Question 19

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

Answer 19

no change, but can use box offset properties to move element; neighboring elements will not be affected

Question 20

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

Answer 20

takes element out of document flow

Question 21

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

Answer 21

must use box offset properties to specify where the element should appear in relation to the non-static container

Question 22

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

Answer 22

set parent to 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

Question 25

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

Answer 25

the order that CSS rules are written in the stylesheet

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 - can occur if no CSS for that property is directly declared for the children

Question 27

The transition property is shorthand for which four CSS properties?

Answer 27

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

Question 28

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

Answer 28

min-width; max-width

Question 29

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

Answer 29

viewport

Question 30

What is the event.target?

Answer 30

a reference to the object onto which the event was dispatched

Question 31

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

Answer 31

event flow (event bubbling)

Question 32

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

Answer 32

tagName

Question 33

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

Answer 33

takes a CSS selector string, returns itself or the closest parent node that matches the selector

Question 34

How can you remove an element from the DOM?

Answer 34

ChildNode.remove( )

Question 35

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 35

add an event listener to the parent element, then check event.target to determine the actual clicked node

Question 36

What is a breakpoint in responsive Web design?

Answer 36

the point at which a media query is introduced, usually selected to be the size where the content starts to break in some way

Question 37

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 37

so you don't need to know the exact pixel count of the screen

Question 38

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 38

source order - if two rules are declared for the same thing, the bottom one will always be used

Question 39

What is JSON?

Answer 39

a standard text-based format for representing structured data based on JavaScript object syntax

Question 40

What are serialization and deserialization?

Answer 40

serialization is converting a native object to a string so it can be transmitted across the network, and deserialization is converting a string to a native object

Question 41

Why are serialization and deserialization useful?

Answer 41

so you can transmit data across a network

Question 42

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

Answer 42

JSON.stringify( )

Question 43

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

Answer 43

JSON.parse( )

Question 44

How do you store data in localStorage?

Answer 44

localStorage.setItem( keyName, keyValue)

Question 45

How do you retrieve data from localStorage?

Answer 45

localStorage.getItem( keyName )

Question 46

What data type can localStorage save in the browser?

Answer 46

string

Question 47

When does the 'beforeunload' event fire on the window object?

Answer 47

when the window, the document, and its resources are about to be unloaded