Description
This course is a survey of technologies that power the user interfaces of web applications on a variety of devices today, including desktop, mobile, and tablet devices. This course will delve into some of the core Front-End languages and frameworks (HTML/CSS/JS/React), as well as the underlying technologies enable web applications (HTTP, URI, JSON). The goal of this course is to provide an overview of the technical issues surrounding user interfaces powered by the web today, and to provide a solid and comprehensive perspective of the Web’s constantly evolving landscape.
Attribution
The content for this class is inspired by the Web Architecture class taught by Jim Blomo (jblomo)
Grading
Assignments (40%), Labs (10%) Group Project (50%)
- Late assignments will be deducted 5 points each day they are late.
- If there are any issues please contact me asap
Syllabus
Week of August 24th:
- Class Prep/Readings: N/A
- Wednesday: Lecture – Introduction ( Slides | Recording )
- Friday: Lecture – Browsers ( Slides | Recording )
Week of August 31st:
- Class Prep: JavaScript Intro, Git ( History | Try JavaScript | JavaScript References )
- Monday: JavaScript I ( Slides | Recording )
- Wednesday :JavaScript II ( Slides | Recording )
- Friday: Demo / Lab ( Recording )
- Lab 1 assigned: due Wednesday, 9/9
Week of September 7th:
- Class Prep: N/A
- Monday: School Closed
- Wednesday: Canceled due to #ScholarStrike
- Friday: JavaScript III ( Slides | Recording | Optional: Most Popular Programming Languages )
Week of September 14th:
- Class Prep: HTML and CSS: ( HTML Elements and Structure | Semantic HTML | HTML Tables | CSS Selectors and Visual Rules | CSS Grid | HTML Reference | CSS Reference )
- Monday: Lecture – HTML ( Slides | Recording )
- Wednesday: Lecture – CSS ( Slides | Recording )
- Friday: Demo ( Recording )
- Assignment 1 assigned, due Monday, 10/12
Week of September 21th:
- Class Prep: Bringing HTML, CSS, and JavaScript together (Reference: Eloquent JavaScript | Document Object Model | Handling Events | HTML Forms | Async Await Info )
- Monday: Lecture – HTML Forms ( Slides | Recording )
- Wednesday: Lecture – JavaScript and the DOM ( Slides | Recording )
- Friday: Demo/Lab ( Code | Recording )
- Lab 2 assigned, due Monday 9/28
Week of September 28th:
- Class Prep: Intro to React ( Hello World | Introducing JSX | Rendering Elements | Components and Props )
- Monday: Lecture – Why JavaScript Frameworks? ( Slides | Recording )
- Wednesday: Lecture – Introduction to React ( Slides | Recording )
- Friday: Demo/Lab ( Starter Code | Final Code | Recording )
- Lab 3 assigned, due Monday 10/5
Week of October 5th:
- Class Prep: React and APIs
- APIs ( Video on APIs | What is an API? In English, please | Application Programming Interface (Wikipedia) )
- React Hooks ( Introducing Hooks | Hooks at a Glance | Using the State Hook | Using the Effect Hook | 5. Rules of Hooks | Building Your Own Hooks | Hooks API Reference | Hooks FAQ )
- Async Await Info
- Monday: Lecture – APIs ( Slides | Code | Recording )
- Wednesday: Lecture – React Hooks – 1 ( Slides | Recording )
- Friday: React Hooks 2 ( Slides | Recording )
- No Lab
Week of October 12th:
- Class Prep: ( Architecture of the Web (sec 1 & 2) | Cool URIs don’t change | HTTP )
- Monday: Lecture – URL’s ( Slides | Recording )
- Assignment 1 due
- Group Project Part 1 Assigned, due Monday, 10/19
- Wednesday: Lecture – HTTP ( Slides | Recording )
- Assignment 2 assigned, due 11/18
- Friday: Demo ( Code | Recording )
- No Lab
Week of October 19th:
- Class Prep: ( Understanding and using REST APIs )
- Monday: Lecture – REST ( Slides | Recording )
- Group Project Proposal due, Group Project due Friday, 12/4
- Wednesday: Lecture – Data as a Service ( Slides | Recording )
- Friday: Demo – Google Realtime Database ( Code | Recording )
- Lab 4 assigned, due Monday 10/26
Week of October 26th:
- Class Prep: ( What is a Design Language, Really | Atomic Design | Gestalt )
- Monday: Introduction to UI Libraries ( Slides | Recording )
Lab 4 due
- Wednesday: Working with Gestalt ( Code | Recording )
- Friday: Working with Gestalt, part 2 ( Code | Recording )
- Lab 4 due
Week of November 2nd:
- Class Prep: TBD
- Monday: Lecture – Anatomy of a web server ( Slides | Recording )
- Wednesday: Lecture – Webserver Programming I ( Slides | Recording )
- Friday: Lecture/Demo – Webserver Programming II ( Slides | Recording )
- No Lab
Week of November 9th:
- Class Prep: ( NextJS: Static Generation vs Server Side Rendering | Podcast: NextJS with Guillermo Rauch )
- Monday: Lecture – Introduction to the NextJS Framework ( Code | Recording )
- Wednesday: No Class
- Friday: Demo – More NextJS II ( Recording )
Week of November 16th:
- Class Prep: TBD
- Monday: Demo – More NextJS III ( Code | Recording )
- Wednesday: Demo – More NextJS IV ( Recording )
- Assign 2 due
- Friday: Demo – More NextJS V ( Code | Recording )
Week of November 23rd:
- Class Prep: N/A
- Monday: – Final Demo ( Recording )
- Wednesday: No Class
- Friday: No Class
Week of November 30th:
- Class Prep: N/A
- Monday: Final Presentations ( Recording )
- Wednesday: Final Presentations
- Friday: Final Presentations
- Group Project due