CSCI39548-WebDev-Spring23

Course Page for CSCI 39548 Practical Web Development - Spring 2023

---

Class 1 (1/26, 1/31)

Course Overview

• Course syllabus and logistics
• Join Slack
• Note: The above information is available on Blackboard.

Full-Stack Web Development

• Intro to full-stack web development (slides)

Git and GitHub

• Intro to Git and GitHub (slides)

• Guide on How to Set Up SSH Keys for Git and GitHub (document)

• Tutorial: Git Feature Branch Workflow

• Description of Git Feature Branch Workflow Operation (document)

• Guide on How to Set Up Team Repository on GitHub (document)

• Sign up for GitHub

• Download and Install Git

• Check for SSH Keys and Generate SSH Keys

• Add SSH Key to GitHub

• Set up Git for GitHub

• Connect to GitHub via SSH

• Deploy Repository to GitHub Pages

Demo

• Create a simple website GitHub repository, implement Git version control, and deploy repository to GitHub Pages (demo-website)
• Work with feature branch workflow (feature-website)

Resources

• Git Textbook
• Git Reference Manual and Complete List of Git Commands
• Git Cheat Sheet
• Video: Git Tutorial 1
• Video: Git Tutorial 2
• Simple Git Guide
• HTML Tutorial
• CSS Tutorial

---

Class 2 (2/2, 2/7)

Intro to Assignment 1

• Assignment 1 - Zoo

• Starter code for Assignment 1

Demo

• Demo starter website for Assignment 1 (assignment1)

JavaScript

• Intro to JavaScript (slides)
• Eloquent JavaScript Chapter 3: Functions
  • Sections: Defining a Function, Bindings and Scopes, Functions as Values, Declaration Notation, Arrow Functions, Optional Arguments, Functions and Side Effects
  • Chapter 3: Functions (summary)

Node.js

• Install Node.js via Download
• Install Node.js via Package Manager

Supplemental Materials

• Video: JS Crash Course

Watch for next class

• Intro to the DOM
• Traversing the DOM
• DOM Events

---

Class 3 (2/9, 2/14)

Continue: JavaScript

• Eloquent JavaScript Chapter 4: Objects and Arrays
  • Sections: Data Sets, Properties, Methods, Objects, Mutability, Array Loops, Further Arrayology, Strings and Their Properties, Rest Parameters, JSON
  • Chapter 4: Objects and Arrays (summary)
• Eloquent JavaScript Chapter 5: Higher-Order Functions
  • Sections: Abstraction, Abstracting Repetition, Higher-Order Functions, Transforming with Map, Summarizing with Reduce
  • Chapter 5: Higher-Order Functions (summary)

---

Class 4 (2/16, 2/23)

Reminder: Assignment 1 - Zoo is due on Friday, 2/17, at 11:59 PM.

Note: Tuesday, 2/21 - NO CLASS. Classes follow Monday schedule.

Intro to Assignment 2

• Assignment 2 - JavaScript Methods

• Starter code for Assignment 2 (templates)

Demo

• JavaScript property and method examples (javascript-property-method-examples)

Document Object Model (DOM)

• Intro to DOM (slides)

Demo

• DOM examples (dom-examples)

Supplemental Materials

• Additional reference on intro to DOM (MDN: Intro to the DOM)

Work on Assignment 2 - JavaScript Methods

---

Class 5 (2/28, 3/2)

Reminder: Assignment 2 - JavaScript Methods is due on Friday, 3/3, at 11:59 PM.

Continue: Document Object Model (DOM)

Demo

• Manipulate DOM in JavaScript (DOM manipulation)

Supplemental Materials

• Eloquent JavaScript Chapter 13: JavaScript and the Browser
• Eloquent JavaScript Chapter 14: The Document Object Model
• Eloquent JavaScript Chapter 15: Handling Events

Intro to Assignment 3

• Assignment 3 - Grid Maker

• Starter code for Assignment 3

Demo

• Grid Maker application

Watch for next class: required videos (watch all in the series)

• Intro to React

---

Class 6 (3/7, 3/9)

React

• React Docs: Create a New React App
• React App Structure and Data Flow (summary)
• React Docs: Main Concepts of React (Sections 1-5)
  • Sections: Hello World, Introducing JSX, Rendering Elements, Components and Props, State and Lifecycle
• Install Node.js and NPM: Install via Download or Install via Package Manager
• NPM (Node Package Manager), NPX (Node Package Execute), NVM (Node.js Version Manager)

Demo

• A simple React application - Hello World

Extra Practice

• React tutorial: Intro to React (building a Tic-Tac-Toe game)
• React tutorial: Getting Started with React

