CSCI39548 - Practical Web Development

Syllabus

Instructor: Melissa Lynch

Email: lynch.melissat@gmail.com

Slack workspace: practicalwebdevsp21.slack.com

Class 1 (2/4)

• Set up git
• GitHub Pages Tutorial
• Feature Branch Workflow

Required: watch for next class

• Video: Git Tutorial 1
• Video: Git Tutorial 2

Supplemental

• Git Textbook

Class 2 (2/11)

• Assignment #1
• Linking pull requests to issues

Required: read for next class

• Eloquent JavaScript Chapter 3: Functions
• Eloquent JavaScript Chapter 4: Objects and Arrays
• Eloquent JavaScript Chapter 5: Higher Order Functions

Class 3 (2/18)

• Assignment #2
• MDN: Array.prototype.forEach()
• JS and intro to the DOM

Required materials:

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

Supplemental materials:

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

Class 4 (2/25)

• Assignment 1 and 2 are due
• Finish up the DOM
• Assignment #3

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

• Introduction to React

Class 5 (3/4)

• React introduction
• React Docs: Main Concepts

Extra practice:

• React practial tutorial: Tic Tac Toe
• Video: React JS Crash Course 2021

Class 6 (3/11)

• Assignment 3 is due
• Continue React Docs
• Assignment 4
• Starter code for assignment 4

Supplemental materials:

• React styling conventions
• React tutorial: cryptocurrency

Class 7 (3/18)

• Promises, async/await, asynchronous JavaScript

Supplemental materials:

• Video: Async JS Crash Course - Callbacks, Promises, Async Await
• In-depth article on async/await
• Video: async/await
• Eloquent JavaScript: Asynchronous Programming
• MDN: Fetch API
• MDN: Promise
• Axios tutorial

Class 8 (3/25)

• Assignment 4 is due
• Demo: making API requests and displaying the response data using React
• Assignment 5
• Assignment 6

Supplemental materials:

• JSON Viewer Chrome Extension
• Video: Axios Crash Course
• Video: HTTP Crash Course

SPRING BREAK :)

Class 9 (4/8)

• React Router (slides)
• Assignment 7

Supplemental materials:

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

Class 10 (4/15)

• Managing state in React applications with Redux
• Intro to Redux (slides)
• Thunk middleware (slides)
• Redux demo

Final Project (Fullstack CRUD App)

• Platform For Managing Students and Campuses
• Server starter code
• Client starter code

Class 11 (4/22)

• RESTful APIs (slides)
• ExpressJS (slides)
• Demo using project starter code

Required (watch for next class):

• Relational database concepts
• Intro to Object-Relational Mapping

Supplemental materials:

• Video tutorial: Setting up a simple Node app with Express/Sequelize

Class 12 (4/29)

• psql commands
• Sequelize documentation
• Demo using project starter code

Class 13 (5/6)

• Work on projects
• Go over expectations for exit assessment

Class 14 (5/13)

• Exit assessment on Blackboard (5:45 PM - 7:00 PM)
• Work on projects
• Projects are due on Sunday, 5/23 at 11:59 PM