Course page for Practical Web Dev Spring 2022
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)
-
Description of Feature Branch Workflow Operation (document)
-
Guide on how to set up team repository on GitHub (document)
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
Intro to Assignment 1:
Demo:
- Demo starter website for Assignment 1 (assignment1)
Work on Assignment 1 - Zoo
JavaScript:
- Intro to JavaScript (slides)
- Eloquent JavaScript Chapter 3: Functions
- Eloquent JavaScript Chapter 4: Objects and Arrays
Node.js:
Resources:
Watch for next class:
JavaScript:
Intro to Assignment 2:
Demo:
- JavaScript method examples (javascript-method-examples)
Document Object Model (DOM):
- Intro to DOM (slides)
Demo:
- DOM examples (dom-examples)
Work on Assignment 2 - JavaScript Methods
Document Object Model (DOM):
- Additional intro to DOM (MDN: Intro to the 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:
Demo:
- Grid Maker application
Watch for next class: required videos (watch all in the series)
React:
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:
Watch for next class: required video
React, Asynchronous Programming, and API:
Demo:
- React application example codes (Components 1-5)
Work on the following items:
- Practice of React application examples (Components 1-5)
- Assignment 3 - Grid Maker
Chrome extensions used in class:
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
React Router:
- Intro to React Router (slides)
Intro to 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
Work on Assignment 4 - Bank of React
Redux
- Managing state in React applications with Redux
- Intro to Redux (slides)
- Intro to Thunk Middleware (slides)
- React Application Examples (Component 6): Redux and Thunk
Demo:
- React application example code (Component 6)
Work on the following items:
- Practice of React application example (Component 6)
- Assignment 4 - Bank of React
Intro to Final Project:
Demo:
- Final Project starter application
Supplemental materials:
Resources:
- Downloads: PostgreSQL and Postman
RESTful API, Express, and Sequelize
- Build back-end application using Express and Sequelize
- RESTful API (slides)
- Intro to Express (slides)
- Intro to ORM and Sequelize (slides)
Demo:
- RESTful API and test using Postman
- Express routing feature examples (express-routing)
- Postgres psql
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:
Express and Sequelize
- Continue: Build back-end application using Express and Sequelize
Work on Final Project - Full-Stack CRUD Application
- Final Project documentation, with highlights indicating various functions already included in the starter code (green=done, yellow=partially done): Final Project - CRUD Application (highlighted)
Review for Course Assessment Test
- Review document and example questions/answers for Course Assessment Test
- Note: The above information is available on Blackboard.
Complete Teacher Evaluation
Work on Final Project - Full-Stack CRUD Application
Course Assessment Test (optional extra credit)
- Complete the optional Course Assessment Test on Wednesday, 5/11.
Work on Final Project - Full-Stack CRUD Application
- Final Project is due on Wednesday, 5/18, at 11:59 PM.