Final Web Dev

What are the three primary components of responsive design theory identified by Ethan Marcotte

Flexible layout, responsive images, media queries

Define flexible layout

the page layout automatically adjusts to different widths

define responsive images

images that rescaled based on the size of the viewing device

define media queries

determine the properties of the device rendering the page so that appropriate designs can be delivered to specific devices

How do media queries interactive with device features

associate style sheet or style rule with a specific device or list of device features

How to create a media query

add a media attribute to either the link or style element in the head

media=”devices”

Define this media type: All

All output devices (the default)

Define this media type: braille

braille tactile feedback devices

Define this media type: embossed

paged braille printers

Define this media type: handheld

mobile devices with small screens and limited bandwidth

Define this media type: print

printers

Define this media type: projection

projectors

Define this media type: screen

computer screens

Define this media type: speech

speech and south synthesizers, and aural browsers

Define this media type: tty

fixed-width devices such as teletype machines and terminals

Define this media type: tv

television-type devices with low resolution, color, and limited scrollability

How can media queries be used to associate specific style rules with specific devices

@media devices {

style rules

}

How to target a device based on its features

media=”devices and|or (feature:value)

What do the words and and or used for in media queries

create media queries that involve different devices or features, or combinations of both

Define this media feature: Aspect-ratio

The ratio of the width of the display area to its height

Define this media feature: color

The number of bits per color component of the output device; if the device does not support color, the value is 0

Define this media feature: color-index

the number of colors supported by the output device

Define this media feature: device-aspect-ratio

The ratio of the device-width value to the device-height value

Define this media feature: device-height

The height of the rending surface of the output device

Define this media feature: device-width

The width of the rendering surface of the output device

Define this media feature: height

The height of the display area of the output device

Define this media feature: Monochrome

The number of bits per pixel in the devices monochrome frame buffer

Define this media feature: orientation

the general description of aspect ratio: equal to portrait when the height of the display area is greater than the width; equal to landscape otherwise

Define this media feature: resolution

The resolution of the output device in pixels, expressed in either dpi (dots per inch) or dpcm (dots per centimeter)

Define this media feature: width

the width of the display area of the output device

What is the mobile first principle

The overall page design starts with base styles that apply to all devices followed by style rules specific to mobile devices

When are tablet styles applied

when the screen width is 481 pixels or greater

When are desktop rules applied

build upon tablet styles, when the screen width exceeds 768 pixels

example of a media query matching screen devices with a max width of 480px

{@media only screen and (max-width: 480px) }

what are the two types of viewports

visual and layout

visual viewport

displays the web page content that fits within a mobile screen

layout viewpoint

contains the entire content of the page, some of which may be hidden from the user

what selector can be used to select the submenu that is immediately preceded by a hovered submenu title

a.submenTitle:hover+ul.submenu

what does this mobile emulator do: Android SDK

Software development kit for Android developers

what does this mobile emulator do: iOS SDK

Software development kit for iphone, ipad, and other iOS devices

what does this mobile emulator do: mobile phone emulator

Online emulation for a variety of mobile devices

what does this mobile emulator do: opera mobile sdk

developer tools for the opera mobile

what direction does the main axis point to

horizontal or vertical

What is the cross axis used for

perpendicular to main axis, used to define height or width of each item

how to define an element as a flexbox

display: flex; or display: infline-flex;

Complete list of flexboxes

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex:

display: flex;

how are flexbox’s arranged by default

starting from the left and moving to the right

how can the orientation of a flexbox be changed

flex-direction: direction;

what does the row option do in flex-directions

lays out the flex of items from left to right

what does the column option do in flex-directions

creates a verticle layout starting from the top moving downward

what does the row-reverse and column-reverse option do in flex-directions

layout the items bottom-to-top and right-to-left respectively

how can flex items wrap to a new line

flex-wrap: type;

what properties are flex items determined by

base size, growth value, shrink value

what does the base size do

defines the initial size of the item before the browser attempts to fit it to the flexbox

how is a basis size set

flex-basis: size;

what does auto do in flex

use to automatically resize the item from its default size (equivalent to flex: 1 1 auto;)

what does initial do in flex

the default value (equivalent to flex: 0 1 auto;)

what does none do in flex

use to create an inflexible item that will not grow or shrink (equivalent to flex: 0 0 auto;)

what does inherit do in flex

use to inherit the flex values of its parent element

how to specify a different placement

justify-content: placement;

what does flex-start do:

items are positioned at the start of the main axis

what does flex-end do:

items are positioned at the end of the main axis

what does center do:

items are centered along the main axis

what does space-between do:

items are distributed evenly with the first and last items aligned with the start and end of the main axis

what does space-around do:

items are distributed evenly along the main axis with equal space between them and the ends of the flexbox

what does flex-start do in alignment:

lines are positioned at the start of the cross axis

what does flex-end do in alignment:

lines are positioned at the end of the cross axis

what does stretch do in alignment:

lines are stretched to fill up the cross axis (the default)

what does center do in alignment:

lines are centered along the cross axis

what does space-between do in alignment:

lines are distributed evenly with the first and last lines aligned with the start and end of the cross axis

what does space-around do in alignment:

lines are distributed evenly along the cross axis with equal space between them and the ends of the cross axis

what is a navicon

it is used to indicate the presence of hidden navigation menus in mobile websites

what is a print style sheet

formats the printed version of a web document

what is every printed page in CSS defined as

page box

what two areas are page boxes composed of

page area and margin area

page area

contains the content of the document

margin area

contains the space between the printed content and the edges of the page

what does always do in page breaks

used to always place a page break before or after an element

what does avoid do in page breaks

use to never place a page break

what does left do in page breaks

used to place a page break where the next page will be a left page

what does right do in page breaks

use to place a page break where the next page will be a right page

what does auto do in page breaks

use to allow the printer to determine whether or not to insert a page break

what does inherit do in page breaks

insert the page break style from the parent element

What is a web table

HTML structure that consists of multiple table rows

How are table element rows marked

tr

what is the general structure of a web table

<table>

<tr>

table cells

</tr>

table cells

</tr>

what are the two types of table cells web tables support

header cells and data cells

what do header cells contain

content placed at the top or a column or beginning of a row, marked using the th element

what do data cells contain

content within columns or rows, marked using the td elements

how to choose between separate or collapse borders

border-collapse: type;