Responsive Web Design Flashcards
Terms for mobile first and the opposite?
Progressive Enhancement vs Graceful Degredation
Term for viewable area of the browser?
Viewport
what does max-width vs width property do for images
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
What should determine a site’s breakpoints?
the design elements of the site (not some pre-defined or standard pixel width)
what is the difference between REM and EM?
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)
what are the four edges of a box in HTML?
- content box (innermost box)
- padding box (edge is inner edge of border)
- border box (edge is outer edge of border)
- margin box (edge is outer edge of border + margin)
Define content box and border box
content box - edges of container’s content
border box - outer edge of container’s border
Explain what happens when you set the position of an element to relative and then give one of it’s children position: absolute; ?
The interior element is contained within the relative outer element but can share the same space with the outer element
Name 5 things you can query for using @media queries?
- width
- height
- orientation
- resolution
- Aspect Ratio
Where should you write your media queries
Recommendation is to write them next to the default styling
How do you tell the browser to make the viewport the width of the device
in a meta tag with this name/value pair:
name=”viewport” content=”width=device-width”
How do you change styles when javascript is present (enabled)
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.
What is the difference between block, inline-block, and inline?
- Block - occupies the whole line (and can have height in addition to contents)
- Inline - shares line with other elements (and can’t have height property - but can have line-height and margin)
- 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
What are three types of Flexbox alignment?
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.
What aligns main Flexbox axis?
justify-content
What does the Flexbox property replace?
display: block, inline, table, inline-block, table-cell
What are the four flex directions?
row, row-reverse, column, column-reverse
what are the three flex-wrap values?
wrap, no-wrap, wrap-reverse
How do you align the secondary axis in a Flexbox?
align-items
What are the 6 align-content properties for Flexbox?
- flex-start
- flex-end
- center
- stretch
- space-around
- space-between
Attribute to designate other sources for video?
Explain tags
multiple sub tags inside of an audio or video tag designating different formats of an audio or video file
What is a way to wrap a long word in a container?
word-wrap: break-word
What is a good site to test browser feature support?
www.caniuse.com
what are the css “child” pseudo-selectors?
:first-child, :last-child, :nth-child :nth-last-child
What values does :nth-child take?
- a number designating which child of the parent
- “odd” or “even” designating every other child of the parent
- (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`
How do you designate gradient direction in CSS?
background: linear-gradient(direction, color-stop1, color-stop2, …);
background: linear-gradient(to right, red , yellow);
How do you specify multiple background images?
background: url(“img.jpg”), url(“img2.jpg”);
What are five image filters that CSS offers?
- filter: opacity(50%);
- filter: invert(75%);
- filter: hue-rotation(25deg);
- filter: drop-shadow(3px 3px 6px #333);
- filter: grayscale(.4);
- filter: contrast(2);
- filter: brightness(2);
- filter: url(“img.svg”);
- filter: blur(4px);
- filter: sepia(.75);
You can specify multiple like so: filter: blur(4px) invert(75%);
What markup is an SVG image?
XML
What are three CSS animation properties?
transition, transform, animate
which two CSS animation properties handle motion?
transition, animate
what are the values of CSS transition
What property you want to transition and how long you want the transition to take: transition: width 2s, height 4s;
What properties should you name in your transition?
only those you plan to animate
what are the properties of “transform”
- translate(x, y) - moves the element
- scale(x, y) - makes the element bigger
- rotate(angle)
- skew(x-angle, y-angle)
How can you use classes for progressive enhancement
You can add multiple classes to the same element and apply different classes depending on your @media queries
How can you change a style mid-way through an animation?
using keyframes.
@keyframes rule {
30% {
color: "blue";
}
}how do you turn autocomplete off on a form field?
autocomplete=”off” inside the element
Define “regular expression”
a programatic expression checking for proper syntax in a string. Regular expressions are used across programming languages
