Week Five (MGDP2050)

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

No classes next two weeks!

• Next class session is March 8 (Week Six)

See also Week Four (MGDP2050) - Week Six (MGDP2050).

Review

• Bootstrap responsive image
• File Transfer Protocol

Cascading Style Sheets

Reading: Cascading Style Sheets.

Selectors

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

Fundamental selectors

Fundamental selectors:

HTML element selectors

HTML element selectors select elements based on element type.

ID selectors

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

Class selectors

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

Other selectors

Many other kinds of selectors exist, for a wide range of purposes.

Bootstrap grid

The grid is Bootstrap's web page layout structure.

It is built from units of twelve. Use it to create columns.

See Bootstrap grid.

Exercises: in class

...

Exercises: for next class session

Create folders

In your local root folder, create new folders named:

• bootstrap-2-column (Two-column bootstrap exercise)
• bootstrap-3-column (Thtree-column bootstrap exercise)
• bootstrap-nested-column (Nested column bootstrap exercise)
• bootstrap-custom-template (Custom template exercise)

Create web pages

For each new folder, create a web page named index.html.

• Each page must use your standard Bootstrap exercise styles and layout
• Also set page titles accordingly
• Give each page enough content to fill up the page
  • Both text and responsive images
  • May be actual content, or lorem ipsum

Two-column Bootstrap

Make this page display a two-column Bootstrap layout.

Three-column Bootstrap

Make this page display a Three-column Bootstrap layout.

Nested Bootstrap

Make this page display a nested Bootstrap layout.

Bootstrap custom template

Make this page display ...

Reading

• Cascading Style Sheets