Week Six (MGDP2050)
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).
Contents
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
Combined selectors
...
Media queries
Media queries allow for style rules which affect some devices, but not others.
Bootstrap grid
The Bootstrap grid is Bootstrap's web page layout structure.
Grid principles
...
Grid CSS classes
...
Hiding and showing HTML elements in Bootstrap
...
Bootstrap and JavaScript
The Bootstrap grid does not use JavaScript.
But some other Bootstrap features do use JavaScript, including:
Exercises: in class
...
Exercises: for next week
...
