Coming soon
HTML Lectures
The HTML slides aren't online yet.
The slides, examples, and practice for CS 213. The lectures follow the course schedule: HTML first, then CSS, then JavaScript.
HTML
What's on a page: elements, tags, and attributes.
CSS
How a page looks: colors, boxes, tables, and layout.
Intro to CSS
Rules and selectors, colors with rgb(), inline versus internal styles,
inheritance, and classes.
Borders
Every element is a box: border styles, the border shorthand, accent
bars, and rounded corners.
Tables
Lines, gaps, and padding, a header row that stands out, zebra stripes with
:nth-child(), and hover.
Layout
Three ways to lay out a page (tables, float, and grid), then
position: sticky and media queries for phones.
Bootstrap
Bootstrap from a CDN, the twelve-column grid, gutters, and spacing classes.
JavaScript
Making a page do things: variables, operators, and functions.
Intro to JavaScript
Where JavaScript came from, variables and data types, template literals, operators, functions, and linking a script.
if Statements
Comparisons and booleans; if, else, and
else if; combining conditions with &&,
||, and !; and the ternary operator.
Objects and Loops
Objects and their properties; while, for, and
for...in loops; and break and continue. The exercises are short programs, and the demo builds a stock order book.
Arrays
Arrays and their methods; looping with an index, for...of, and
forEach; arrays of objects; arrow functions; and sort. The exercises are short programs, and the demo builds a trading desk.
Numbers, Math, Dates, and Strings
Rounding money to cents, limits and random numbers with Math, making
and subtracting dates, and the string methods that clean up and format text. The exercises are short programs, and the demo builds a concert ticket page.
Forms and the DOM
Form controls, labels, and submitting; the DOM as a tree of nodes; and reading
and writing the page with getElementById. The exercises are short programs, and the demo builds a photo editor.
The Document Object Model
Finding many elements at once with getElementsByTagName,
getElementsByClassName, getElementsByName, and
querySelector; changing styles with classes; and making, adding,
removing, and replacing elements. The exercises are short programs, written from
scratch, that change a small menu page.
Events
Listening for mouse, keyboard, window, and form events with
addEventListener; the event object; bubbling; and stopping the
browser's default action with preventDefault. The exercises are short programs, and the demo builds a drawing page.
Form Validation
Required fields; testing for numbers, letters, or both with regular expressions;
limiting the length; checking email addresses; and custom messages with
setCustomValidity. The exercises are short programs, and the demo builds a license plate shop.
Coming soon
Creating a Web API / TypeScript
Creating a web API or TypeScript, then catch-up and review.
Coming soon
Wrap-Up
Wrapping up the course and preparing for the final project.