Practical Web Development

(CSCI 39548) : Summer 2021

Syllabus

Instructor: Melissa Lynch

Email: lynch.melissat@gmail.com

Slack workspace: practicalwebdevsu21.slack.com

Class 1 (Th 5/27)

• Course logistics, set up Slack
• Set up git
• GitHub Pages Tutorial
• Feature Branch Workflow

Recommended: supplemental materials

• Git Textbook
• Video: Git Tutorial 1
• Video: Git Tutorial 2
• Simple git visual

Assignment 1

• Due on Friday 6/4 at 11:59 PM
• Documentation: Assignment #1

Resources:

• Demo code
• Linking pull requests to issues
• HTML tutorial
• CSS tutorial

Class 2 (Tu 6/1)

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

Class 3 (Th 6/3)

• Finish JS, release Assignment 2
• MDN: Intro to the DOM

Required: watch for next class

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

Recommended: supplemental materials

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

Assignment 2

• Due Monday 6/14 at 11:59 PM
• Documentation: Assignment #2

Resources

• Installing Node.js
• Template for functions

Class 4 (Tu 6/8)

• Finish up the DOM, release Assignment 3
• DOM Example
• Intro to React (slides)

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

• Introduction to React

Assignment 3

• Due Monday 6/14 at 11:59 PM
• Documentation: Assignment #3

Resources:

• Starter code

Class 5 (Th 6/10)

• React Docs: Main Concepts

Extra practice:

• React practial tutorial: Tic Tac Toe
• React tutorial: cryptocurrency

Supplemental materials:

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

Required: watch for next class

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

Class 6 (Tu 6/15)

• Promises, async/await, asynchronous JavaScript
• Demo: fetching data from an API and displaying the results using React

Chrome extensions used in class:

• JSON Viewer
• React Developer Tools

Supplemental materials:

• In-depth article on async/await
• Video: async/await
• Eloquent JavaScript: Asynchronous Programming
• MDN: Fetch API
• MDN: Promise
• Axios tutorial

Class 7 (Th 6/17)

• React-Router (slides)
• Assignment 4

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

Assignment 4

• Due Friday 7/2 at 11:59 PM
• Bank of React

Class 8 (Tu 6/22)

• 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

Supplemental materials:

• Video: Axios Crash Course
• Video: HTTP Crash Course

(Th 6/24) !No class - Monday Schedule!

Class 9 (Tu 6/29)

• RESTful APIs (slides)
• ExpressJS (slides)
• Intro to ORMs (slides)
• Demo project starter code

Supplemental materials:

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

Resources:

• Add an existing project to GitHub
• Downloads: PostgreSQL and Postman

Class 10 (Th 7/1)

• Final project backend 2
• Express/Sequelize

Class 11 (Tu 7/6)

• Work on final project
• Review exit assessment materials

Class 12 (Th 7/8)

• Exit assessment will be on Blackboard under Course Materials. It will be available from 6:00 - 7:00 PM.
• Work on final project

Final projects are due Monday 7/12 at 10:00 AM