Practical Web Dev Spring 2023

• Course logistics, review syllabus
• Set up git
• Connecting to GitHub via SSH
• Feature Branch Workflow
• Git notes

Supplemental materials

Git and GitHub

• Git Textbook
• Simple git visual
• Switching remote URLs from HTTPS to SSH

Video tutorials: [1] [2] [3]

HTML and CSS

• HTML
• CSS

• Review git, GitHub, feature branch workflow, HTML, CSS
• Sample repo for a basic website

• Installing Node.js
• Installing NVM
• Eloquent JavaScript Chapter 3: Functions
• Eloquent JavaScript Chapter 4: Objects and Arrays

Supplemental materials

• Video: JS Crash Course

DOM:

• Intro to the DOM
• DOM Example

Supplemental materials:

• MDN: Intro to the DOM
• Video: Traversing the DOM
• Video: DOM Events
• Eloquent JavaScript Chapter 13: JavaScript and the Browser
• Eloquent JavaScript Chapter 14: The Document Object Model
• Eloquent JavaScript Chapter 15: Handling Events
• CSS Selector Syntax

• Gridmaker
• Eloquent JavaScript Chapter 5: Higher Order Functions
• Create React App
• Assignment 2

Into to React:

• React Docs: Main Concepts

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

• Introduction to React

Supplemental materials:

• React JS Crash Course 2021
• React styling conventions
• Your First Component
• Passing Props to a Component
• Tic-Tac-Toe
• Eloquent JavaScript: Asynchronous Programming

** Watch for next class: **

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

• Continue React Docs, React-Router

• Async JS, working with API data
• Assignment 2 due today

Recommended materials:

• Video: Async JS Crash Course - Callbacks, Promises, Async Await
• Promises, async/await, asynchronous JavaScript

Supplemental materials:

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

• Continue working with API data in React components
• Introduce Redux for handling async actions and managing app state
• In-class examples
• Redux slides 1 2

• Class cancelled for Easter Break

• Midterm and intro final project

• Building out our own API using Express
• Performing database CRUD operations using Sequelize/Postgres
• REST API slides
• Databases and ORMs slides Supplemental materials:
• Sequelize documentation
• Tutorial: Setting up a simple Node app with Express/Sequelize
• Relational database concepts
• Intro to Object-Relational Mapping

• Continue lecture on backend

• Work on final project
• Lecture on any topics that need to be clarified
• Example repos: frontend backend

• Last day of class
• Work on final project