CSS3

Question 1

Border Radius

Answer 1

defines rounded border corners. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.

Question 2

Box Shadow

Answer 2

horizontal offset: positive right; negative left
vertical offset: positive below; negative above
blur radius: 0 (less blur) to posNum (most blur)
spread radius: positive increase shadow; negative decrease shadow

Question 3

Transition

Answer 3

place the transition property on the selectors you want to give a timing transition

ex: div {
transition: background-color 0.5s ease;
background-color: red;
}
div:hover {
background-color: green;
}

Question 4

pseudo selectors: :before, :after, :nth-child

Answer 4

RESEARCH

Question 5

classname patterns like BEM

Answer 5

RESEARCH

Question 6

vendor prefixes

Answer 6

RESEARCH

Question 7

explain event bubbling

Answer 7

RESEARCH

Question 8

explain event delegation

Answer 8

RESEARCH

Question 9

give an example of when it’s appropriate to apply styles to a node like button { … } as opposed to using a unique classname .button { … }

Answer 9

RESEARCH

Question 10

should be able to implement a sticky footer

Answer 10

RESEARCH

Question 11

should be able to implement a button that depresses when clicked

Answer 11

RESEARCH

Question 12

should be able to implement a dropdown menu

Answer 12

RESEARCH

Question 13

css selectors parts: ~=, |=, ^=, $=

Answer 13

RESEARCH

Question 14

pseudo selectors: :not

Answer 14

RESEARCH

Question 15

@media queries

Answer 15

RESEARCH

Question 16

animations

Answer 16

RESEARCH

Question 17

data attributes

Answer 17

RESEARCH

Question 18

What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?

Answer 18

Resetting - removes all styles from every element - margins, padding, etc.

Normalizing - makes elements render across browsers

Question 19

Describe floats and how they work.

Answer 19

“push” an element to the side you’ve chosen, either left or right.

Question 20

Describe z-index and how stacking context is formed.

Answer 20

z-index is for visual depth. Because some elements overlap, because some elements are nested within each other, there’s a natural visual depth that builds, where you can see some elements on top or behind other ones.

Question 21

What are the various clearing techniques and which is appropriate for what context?

Answer 21

is a way for an element to automatically clear its child elements, so that you don’t need to add additional markup. It’s generally used in float layouts where elements are floated to be stacked horizontally.