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 [“Epilogue” slides]
   1. Server-side Programming [Server-side Programming slides]
   2. Bits and Bytes [Bits and Bytes slides]
   3. Encoding Characters [Encoding Characters slides]
   4. Course Summary [Course Summary slides]
   5. So? [So? slides]

Course home page. Study Guide.

Schedule

Week	Lecture Hour	Date	Starting Point
1	1	Sept 4	Intro
1	2	Sept 6	The Internet
2	3	Sept 9	HTTPS
2	4	Sept 11	More Tags
2	5	Sept 13	Empty Tags
3	6	Sept 16	Distinguishing Tags
3	7	Sept 18	The Robustness Principle
3	8	Sept 20	Character References: Emoji
4	9	Sept 23	Generic font families
4	10	Sept 25	CSS Selectors
4	11	Sept 27	Colours in CSS
5	12	Sept 30	Different Browsers
5	13	Oct 2	JavaScript Intro
5	14	Oct 4	JavaScript Types
6	15	Oct 7	no lecture
6	16	Oct 9	jQuery Selectors
6	17	Oct 11	jQuery: Modifying the Page
7	18	Oct 14	Thanksgiving holiday 🦃
7	19	Oct 16	JS: Fixing Problems
7	20	Oct 18	Bitmap & Vector Images
8	21	Oct 21	Image Compression
8	22	Oct 23	Midterm
8	23	Oct 25	Graphics Summary
9	24	Oct 28	About SVG
9	25	Oct 30	Paths: Curves
9	26	Nov 1	[SVG] Animation
10	27	Nov 4	Manipulating Strings
10	28	Nov 6	Strings as Objects
10	29	Nov 8	no lecture
11	30	Nov 11	Remembrance Day holiday 🎖
11	31	Nov 13	Making Decisions
11	32	Nov 15	CSS: Clear
12	33	Nov 18	Media Queries
12	34	Nov 20	Epilogue
12	35	Nov 22	Course Summary
13	36	Nov 25	no lecture
13	37	Nov 27	no lecture
13	38	Nov 29	no lecture
14	39	Dec 2	no lecture