Front-End Web Architecture

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)

Instructors

• Lecturer: Kay Ashaolu
• TAs: Rishabh Thakur and Aayushi Sanghi

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 23rd:

• Class Prep/Readings: N/A
• Friday: Lecture – Introduction (Slides | PDF)

Week of August 30th:

• Class Prep: JavaScript Intro ( History | Try JavaScript | JavaScript References )
• Monday:
  • Lecture – Browsers ( Slides | PDF)
  • Lecture – JavaScript I ( Slides | PDF)
• Friday: Lecture – JavaScript II ( Slides | PDF)

Week of September 6th:

• Class Prep: N/A
• Monday: School Closed
• Friday: Lab 1 assigned: due Monday, 9/13 

Week of September 13th:

• 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 | PDF)
  • Lecture – CSS ( Slides | PDF)
• Friday
  •  Demo/Intro to GitHub and Assignment Setup
  • Assignment 1 assigned, due Monday, 10/11

Week of September 20th:

• Class Prep:
  • Eloquent JavaScript
  • Document Object Model
  • Handling Events
  • Optional: Most Popular Programming Languages
• Monday
  • Lecture – JavaScript III ( Slides | PDF )
  • Lecture – JavaScript and the DOM ( Slides | PDF )
• Friday:
  • Demo/Lab  Lab 2 assigned, due Friday 10/1 (Code)

Week of September 27th:

• Class Prep:
  • Bringing HTML, CSS, and JavaScript together (Reference: Your first form | How to structure your form | Async Await Info )
  • Intro to React ( Hello World | Introducing JSX | Rendering Elements | Components and Props )
• Monday:
  • Lecture – HTML Forms ( Slides  | PDF)
  • Lecture – Why JavaScript Frameworks? ( Slides | PDF )
• Friday:
  • Lecture – Introduction to React ( Slides | PDF )

Week of October 4th:

• 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 | PDF )
  • Lecture – React Hooks – 1 ( Slides | PDF )
• Friday (Demo/Lab)
  • Lab 3 assigned,  due Friday 10/15 (Code from class)

Week of October 11th:

• Class Prep: ( Architecture of the Web (sec 1 & 2) | Cool URIs don’t change | HTTP )
• Monday:
  • Assignment 1 due
  • Group Project Proposal Assigned, due Monday, 10/18
  • Lecture – URL’s ( Slides  | PDF )
  • Lecture – HTTP ( Slides | PDF )
• Friday:
  • Lecture – React Hooks 2  ( Slides | PDF | Code )
  • Assignment 2 assigned, due 11/8

Week of October 18th:

• Class Prep: ( Understanding and using REST APIs )
• Monday:
  • Group Project Proposal due today, Group Project assigned Friday, 12/3
  • Lecture – REST ( Slides | PDF )
  • Lecture – Data as a Service ( Slides | PDF)
• Friday
  • Google Firebase Demo ( Code )
  • Lab 4 assigned, due Friday 10/29

Week of October 25th:

• • Class Prep: ( What is a Design Language, Really | Atomic Design | Gestalt )
  • Monday:
    • Lecture – Introduction to UI Libraries ( Slides | PDF )
    • Lecture –  Demo – Working with Gestalt ( Code )
  • Friday
    • Lecture –  Demo part 2 – Working with Gestalt ( Code )

Week of November 1st:

• Class Prep: ( UseReducer Hook | React Context API  | How to Manage State with useReducer | How to share state across react components)
  • Demo: Advanced component state management with useReducer (following this tutorial) ( Code )
  • Demo: Sharing state using React Context API (following this tutorial) ( Code )
• Friday: Demo: Fetching data externally and passing it to children components via the React Context API ( Code )

Week of November 8th:

• Class Prep: ( Using Hooks instead of React Router for Navigation |  Hookrouter: A Modern Approach to React Routing )
• Monday:
  • Demo: Intro to using Hookrouter: URL navigation using hooks ( Code )
  • Demo: Creating a blog site using React and Hookrouter ( Code )
• Friday: TBD (No Lab)

Week of November 15th:

• Class Prep: TBD
• Monday:
  • Assign 2 due
  • Demo: Building application from scratch: Chatroom ( Code )
• Friday: TBD

Week of November 22rd:

• Class Prep: N/A
• Monday: TBD
• Friday: No Class

Week of November 39th:

• Class Prep: N/A
• Final Presentations and Group Project due Friday, 12/3