chore: revamp lecture schedule for summer 24, add industry experts

.nvmrc

@@ -0,0 +1 @@
+v18.16.0

README.md

@@ -6,6 +6,8 @@ Enjoy the course!
 
 ## 🚀 Quick start
 
+Prerequisites: Node 18+ and Yarn 1.22+ installed.
+
 1.  **Install dependencies**
 
     ```shell

src/app/app.component.ts

@@ -119,9 +119,9 @@ import { environment } from "../environments/environment";
         width: 100%;
         border-bottom: 1px solid #171923;
 
-        ul {
-          @media screen and (max-width: 48em) {
-            display: none;
+        ul li:not(:first-child) {
+          @media screen and (max-width: 767px) {
+            display: none !important;
           }
         }
       }
@@ -157,12 +157,18 @@ import { environment } from "../environments/environment";
         margin: 0;
       }
 
-      @media (max-width: 768px) {
+      @media (max-width: 767px) {
         main {
           max-width: 90%;
         }
       }
 
+      @media (min-width: 768px) {
+        .collapse {
+          display: none;
+        }
+      }
+
       .nav-link {
         transition-property: box-shadow;
         transition-duration: 150ms;
@@ -199,7 +205,7 @@ export class AppComponent {
     },
     {
       name: "Resources",
-      path: "/extra-resources",
+      path: "/resources",
     },
     {
       name: "Team",

src/app/pages/(home).page.ts

@@ -36,10 +36,10 @@ export const routeMeta: RouteMeta = getRouteMeta({
       h1 {
         font-size: 2em;
         line-height: 1.2;
-      }
-
-      .code {
-        color: #4299e1;
+        color: transparent;
+        background-image: linear-gradient(to right, #b4cded, #4299e1);
+        background-clip: text;
+        -webkit-background-clip: text;
       }
     `,
   ],

src/app/pages/team.page.ts

