Difference between revisions of "Week Six (MGDP2050)"

Revision as of 10:52, 8 March 2016

Lecture notes and exercises for Week Six of Web Design and Development II (MGDP2050).

No class session next week!

• Next class session is March 22 (Week Seven)

See also Week Five (MGDP2050) - Week Seven (MGDP2050).

Paths to external resources in HTML

See ...

Browser tools

View Source

See View Source.

Inspect Element

In modern browsers, Inspect Element contains multiple features located under different tabs or menu selections.

Features include tools to view, and in some cases modify:

• HTML - view and modify
• CSS - view and modify
• Network traffic
  • See the Inspect Element Console, which displays error messages, such as failed requests for external style sheets.

See Inspect Element.

Fundamental CSS Selectors

In CSS, a selector specifies the HTML elements which will be selected by the rule.

Fundamental selectors include:

HTML element selectors

HTML element selectors select elements based on element type.

An HTML element selector consists of the HTML element itself.

ID selectors

ID selectors select elements based on the ID attribute of a single HTML element.

ID selector rules begin with a pound sign, or hash mark (#).

Class selectors

Class selectors select elements based on the class attribute of one or more elements.

Class style rules begin with a period (.).

Other CSS selectors

A wide range of selectors are available. These include:

Compound selectors

Compound selectors select elements based on parent-child relationships – the outer element is the parent, the inner element is the child

A compound selector consists of two or more selectors, separated by spaces.

Example:

#main .example (inside the element having id="main", select element(s) having class="example")

• http://code.karljones.com/css/compound-selector/

Combined Selectors

A combined selector consists of two or more selectors, not separated by spaces

Selectors can be combined in a variety of ways

Example, select all h2 elements having class="attention":

h2.attention

This rule will affect:

<h2 class="attention">

It will not affect:

<h2>

It will also not affect:

<h1 class="attention">

• http://code.karljones.com/css/combined-selector/

Grouped Selectors

Use grouped selectors to assign two or more different selectors to a given declaration.

Use commas to separate grouped selectors.

Example, make all header elements blue:

h1, h2, h3, h4, h5, h6 { color: blue; }

• http://code.karljones.com/css/grouped-selector/

Pseudo-classes

Pseudo-classes are ...

Pseudo-elements

Pseudo-elements are ...

Media queries

Media queries use the @media rule to include a block of CSS rules only if a certain condition is true.

They are also known as conditional rules.

Media queries allow for style rules which affect some devices, but not others.

Media queries are used in responsive web design, where the condition is width of display screen.

• If the display screen meets the condition(s) specified by media queries, style rules inside that media query block apply

• If the display screen does not the condition(s) specified by media queries, style rules inside that media query block do not apply -- they are ignored

Bootstrap grid

The Bootstrap grid is Bootstrap's web page layout structure.

Grid principles

The Bootstrap grid is built on a twelve-column structure.

When you design columns, make them add up to twelve.

Grid CSS classes

...

Hiding and showing HTML elements in Bootstrap

You can use Bootstrap classes to hide and show HTML elements, based on display size.\\

This is useful for showing summary information on mobile devices, and more detailed information on desktop computers.

You can approach this one (or both) of two ways:

• "Show this element (or elements) for a specific screen size, and hide it in all the other sizes."
• "Hide this element (or elements) for a specific screen size, and show it for all other sizes".

Bootstrap and JavaScript

The Bootstrap grid does not use JavaScript.

But some other Bootstrap features do use JavaScript, including:

• Navigation bar
• Carousel

Exercises: in class

...

Exercises: for next week

...

Reading

• Bootstrap grid
• JavaScript
• jQuery