Web Development Labs

The three labs are on:

Part I: Thursday, February 15, 2018 at 7:30 P.M.
Part II: Friday, February 16, 2018 at 7:30 P.M.
Part III: Tuesday, February 20, 2018 at 7:00 P.M.

All labs are in 26-152 (aka Teal)

Slides

You can find the slides here. Use the arrow keys to navigate. They work in Chrome, Firefox and Safari, but Chrome is recommended. If “Open in new tab” doesn’t work, right click, copy link address and paste it in a new tab. Many slides have notes of what was covered in that part of the lecture in the bottom left or the top right (when there’s content in the bottom left). Use them. There are also many links to resources in the slides and notes.

Resources

Topics covered

What is HTML, CSS, and JavaScript
Basic HTML syntax
Browser developer tools
- The Elements and Console panels
DOM trees
Basic DOM manipulation
HTML elements
- Headings
- Links
- Multimedia (images, video, audio)
- Unordered, ordered, and definition lists
- Forms
  - Input fields (Text fields, sliders, spinners, date pickers)
  - Multiple choices (checkboxes, radio buttons, dropdown menus, autocomplete)
  - Labels
  - Forms and buttons
- Grouping and sectioning
SVG Basics
CSS
- Basic syntax
- Linking with HTML
- Selectors
- (End of Part I)
- Basic DOM querying
- Cascading
  - Specificity
  - Inheritance
- Basic CSSOM
- Colors (hex, named, RGB(A), HSL(A))
- Lengths (px, font-relative, viewport-relative)
- JS nugget: Intro to events
- Backgrounds, Images, Gradients
- Shorthands & longhands
- The Box Model and changing it
- Positioning
- Generated content
- calc()
- Responsive Web Design
- Transforms
- Transitions & Animations
- Flexbox
- Grid Layout
- (End of Part II)
- CSS Variables
JS
- Console API, debugger
- Events
- Functions as first-class objects
- Function context
- Prototypal inheritance
- ES6 Classes
- Asynchronous JS: Promises, async/await
- Fetch