Session 03 - HTML, Introduction to CSS

Harvard Extension School  
Fall 2020

Course Web Site: https://cscie12.dce.harvard.edu/

Topics

  1. Markup Recap
  2. Section-level elements
  3. Forms - Basic
  4. Accessibility: Label Element
  5. Accessibility: Label Element
  6. HTML5 forms
  7. Tables
  8. Accessibilty of Tables
  9. Presentation - Cascading Style Sheets (CSS)
  10. CSS Mechanics - rules and selectors
  11. Basic Selectors - elements, class, id
  12. CSS Properties and Values
  13. Tools: Your Browser
  14. Tools: JS Fiddle
  15. Workflow

Session 03 - HTML, Introduction to CSS, slide1
Markup Recap, slide2
Components of HTML Elements, slide3
Essential HTML5 Document Structure, slide4
Section-level elements, slide5
Parts of a Page, slide6
Forms - Basic, slide7
Forms, slide8
form, slide9
Get vs. Post, slide10
Text Field, slide11
Radio Buttons, slide12
Checkbox, slide13
Textarea, slide14
Select and Option, slide15
Accessibility: Label Element, slide16
Accessibility: Label Element, slide17
Label Element - using id, label, for, slide18
Labels, slide19
fieldset and legend, slide20
optgroup, slide21
HTML5 forms, slide22
HTML5: Placeholder, slide23
HTML5: Autofocus, slide24
HTML5: email and url, slide25
HTML5: number and range, slide26
HTML5: date and time, slide27
Tables, slide28
A Simple Table, slide29
Adding thead, tfoot, tbody, caption, and summary, slide30
Benefits of Semantics, slide31
Using "col" and "colgroup", slide32
Accessibilty of Tables, slide33
Accessibility using "headers", slide34
What can we do now that relationship is clear?, slide35
Presentation - Cascading Style Sheets (CSS), slide36
Markup, Presentation, Function, slide37
Styles, slide38
Different Styles for The United States Constitution, slide39
Harvard Summer School, slide40
Responsive Web Design, slide41
CSS Recommendations from the W3C, slide42
CSS Mechanics - rules and selectors, slide43
Anatomy of a CSS Rule, slide44
Simple CSS Example, slide45
CSS Mechanics - Binding Styles to Markup, slide46
style attribute, slide47
style element, slide48
link element, slide49
Combining Rules, slide50
Combining Selectors, slide51
Basic Selectors - elements, class, id, slide52
class selectors, slide53
id selectors, slide54
Contextual Selectors, slide55
CSS Properties and Values, slide56
Inheritance, slide57
Sample "UA" default stylesheets for HTML 2.0 and HTML 4.0, slide58
font properties, slide59
font-family, slide60
font-style, slide61
font-variant and font-weight, slide62
font-size, slide63
Font Sizes: Relative vs. Absolute, slide64
font, slide65
text properties, slide66
CSS Values and Units, slide67
Color Units, slide68
Colorpicker, slide69
Tools: Your Browser, slide70
Web Browsers and Layout Engines, slide71
Firefox Developer Tools, slide72
Google Chrome: Developer Tools, slide73
Safari: Web Inspector, slide74
Testdrive Your Browser, slide75
Tools: JS Fiddle, slide76
Workflow, slide77

Presentation contains 77 slides