Difference between revisions of "Week Five (MGDP2050)"
Karl Jones (Talk | contribs) (→Review) |
Karl Jones (Talk | contribs) (→Exercises: for next week) |
||
| Line 52: | Line 52: | ||
... | ... | ||
| − | == Exercises: for next | + | == 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 == | == Reading == | ||
* [[Cascading Style Sheets]] | * [[Cascading Style Sheets]] | ||
Revision as of 10:37, 16 February 2016
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).
Contents
Review
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 ...
