Html

Front 1

What does the following meta tag do?

Back 1

Ensures that the whatever browser is being used on a device will be rendered at full device size

The initial-scale attribute sets the zoom i.e. 1 = original size. 2 = zoom in by a factor of 2 so only half the page will be seen

Front 2

What does the "user-scalable=no" attribute do?

Back 2

Switches off the ability of a user to zoom in to a page. Looks like:

Front 3

What does the

tag contain?

Back 3

All the content for the web page

Front 4

What is WAI-ARIA

Back 4

Web accessibility initiative. It defines a set of attributes which aid accessibility. Although HTML5 contains structural elements which correspond to WAI-ARIA attributes we should include them so older browsers are also accessible

Front 5

What is the WAI-ARIA role for ?

Front 6

What is the WAI-ARIA role for ?

Front 7

What is the WAI-ARIA role for ?

Front 8

What is the WAI-ARIA role for ?

Back 8

There's none

Front 9

What is the WAI-ARIA role for ?

Front 10

How do we make browsers < IE9 act like they support HTML5?

Back 10

We apply some javascript to them via a "shiv" or modernizer

Stuff that looks like

Front 11

What is this

Back 11

A conditional comment applicable to IE only

Front 12

What's the difference between id and class identifiers in css?

Back 12

An id is unique and can only apply to 1 element while a class can be applied to many elements

Front 13

What does this do?

h1, h2 { color: green; }

Back 13

Applies the css style to h1 and h2 elements

Front 14

What does this do?

.someclass h1 {color: green; }

Back 14

Applies the style to h1 elements within the element defined by .someclass

Front 15

What kind of selector is this?

.someclass h1 {color: green; }

Back 15

Descendant

Front 16

How many browser rendering engines are there?

Back 16

The four rendering engines are:

WebKit, which is used by Apple’s Safari and Google’s Chrome browser

Mozilla’s rendering engine, called Gecko, which is used in Firefox

Microsoft’s rendering engine, called Trident, used in IE

Opera’s rendering engine, called Presto, which is used in the Opera web browser

Front 17

How do we differentiate css properties according to rendering engine?

Back 17

p {

-webkit-hyphens: auto;

-moz-hyphens: auto;

-ms-hyphens: auto;

-o-hyphens: auto; hyphens: auto;

}

Front 18

What's an em?

Back 18

A relative unit of measurement.

1em = the font size of the element in the box model

Front 19

What are the 2 ways in which we can specify the box size of an html element in css?

Back 19

box-sizing: border-box

box-sizing: content box

Front 20

What is the difference between border-box and content-box?

Back 20

With border-box, once you set the width of your block element, any padding and borders you add will be inside that width.

In contrast, with the default content-box, any padding and borders will be outside the width.

border-box is generally easier to use. However, this is not the default, so to use it, you have to set your element to box-sizing: border-box.

Front 21

How do we apply border-box settings to an entire website?

Back 21

*, *:before, *:after {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;}

The asterisks just mean "apply to every element"

Front 22

What do we use the display css property for?

Back 22

For selecting how to display elements (usually either as block or inline.

Block elements stack while inline elements flow from left to right