Responsive Web Design

Question 1

Terms for mobile first and the opposite?

Answer 1

Progressive Enhancement vs Graceful Degredation

Question 2

Term for viewable area of the browser?

Answer 2

Viewport

Question 3

what does max-width vs width property do for images

Answer 3

max-width says what percentage of the images native resolution it will be. Width defines what percentage of the container it is in it will take up

Question 4

What should determine a site’s breakpoints?

Answer 4

the design elements of the site (not some pre-defined or standard pixel width)

Question 5

what is the difference between REM and EM?

Answer 5

em is a size relative to the default font size (usually 16 px). REM stands for root-em and is also relative to the default font size. The difference is that em’s are also relative to the font size defined in their container (such that .75em inside of a container with .75em font size would be less than .75rem - it would be 75% of the container’s font size)

Question 6

what are the four edges of a box in HTML?

Answer 6

1. content box (innermost box)
2. padding box (edge is inner edge of border)
3. border box (edge is outer edge of border)
4. margin box (edge is outer edge of border + margin)

Question 7

Define content box and border box

Answer 7

content box - edges of container’s content

border box - outer edge of container’s border

Question 8

Explain what happens when you set the position of an element to relative and then give one of it’s children position: absolute; ?

Answer 8

The interior element is contained within the relative outer element but can share the same space with the outer element

Question 9

Name 5 things you can query for using @media queries?

Answer 9

1. width
2. height
3. orientation
4. resolution
5. Aspect Ratio

Question 10

Where should you write your media queries

Answer 10

Recommendation is to write them next to the default styling

Question 11

How do you tell the browser to make the viewport the width of the device

Answer 11

in a meta tag with this name/value pair:

name=”viewport” content=”width=device-width”

Question 12

How do you change styles when javascript is present (enabled)

Answer 12

You can make one of your first javascript functions be to change the class of elements from one which assumes no javascript (example: class=”no_js”) to one that assumes javascript is present (example: class=”jsWorking”). The class will only change when javascript is present.

Question 13

What is the difference between block, inline-block, and inline?

Answer 13

1. Block - occupies the whole line (and can have height in addition to contents)
2. Inline - shares line with other elements (and can’t have height property - but can have line-height and margin)
3. Inline-block - sort of a combination of the first two. blocks of content which can have height property but share the line with other elements

Question 14

What are three types of Flexbox alignment?

Answer 14

justify-content - alignment along primary flexbox axis (horizontal when flex-direction is column)
align-items - alignment along secondary axis (vertical when flex-direction is row)
align-content - alignment of items when there is more than one row (or column) of items.

Question 15

What aligns main Flexbox axis?

Answer 15

justify-content

Question 16

What does the Flexbox property replace?

Answer 16

display: block, inline, table, inline-block, table-cell

Question 17

What are the four flex directions?

Answer 17

row, row-reverse, column, column-reverse

Question 18

what are the three flex-wrap values?

Answer 18

wrap, no-wrap, wrap-reverse

Question 19

How do you align the secondary axis in a Flexbox?

Answer 19

align-items

Question 20

What are the 6 align-content properties for Flexbox?

Answer 20

1. flex-start
2. flex-end
3. center
4. stretch
5. space-around
6. space-between

Question 21

Attribute to designate other sources for video?

Question 22

Explain tags

Answer 22

multiple sub tags inside of an audio or video tag designating different formats of an audio or video file

Question 23

What is a way to wrap a long word in a container?

Answer 23

word-wrap: break-word

Question 24

What is a good site to test browser feature support?

Answer 24

www.caniuse.com

Question 25

what are the css “child” pseudo-selectors?

Answer 25

:first-child, :last-child, :nth-child :nth-last-child

Question 26

What values does :nth-child take?

Answer 26

1. a number designating which child of the parent
2. “odd” or “even” designating every other child of the parent
3. (2n + 2) designating a cycle size “2n” and where to start counting “2”. This instance would cycle every other child and start counting at 2`

Question 27

How do you designate gradient direction in CSS?

Answer 27

background: linear-gradient(direction, color-stop1, color-stop2, …);
background: linear-gradient(to right, red , yellow);

Question 28

How do you specify multiple background images?

Answer 28

background: url(“img.jpg”), url(“img2.jpg”);

Question 29

What are five image filters that CSS offers?

Answer 29

1. filter: opacity(50%);
2. filter: invert(75%);
3. filter: hue-rotation(25deg);
4. filter: drop-shadow(3px 3px 6px #333);
5. filter: grayscale(.4);
6. filter: contrast(2);
7. filter: brightness(2);
8. filter: url(“img.svg”);
9. filter: blur(4px);
10. filter: sepia(.75);
    You can specify multiple like so: filter: blur(4px) invert(75%);

Question 30

What markup is an SVG image?

Answer 30

XML

Question 31

What are three CSS animation properties?

Answer 31

transition, transform, animate

Question 32

which two CSS animation properties handle motion?

Answer 32

transition, animate

Question 33

what are the values of CSS transition

Answer 33

What property you want to transition and how long you want the transition to take: transition: width 2s, height 4s;

Question 34

What properties should you name in your transition?

Answer 34

only those you plan to animate

Question 35

what are the properties of “transform”

Answer 35

1. translate(x, y) - moves the element
2. scale(x, y) - makes the element bigger
3. rotate(angle)
4. skew(x-angle, y-angle)

Question 36

How can you use classes for progressive enhancement

Answer 36

You can add multiple classes to the same element and apply different classes depending on your @media queries

Question 37

How can you change a style mid-way through an animation?

Answer 37

using keyframes.
@keyframes rule {
  30% {
    color: "blue";
}
}

Question 38

how do you turn autocomplete off on a form field?

Answer 38

autocomplete=”off” inside the element

Question 39

Define “regular expression”

Answer 39

a programatic expression checking for proper syntax in a string. Regular expressions are used across programming languages