Welcome to Web Technologies! This is the central repository for the course content, which is organized as follows:
activities/contains instructions for in-class activitiesassignments/contains instructions for each course assignmentresources/contains lists of resources for your referenceslides/contains PDF versions of slides used in class
If you are a student in HCDE 438, please also see the syllabus (on Canvas) for a course overview.
This is a project-based course. There is no "one true way" to learn about web technologies. Instead of problem sets and quizzes in which their work will be lost to time, students will "just build websites"1. We will begin by setting up a portfolio website, which will grow over the quarter to document projects done for the course. As a result, any work done for this course will be publicly visible. By the end of the course, students will have produced a browser extension, an audio visualizer, a game, and a final project, all of which will be included in their final portfolio submission.
%%{
init: {
'theme': 'base',
'gantt': {
'numberSectionStyles': '2'
},
'themeVariables': {
'fontFamily': 'monospace',
'primaryColor': '#8c9aee',
'primaryBorderColor': '#3C56E2',
'tertiaryColor': '#f7f75e'
}
}
}%%
gantt
title Winter 2023 Assignment Schedule
axisFormat %b %e
section Continuous
Portfolio :active, prf, 2023-01-03, 2023-03-17
Peer Teaching :active, pte, 2023-01-03, 2023-03-17
section Mini Projects
Setup : mp0, 2023-01-03, 2023-01-10
Browser Extension : mp1, 2023-01-10, 2023-01-24
Creative Coding : mp2, 2023-01-24, 2023-02-07
Dev Toolchain : mp3, 2023-02-07, 2023-02-21
section Final Project
Proposal :active, fp0, 2023-02-21, 2023-02-28
Prototype : fp1, 2023-02-28, 2023-03-08
Demo Day :milestone, crit, dem, 2023-03-09, 0d
Final version : fp2, 2023-03-08, 2023-03-17
- Assignments
- Assigned: MP0: Portfolio site setup
- In class
- slides
- Welcome and course overview
- Intro survey (link on Canvas)
- Join the Discord (link on Canvas)
- Work Time: Environment setup activity
- After class
- Get your environments set up and work on MP0
- In class
- slides
- Demo: Git review: cloning a repo, editing content, pushing changes
- Demo: MP0 Walkthrough
- Demo: HTML/CSS
- Work Time: MP0
- After class
- Continue working on MP0
- Assignments
- Due: MP0
- Assigned: MP1: Browser Extension
- In-class
- slides
- Share MP0
- JavaScript Intro
- Intro to the DOM - Codepen Live demos:
- Work time: JS and the DOM activity
- After class
- Continue working on the activity, start MP1 if you would like
- In-class
- slides
- Intro to browser extensions
- Demo: MP1 walkthrough
- Brainstorm MP1 ideas
- Work time: MP1
- After class
- Work on MP1
- In-class
- slides
- More on functions in JavaScript
- Demo example: Message passing
- Activity: Make extension work groups
- Work time
- After class
- Work on MP1
- Assignments
- Due: MP1
- Assigned: MP2
- In-class
- slides
- Share back MP1!
- Break
- Introducing MP2 - Creative code!
- Work time - get started on MP2
- In-class
- slides
- CSS Flex and Grid
- Example walkthroughs
- Break
- Work time: CSS Layouts for building your MP2 gallery page!
- After class
- Keep working on MP2
- In-class
- slides
- Announcements
- Final Portfolio and accessibility
- Activity: Portfolio accessibility prompts
- Work time: Continue MP2
- In-class
- slides
- Objects Review
- Activity: Objects review
- Demo: Interactive audio
- Work time: Continue MP2
- After class
- Finish MP2!
- Due
- MP2
- In-class
- slides
- Share-back: MP2: Creative coding
- put links to your gallery in this google sheet
- Break and install Node
- Activity and demo: dev toolchain setup
- Until next class
- Think about which libraries you would like to use for MP3 for a game or data viz
- Add your project ideas to this spreadsheet
- I will check in with you next class on MP3
- In-class
- slides
- Begin MP3: Dev Toolchain
- MP3 brainstorming and checkins
- Create MP3 work groups from the spreadsheet
- MP3 work time
- Game: https://github.com/branchwelder/example-game
- Viz: https://github.com/branchwelder/example-viz
- Outside class
- Continue MP3
- slides
- Absolute and relative paths
- JavaScript templates and tagged template literals
- In-class templates activity
- MP3 work time
- Due
- MP3
- In-class
- slides
- MP3 Share Back - game spreadsheet
- Final project requirements/proposal
- Using Fetch to get data from an API
- Activity: Fetching data
- Assigned: Final Project Proposal
- In-class
- slides
- Notes on P5.play library changes
- Firebase intro
- Firebase app setup demo and walk through
- Firebase activity
- Example firebase database
- Example chat app with firebase
- Due
- FP0 - Final Project Proposal
- In class
- slides
- portfolio and final project spreadsheet
- Portfolio checking activity
- Final project checkins
- Assigned
- In class: Work time! Hannah will be around to answer questions.
- In-class: Work time! Hannah will be around to answer questions.
- In-class
- Wrap-up, looking forward
- Final Projects demo day and fun!