---
# System prepended metadata

title: 'DC Flex Online: Week 7 & 8 Lesson Plan'
tags: [flex-2020-07]

---

---
tags: flex-2020-07
---
# DC Flex Online: Week 7 & 8 Lesson Plan

## Learning Goals
* Gitflow
* Client/Server Intro (Requests/Responses)
* JS Debugging with Chrome Dev Tools
* HTTP, REST, AJAX, Fetch and Axios
* JQuery
* Hosting Websites on GH Pages
* Review Asynchronous vs Synchronous Code (more Promises!)
    * Callbacks
    * Promises
    * Async/Await

## Proposed Project Idea
* Build an online game Casino Game
    * use JQuery 
    * no Canvas API
    * use high-score API (TBD)
    * host on a separate Github Repo
    * Use Github Projects 
    * Use feature branches
    * Host on Github Pages

### What do they need to learn to complete?
1. Gitflow and how to work in a feature branch
2. Agile Project Management
3. JQuery
4. Client/Server/HTTP/AJAX/Promises
5. Github Pages

## Revised Schedule:
* **Week 7**
    * Tuesday: Git + Agile
        * Lecture: Gitflow (20 min)
        * Exercises: Git Branching App Subset (60 min)
        * Demo: Gitflow GH + GH Project Board (20)
        * Lecture: Agile Project Management (30 min)
        * Exercise: Ball Point Exercise
    * Thursday: Interacting with a server 
        * Demo: Client + Server (TODO App)
        * Whiteboard Lecture: Client/Server (20 min)
        * Lecture Ajax + Fetch + Axois (40 Min)
        * Demo: Fetch + Axios (30 min) 
        * Exercises (90 min):
            * Build simple get data site and render
            * Advanced site, use data to create the form.
        * HW (Exercises):  
            * Finish exercises
            * HW: Define project in teams, setup github
    * Saturday: Jquery + More Ajax
        * Review: More AJAX
        * Quiz (30 min)
        * Lecture: Jquery (30 Min)
        * Demo: Jquery (30 Min)
        * Exercises (120 min):
            * Scene-it Exercise: Construct a Movie Search WebSite
        * HW:
            * Finish Scene-it 
* **Week **
    * Tuesday: Aysync/Await
        * Review: Scene-it Part I and Ajax Part II (20 Minutes)
        * Lecture + Demo: Promises Review and Async/Await (40)
            * Callbacks
            * Promises and Errors
            * Async/Await 
        * Exercises:
            * Scene-It Parts II, III
    * Thursday: ES6 Intro and Object Oriented Programing 
        * Lecture & Demo: (60 min)
            * ES6 Classes Demo (Member and Methods only)
        * Exercises (120 min):
            * OO Class exercises
        * HW:
            * Review ES6 features, ES6 Games
    * Saturday: More ES6 and Hosting Github Pages
        * Lecture & Demo: (60 min)
            * ES6 Slides 
        * Quiz (30 min)
        * Demo: Hosting with Github Pages + S3 (45 min)
        * Exercises:
            * Project Prep



## Next Steps
* Test out Git Branching App
* Ask about doing another group project in Slack


---
## Backup

### Existing Schoology Lessons:
* **Week 6**
    * Tuesday: AJAX + Axios
        * Slides: Old and New for AJAX
            * HTTP Verbs
        * Exercises:
            * Build simple get data site and render
            * Advanced site, use data to create the form.
    * Thursday
        * Same as Thursdayz; No lecture, no exercises
    * Saturday
        * Exercises:
            * Scene-it Exercise: Construct a Movie Search WebSite
* **Week 7**
    * Tuesday: ES6 Intro
        * Slides: ES6 Slides
        * Exercises:
            * OO Class exercises
            * ES6 Games :thumbsdown: 
    * Thursday: Jquery
        * Slides:
            * JQuery
            * JQuery Plugins: :thumbsdown: 
        * Exercises:
            * Promise exercises
    * Saturday
        * Slides:
            * Promises
            * Async/Await
        * Exercises:
            * Project Prep

### Resources:
* RESTful APIs
    * https://gorest.co.in/
    * https://api.nasa.gov/
    * http://www.omdbapi.com/
    * https://dog.ceo/
    * https://openweathermap.org/appid
    * https://anapioficeandfire.com/
* Git Branching: Gitflow
    * https://learngitbranching.js.org/
* JQuery
    * Flip plugin: https://nnattawat.github.io/flip/