Supplemental Materials

• Video: React JS Crash Course 2021
• React styling conventions

Watch for next class: required video

• Video: Async JS Crash Course - Callbacks, Promises, Async Await

---

Class 7 (3/14, 3/16)

Reminder: Assignment 3 - Grid Maker is due on Monday, 3/20, at 11:59 PM.

React, Asynchronous Programming, and API

• React Application Examples (Components 1-5): React components, async/await, API
  • FolderComponent, TextAreaComponent, FormComponent, ApiDataComponent, SearchComponent

Demo

• React application example codes (Components 1-5)
  • FolderComponent, TextAreaComponent, FormComponent, ApiDataComponent, SearchComponent

Web browser extensions used in class

• React Developer Tools
• JSON Viewer

Supplemental Materials

• React Docs: Main Concepts (Sections 6-12)
• Promises, async/await, asynchronous JavaScript
• In-depth article on async/await
• Video: async/await
• Eloquent JavaScript: Asynchronous Programming
• MDN: Fetch API
• MDN: Promise
• Axios tutorial
• Video: Axios Crash Course
• Video: HTTP Crash Course

---

Class 8 (3/21, 3/23)

React Router

• Single-Page Application, Client-Side Routing, React Router (summary)
• Intro to React Router (slides)

Intro to Assignment 4

• Assignment 4 - Bank of React

• Example (starter) code for Assignment 4 (website deployed to GitHub Pages)
• Assignment 4 - Bank of React (Starter Code) Overview (summary)

Recommended materials for next class

• Redux: comprehensive tutorial by Dan Abramov, the creator of Redux (Part 1) (Part 2)
• Article on Thunks in Redux
• Coding example using Thunks

Work on Assignment 4 - Bank of React

---

Class 9 (3/28, 3/30)

Redux

• Redux: Manage state in React applications using Redux (summary)
• Intro to Redux (slides)
• Intro to Thunk Middleware (slides)
• Use Redux in "Ticking Clock" React application (react-ticking-clock-app using Class Component and react-redux-ticking-clock-app using React Redux)
• React Application Examples (Component 6): Redux and Thunk

Demo

• Use Redux in "Ticking Clock" React application (using Class Component vs. React Redux)
• React application example code (Component 6)

Work on the following items

• Practice of React application example (Component 6)
• Assignment 4 - Bank of React

---

Class 10 (4/4, 4/18)

Note: HAVE A NICE SPRING BREAK! Class (Lecture #2) resumes on Tuesday, 4/18.

Intro to Final Project

• Final Project - Full-Stack CRUD Application

• Client starter code for Final Project
• Server starter code for Final Project

Demo

• Final Project starter application

Front-End Application (Final Project)

• Build front-end application (client starter code)

PostgreSQL and Postman

• Download PostgreSQL
• Download Postman

Supplemental Materials

• What's a CRUD application?

---

Class 11 (4/20, 4/25)

Reminder: Assignment 4 - Bank of React is due on Friday, 4/21, at 11:59 PM (New Due Date).

RESTful API, Express, and Sequelize

• RESTful API (slides)
• Intro to Express (slides)
• Intro to ORM and Sequelize (slides)

Back-End Application (Final Project)

• Build back-end application (server starter code)
• Final Project: Server-Side (Back-End) Application Starter Code (summary)

Demo

• RESTful API and test using Postman
• Express routing feature examples (express-routing)

Supplemental Materials

• Tutorial: Setting up a simple Node application with Express/Sequelize
• Relational database concepts
• Intro to Object-Relational Mapping
• psql commands
• Sequelize documentation

Resources

• Add an existing project to GitHub

---

Class 12 (4/27, 5/2)

Continue: Back-End Application (Final Project)

• Continue: Build back-end application (server starter code)

Demo

• Postgres psql

Work on Final Project - Full-Stack CRUD Application

---

Class 13 (5/4, 5/9)

Reminder: Complete Teacher Evaluation

Review for Course Assessment Test (optional extra credit)

• Review document and example questions/answers for Course Assessment Test
• Note: The above information is available on Blackboard.

Work on Final Project - Full-Stack CRUD Application

---

Class 14 (5/11, 5/16)

Reminder 1: Final Project - Full-Stack CRUD Application is due on Wednesday, 5/17, at 11:59 PM.

Reminder 2: Complete Teacher Evaluation

Course Assessment Test (optional extra credit)

• Complete the optional Course Assessment Test on Thursday, 5/11.

Work on Final Project - Full-Stack CRUD Application

• Final Project is due on Wednesday, 5/17, at 11:59 PM.