| Topics |
Readings |
Examples |
Exercises |
Date |
Links |
Due |
Module 1
Basic Web Pages:
HTML
CSS
JavaScript |
Information Management
Crazy, Wonderful State of Web
How Internet Infrastructure Works
Visual Guide to GIT
What is HTML?
What is CSS?
What is JavaScript?
|
HTML Bulleted List
CSS Styled Bulleted List
CSS Bulleted List as "Paper"
CSS Bulleted List as Navbar
JavaScript Changing Colors
JavaScript Basic Todo List
JavaScript CSS Image Editor
JavaScript Solarize Filter
Source Code
|
GIT Setup
Styled Page
Quiz with Feedback
Green Screen Image
Starter Code
|
| Jan 20, Wed |
Course Overview
First Web Page HowTo
Accessing Gitlab HowTo |
| Jan 22, Fri |
|
Experience Survey |
| Jan 25, Mon |
HTML/CSS |
| Jan 27, Wed |
Example Highlights
SimpleImage Example |
| Feb 1, Mon |
Q&A |
|
| Feb 2, Tue |
|
Quiz 1
Introductions |
Module 2
Active Web Pages:
Using JavaScript
with Data |
What Are APIs, How Do They Work?
How do (web) APIs work?
JavaScript for Java Developers
Working with JSON Data
Concurrency Model and the Event Loop
Chapter 7: Using Closures
Promises in Explained Whimsically
Debugging in Chrome
|
JavaScript Tag Cloud
JSON URL Lists
API ISS Plotter
Source Code
|
Debugging
Extend Tag Cloud
Extend Quiz
Extend Quiz Again
Extend ISS Plotter
No Starter Code |
| Feb 3, Wed |
JavaScript Basics
Debugging HowTo |
| Feb 8, Mon |
JSON and Promises
Run Local Server HowTo |
| Feb 10, Wed |
JavaScript Notes |
| Feb 15, Mon |
Q&A |
Quiz 2 |
| Feb 16, Tue |
|
Plotter |
Module 3
Reactivity:
Vue Framework |
Why JavaScript Frameworks Exist
Vue.js, a Framework for Humans
Beginner’s Guide to CSS Frameworks
Vue.js Guide
VueJs: The Basics in 4 Minutes
Intro to Vue 2
Everything About Vue v-model
Error Handling with async/await/Promises
Planning Your Vue Application
Planning Your Vue Data Architecture |
Vue URL Lists
Vue Todo List
Vue Shpping Cart
Vue Tic Tac Toe
Vue Interactive List
Source Code |
None |
| Feb 17, Wed |
Vue Basics |
| Feb 22, Mon |
Reactivity |
| Feb 24, Wed |
Program Design |
| Feb 25, Thu |
|
Quiz Project |
| Mar 1, Mon |
Event Loop and Gotchas |
Quiz 3 |
Module 4
Reusable Code:
Web Components |
Component-Based Architecture
Atomic Design
Vue Component Basics
Vue State Management
Responsive Web Design Basics
Built-in Higher Order Array Functions
More Chrome DevTools Tips
|
Nested Drag and Drop
Whack-a-Mole Game
Component Shopping Cart
Component URL List
Searchable URL List
Source Code
|
None |
| Mar 3, Wed |
JSON, Editing, and Styling |
| Mar 4, Thu |
|
Trello - Part 1 |
| Mar 8, Mon |
Vue Components |
Trello - Part 2 |
| Mar 10, Wed |
NO CLASS - Wellness Day |
| Mar 15, Mon |
Components with Data Store (overview)
Components with Data Store (details) |
Module 5
Security and
Authentication |
Web App Architecture - high level
Web App Architecture - fundamentals
How Does the Internet Work?
What is Node.js?
JavaScript Transpilers
Beginner’s Guide to Vue CLI
JavaScript Modules
HTTP
Express and Node
How to use the Node.js REPL
Server-side Programming and Node
|
Whack-a-Mole Game
Shopping Cart with Server
Weather/Image Mashup
URL List with Server
Source Code
|
Complete Web App
Deploying the Server
|
| Mar 17, Wed |
Framework CLIs and NPM |
| Mar 19, Fri |
|
Trello - Part 3 |
| Mar 22, Mon |
Complete Web App Lab |
| Mar 23, Tue |
|
Final Project - Plan |
| Mar 24, Wed |
Web Structure and Protocols |
| Mar 29, Mon |
Deploying the Server Lab |
| Mar 30, Tue |
|
Quiz 4 |
Module 6
Sharing Data:
Servers and
Databases |
What is REST API?
NoSQL Databases Overview
What the Heck is OAuth?
What are session cookies used for?
A Look at the New Firebase
Express middleware reference
Passport documentation
Firebase Realtime Database docs
Responsive Web Design Basics
|
REST URL List (no Database)
User Login (no Database)
REST URL List (Database)
Image Storage
Combined Examples
Source Code
|
Setting up Cloud Services |
| Mar 31, Wed |
Structuring Projects |
Data List |
| Apr 5, Mon |
OAuth and REST |
| Apr 7, Wed |
Connecting to the Cloud Lab
More Authentication Details
|
| Apr 8, Thu |
|
Final Project - Progress Demo 1 |
| Apr 12, Mon |
NO CLASS - Wellness Day |
Module 7
Topics |
Introduction to Automated Testing
Basics of Web Application Security
OWASP Critical Web Security Risks
WebDriverIO documentation
Exploiting CORS Misconfigurations
TypeScript
Web Assembly
Low code web development
|
User Login (with Testing) |
|
| Apr 14, Wed |
Database Organization |
| Apr 15, Thu |
|
Final Project - Progress Demo 2 |
| Apr 19, Mon |
Authentication and Testing |
| Apr 21, Wed |
Wrap Up |
Quiz 5 |
| Apr 28, Wed |
|
Final Project - Final Demo |
