CMPT 165 Lecture Slides

  1. Course Introduction [“Course Introduction” slides]
    1. This Course [This Course slides]
    2. Topics [Topics slides]
    3. Materials [Materials slides]
    4. Grades [Grades slides]
    5. Expectations [Expectations slides]
  1. The Internet and the WWW [“The Internet and the WWW” slides]
    1. The Internet [The Internet slides]
    2. How Computers Connect [How Computers Connect slides]
    3. Protocols [Protocols slides]
    4. HTTP [HTTP slides]
    5. URLs [URLs slides]
    6. HTML, CSS, JavaScript [HTML, CSS, JavaScript slides]
    7. Why Separate? [Why Separate? slides]
  2. Markup and HTML [“Markup and HTML” slides]
    1. Markup Languages [Markup Languages slides]
    2. Text Files [Text Files slides]
    3. HTML Tags [HTML Tags slides]
    4. Basic Tags [Basic Tags slides]
    5. More Tags [More Tags slides]
    6. Meaning in HTML [Meaning in HTML slides]
    7. Attributes [Attributes slides]
    8. Links [Links slides]
    9. Empty Tags [Empty Tags slides]
    10. Semantic Markup [Semantic Markup slides]
    11. Semantic Markup: Why? [Semantic Markup: Why? slides]
    12. Example Page [Example Page slides]
    13. Distinguishing Tags [Distinguishing Tags slides]
    14. Generic Tags [Generic Tags slides]
    15. Validating HTML [Validating HTML slides]
    16. The Robustness Principle [The Robustness Principle slides]
    17. URLs: Links and Images [URLs: Links and Images slides]
    18. Character References [Character References slides]
  3. Stylesheets and CSS [“Stylesheets and CSS” slides]
    1. CSS Basics [CSS Basics slides]
    2. Properties [Properties slides]
    3. CSS Box Model [CSS Box Model slides]
    4. CSS Units [CSS Units slides]
    5. CSS Selectors [CSS Selectors slides]
    6. Colours in CSS [Colours in CSS slides]
    7. Browser Compatibility [Browser Compatibility slides]
    8. Browser Styles [Browser Styles slides]
    9. Different Browsers [Different Browsers slides]
    10. Development Tools [Development Tools slides]
    11. HTML + CSS: Review [HTML + CSS: Review slides]
  4. JavaScript Introduction [“JavaScript Introduction” slides]
    1. JavaScript Basics [JavaScript Basics slides]
    2. Variables [Variables slides]
    3. Types [Types slides]
    4. Functions [Functions slides]
    5. Programming Libraries [Programming Libraries slides]
    6. jQuery [jQuery slides]
    7. jQuery Selectors [jQuery Selectors slides]
    8. jQuery Objects [jQuery Objects slides]
    9. Modifying the Page [Modifying the Page slides]
    10. Events [Events slides]
    11. Fixing Problems [Fixing Problems slides]
  5. Graphics [“Graphics” slides]
    1. Images on web pages [Images on web pages slides]
    2. Bitmap & Vector Images [Bitmap & Vector Images slides]
    3. Vector Formats [Vector Formats slides]
    4. Bitmap Formats [Bitmap Formats slides]
    5. Colour Depth [Colour Depth slides]
    6. Image Compression [Image Compression slides]
    7. Optimizing Images [Optimizing Images slides]
    8. Summary [Summary slides]
  6. JavaScript and Graphics [“JavaScript and Graphics” slides]
    1. jQuery $ [jQuery $ slides]
    2. jQuery Styles [jQuery Styles slides]
    3. jQuery Animations [jQuery Animations slides]
    4. JavaScript + SVG: Raphaël [JavaScript + SVG: Raphaël slides]
    5. About SVG [About SVG slides]
    6. Interacting with SVG [Interacting with SVG slides]
    7. Paths: Lines [Paths: Lines slides]
    8. Paths: Curves [Paths: Curves slides]
    9. Animation [Animation slides]
    10. SVG Events [SVG Events slides]
  7. Working with JavaScript [“Working with JavaScript” slides]
    1. Aside: Variables [Aside: Variables slides]
    2. The for loop [The for loop slides]
    3. Manipulating Strings [Manipulating Strings slides]
    4. Strings as Objects [Strings as Objects slides]
    5. HTML Forms [HTML Forms slides]
    6. Other Controls [Other Controls slides]
    7. Making Decisions [Making Decisions slides]
    8. Conditions [Conditions slides]
    9. If … Else [If … Else slides]
  8. More CSS [“More CSS” slides]
    1. Float [Float slides]
    2. Clear [Clear slides]
    3. Position [Position slides]
    4. CSS Grids [CSS Grids slides]
    5. Responsive Design [Responsive Design slides]
    6. Media Queries [Media Queries slides]
    7. CSS Frameworks [CSS Frameworks slides]
    8. Bootstrap [Bootstrap slides]
  9. Epilogue

Course home page. Study Guide.


WeekLecture HourDateStarting Point
11Sept 4Intro
12Sept 6The Internet
23Sept 9HTTPS
24Sept 11More Tags
25Sept 13Empty Tags
36Sept 16Distinguishing Tags
37Sept 18The Robustness Principle
38Sept 20Character References: Emoji
49Sept 23Generic font families
410Sept 25CSS Selectors
411Sept 27Colours in CSS
512Sept 30Different Browsers
513Oct 2JavaScript Intro
514Oct 4JavaScript Types
615Oct 7no lecture
616Oct 9jQuery Selectors
617Oct 11jQuery: Modifying the Page
718Oct 14Thanksgiving holiday 🦃
719Oct 16JS: Fixing Problems
720Oct 18Bitmap & Vector Images
821Oct 21Image Compression
822Oct 23Midterm
823Oct 25Graphics Summary
924Oct 28About SVG
925Oct 30Paths: Curves
926Nov 1[SVG] Animation
1027Nov 4Manipulating Strings
1028Nov 6Strings as Objects
1029Nov 8no lecture
1130Nov 11Remembrance Day holiday 🎖
1131Nov 13Making Decisions
1132Nov 15CSS: Clear
1233Nov 18Media Queries
1234Nov 20
1235Nov 22
1336Nov 25
1337Nov 27
1338Nov 29
1439Dec 2