Session 03 - HTML, Introduction to CSS

Harvard Extension School  
Spring 2021

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

Presentation contains 78 slides