@@ -38,7 +38,11 @@ class MemberComponent {
   standalone: true,
   styles: [
     `
-      h6 {
+      section {
+        margin-bottom: 3em;
+        .staff-type {
+          font-size: 1.75rem;
+        }
       }
 
       ul {
@@ -50,6 +54,12 @@ class MemberComponent {
         li {
           width: calc(35% - 64px);
         }
+
+        @media (max-width: 768px) {
+          li {
+            width: 100%;
+          }
+        }
       }
     `,
   ],
@@ -61,7 +71,7 @@ class MemberComponent {
     @for (staffType of staff; track staffType) {
       @if (staffType.members.length) {
         <section>
-          <h1>{{ staffType.name }}</h1>
+          <h1 class="staff-type">{{ staffType.name }}</h1>
           <ul>
             @for (member of staffType.members; track member) {
               <li>

src/app/pages/work.page.ts

@@ -60,7 +60,7 @@ export const routeMeta: RouteMeta = getRouteMeta({
   template: `
     @if (work) {
       <a
-        [routerLink]="isReleased() ? '/work/' + work.slug : []"
+        [routerLink]="isReleased() ? '/work/' + work.slug : null"
         class="work-item"
         [class]="{ disabled: !isReleased() }"
       >

src/content/coursework/a1.md

@@ -1,7 +1,13 @@
 ---
 title: Assignment 1 - Frontend
-releaseDate:
-dueDate:
+releaseDate: 2024-05-16
+dueDate: 2024-05-30
 ---
 
-TBD
+# Assignment Overview
+
+Assignment to be released on Github Classroom.
+
+# Submission
+
+Please submit your assignment to Gradescope through the Github integration.

src/content/coursework/a2.md

@@ -1,7 +1,13 @@
 ---
 title: Assignment 2 - Backend
-releaseDate:
-dueDate:
+releaseDate: 2024-05-30
+dueDate: 2024-06-13
 ---
 
-TBD
+# Assignment Overview
+
+Assignment to be released on Github Classroom.
+
+# Submission
+
+Please submit your assignment to Gradescope through the Github integration.

src/content/coursework/a3.md

@@ -1,7 +1,13 @@
 ---
 title: Assignment 3 - Managing Users
-releaseDate:
-dueDate:
+releaseDate: 2024-06-13
+dueDate: 2024-06-27
 ---
 
-TBD
+# Assignment Overview
+
+Assignment to be released on Github Classroom.
+
+# Submission
+
+Please submit your assignment to Gradescope through the Github integration.

src/content/coursework/labs.md

@@ -1,7 +1,7 @@
 ---
 title: Labs
-releaseDate:
-dueDate:
+releaseDate: 2024-05-09
+dueDate: 2024-07-11
 ---
 
 Labs are designed to help you understand the concepts taught in the lectures. You will be required to show your work to the teaching assistant before the end of the practical. You will be graded at the practical based on your degree of completion.
@@ -12,13 +12,18 @@ Your labs portion of the grade will be calculated as follows:
 min(5%, ∑(% of lab_i))
 ```
 
-| Week | Topic                                 |
-| ---- | ------------------------------------- |
-| 2    | HTML/CSS (0.5%)                       |
-| 3    | JavaScript (0.5%)                     |
-| 4    | Web API (0.5%)                        |
-| 5    | Storing and serving data (1%)         |
-| 6    | Authentication and Authorization (1%) |
-| 8    | VM Deployment (1%)                    |
-| 9    | Angular Microblog (1%)                |
-| 10   | CI/CD (1%)                            |
+| Week | Topic                            | Weighting |
+| ---- | -------------------------------- | --------- |
+| 2    | HTML/CSS                         | 0.5%      |
+| 3    | JavaScript                       | 0.5%      |
+| 4    | Web API                          | 0.5%      |
+| 5    | Storing and serving data         | 1%        |
+| 6    | Authentication and Authorization | 1%        |
+| 8    | VM Deployment                    | 1%        |
+| 9    | Angular Microblog                | 1%        |
+| 10   | CI/CD                            | 1%        |
+
+## Submission
+
+You may show the TA your work during the practical or office hours. A grade will be assigned
+based on the degree of completion.

src/content/coursework/group-project.md → src/content/coursework/project.md

@@ -1,35 +1,41 @@
 ---
 title: Group Project
-releaseDate:
-dueDate:
+releaseDate: 2024-05-23
+dueDate: 2024-06-06
 ---
 
 The project allows you to demonstrate that you have mastered full-stack development concepts learned from this course. As a team of 2-3, you will create a publicly available web application.
 
 ## Required Elements
 
-Projects must fulfill the following minimum requirements:
+> Projects must fulfill the following minimum requirements:
 
 - The application must use a modern frontend framework such as Angular, Vue3+, or NextJS
-  - You are not allowed to directly use `create-react-app` or create a Barebones React application
+
+  - You are not allowed to create a Barebones React application ([why?](https://react.dev/learn/start-a-new-react-project))
   - Mobile app frameworks such as Expo / NativeScript is not allowed
+
 - The application's API is RESTful where appropriate
-- The application must be deployed on a Virtual Machine
+- ⚠️ The application must be deployed on a Virtual Machine
 - The application must be accessible to the general public without extra steps. i.e. A person does not need to talk to your team to access the full application.
-- The application must interact with a third-party API. Beware of usage limits in the free tier.
+- The application must interact with at least one third-party API. Beware of usage limits in the free tier as that may cause your app to not function properly.
 - The application must use OAuth 2.0 (an authorization mechanism) for any purpose.
 
-Furthermore, you must choose 2 out of 3 additional requirements to complete:
+<u>Projects will NOT receive a passing grade (i.e. adjusted to <=49) if the above requirements are not fulfilled.</u>
+
+# Additional Requirements
+
+You must also choose 2 out of 3 Additional Requirements to complete:
 
 - A piece of the application must interact with a webhook by an external service
 - A piece of the application is “real-time”, which means it can reflect other user changes without refreshing
 - A piece of the application has functionality that executes a long-running task (something that could take more than 10 seconds to complete)
 
-<u>Projects will not receive a passing grade if the above requirements are not fulfilled.</u>
+<u>Projects will NOT receive a passing grade (i.e. adjusted to <=49) if the above requirements are not fulfilled.</u>
 
-## Ineligible elements
+## ⚠️ Ineligible elements ⚠️
 
-Projects will not be given credit for the following items:
+> Projects will not be given credit for the following items:
 
 - Deployment with Kubernetes
 - “Real-time” web chat
@@ -47,6 +53,8 @@ With 9 weeks to complete the project, it must be of fair complexity. (not that o
 
 You will be notified after proposal submission if you do not reach the complexity factor. You will be given a complexity factor from 0.5 to 1, which will be used to multiply your final grade for the project. For example, if you attained a grade of 90 with a challenge factor of 0.7, your final grade will be 63.
 
+An example of a project that will receive a complexity factor <1 is a project that only touches on the "Ineligible elements".
+
 You have unlimited chances to modify your proposal at any point in the course and be reevaluated. You can visit the instructor’s office hours for reevaluation.
 
 ## Syllabus
@@ -71,7 +79,8 @@ The proposal should contain the following information:
 - Project title and team name
 - Team members with @mail.utoronto.ca emails
 - Brief description of the web application
-- Bullet points outlining how to fulfil project minimum requirements and additional requirements
+- Bullet points outlining how to fulfil "Required Elements"
+- Bullet points outlining how to fulfil "Additional Requirements"
 - Your alpha version, beta version, and final version milestones
 
 ## Alpha Version (5%) - Github

src/content/lectures/1.md

@@ -1,13 +1,20 @@
 ---
 week: 1
-title: Intro to Web Dev, HTML/CSS
+title: Mobile-first HTML/CSS
 date: 2024-05-09
-description: An introduction to full-stack development; How to succeed in this course; A quick (re)introduction to HTML and CSS - how to create nice layouts.
+description: An introduction to full-stack development; How to succeed in this course; Creating mobile-first frontends with HTML and CSS.
 googleSlidesUrl: https://docs.google.com/presentation/d/1wHZtqoHJlAV8-Fa-2CF3P3hILe2KWT3blHne0d9GA1A/
 ---
 
-Learning Outcomes:
+In this lecture, we will learn:
+
+Why...
+
+- Are there 3 separate layers when creating a webpage (Structure, Style, Behavior)?
+- Do we follow a style guide when writing HTML/CSS?
+
+How to...
 
 - Create a page based on a design mockup
-- Follow best practices in structuring HTML and CSS
-- Make a responsive website
+- Make a responsive website using the 12-column layout
+- Use Chrome Devtools to inspect, debug, and test layout issues

src/content/lectures/10.md

@@ -5,3 +5,14 @@ date: 2024-07-11
 description: A demonstration of common exploits of the web, such as XSS, CSRF, SQL Injection, etc. How to protect a web application from these attacks.
 googleSlidesUrl:
 ---
+
+Why...
+
+- Are common web application vulnerabilities like XSS, CSRF, SQL Injection, etc. dangerous?
+- Is it important to protect a web application from these vulnerabilities?
+
+How to...
+
+- Protect a web application from common web application vulnerabilities like XSS, CSRF, SQL Injection, etc.
+- Use security best practices in web application development
+- Use security tools to test the security of a web application

src/content/lectures/2.md

@@ -1,7 +1,18 @@
 ---
 week: 2
-title: Javascript in the Browser
+title: Interactive frontends with Javascript
 date: 2024-05-16
-description: Programatically manipulate the Document Object Model (DOM) through Javascript; Structuring a frontend with the Model-View-ViewModel architecture pattern; Some cool possibilities with browser based Javascript.
+description: Programatically manipulate the Document Object Model (DOM) through Javascript in the browser; Structuring a frontend with the Model-View-ViewModel architecture pattern; Some cool possibilities with browser-based Javascript.
 googleSlidesUrl: https://docs.google.com/presentation/d/1nnpRY3D8S7NaWOvIOFTaauSOPxDF5UO8hoVxJHNmXng/
 ---
+
+In this lecture, we will learn:
+
+Why...
+
+- Is it important to separate concerns in a frontend?
+
+How to...
+
+- Manipulate the Document Object Model (DOM) through Javascript
+- Use the Model-View-ViewModel (MVVM) architecture pattern to structure a frontend

src/content/lectures/3.md

@@ -2,6 +2,18 @@
 week: 3
 title: Building Web APIs
 date: 2024-05-23
-description: A basic client-server architecture with a Express.js based RESTful Application Programming Interface (API); Breaking down the HTTP request; Using Javascript to make HTTP requests on the browser without reloading.
+description: A basic client-server architecture with a Express.js based REST Application Programming Interface (API); Breaking down the HTTP request; Using Javascript to make HTTP requests on the browser.
 googleSlidesUrl:
 ---
+
+In this lecture, we will learn:
+
+Why...
+
+- Do we need to separate the frontend and backend?
+- Do we use a RESTful API for client-server communication?
+
+How to...
+
+- Create a basic RESTful API with Express.js
+- Use Javascript to make HTTP requests on the browser to the server

src/content/lectures/4.md

@@ -5,3 +5,18 @@ date: 2024-05-30
 description: Determine the best way of storing application data; Storing and serving images; Using ORMs in backend code; Learn the different methods of pagination and how to properly paginate in the backend; The classic N+1 problem in database queries and strategies to solve it.
 googleSlidesUrl:
 ---
+
+In this lecture, we will learn:
+
+Why...
+
+- Do we need to store data in a database?
+- Is pagination important in web applications?
+- Do N+1 queries cause performance issues?
+
+How to...
+
+- Store and serve images in a web application
+- Use Object-Relational Mapping (ORM) libraries in backend code
+- Implement pagination in the backend
+- Solve the N+1 problem in database queries

src/content/lectures/5.md

@@ -5,3 +5,14 @@ date: 2024-06-06
 description: Implementing a secure web based login system; Protect views from unauthorized individuals; A deep dive into the Open Authorization v2 (OAuth2) protocol; Learn the differences between authentication and authorization.
 googleSlidesUrl:
 ---
+
+In this lecture, we will learn:
+
+Why...
+
+- Is it important to secure web applications?
+- Should we use OAuth2 for authentication and authorization?
+
+How to...
+
+- Implement a secure web based login system