Difference between revisions of "Week Five (MGDP2050)"
Karl Jones (Talk | contribs) (→Exercises: for next week) |
Karl Jones (Talk | contribs) (→Bootstrap grid) |
||
| Line 46: | Line 46: | ||
It is built from units of twelve. Use it to create columns. | It is built from units of twelve. Use it to create columns. | ||
| − | See [[Bootstrap grid]]. | + | See: |
| + | |||
| + | * [[Bootstrap grid]] | ||
| + | * [http://getbootstrap.com/examples/grid/ Examples]] @ getbootstrap.com | ||
== Exercises: in class == | == Exercises: in class == | ||
Revision as of 10:38, 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
- Examples] @ getbootstrap.com
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 ...
