└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # CSCI39548-WebDev-Spring22 2 | Course page for Practical Web Dev Spring 2022 3 | 4 | ---------- 5 | ## Class 1 (1/31, 2/2) 6 | **Course Overview:** 7 | - Course syllabus and logistics 8 | - Join Slack 9 | - *Note: The above information is available on Blackboard.* 10 | 11 | **Full-Stack Web Development:** 12 | - Intro to full-stack web development ([slides](https://drive.google.com/file/d/1Ln0hwk2dfEsyjN_F-Xw8KPiooRGvWZ_1/view?usp=sharing)) 13 | 14 | **Git and GitHub:** 15 | - Intro to Git and GitHub ([slides](https://drive.google.com/file/d/120xBezoPl6-ytqTnA8mlnvyopXxOri5D/view?usp=sharing)) 16 | - Guide on how to set up SSH keys for Git and GitHub ([document](https://drive.google.com/file/d/1rQAKTI8Ocg8xSTGhmCVaRjwQdXbrlo6C/view?usp=sharing)) 17 | - Description of Feature Branch Workflow Operation ([document](https://drive.google.com/file/d/1YnYHmXLqGLUT6ZVCuSK2jpzMXBc9q9Ke/view?usp=sharing)) 18 | - Guide on how to set up team repository on GitHub ([document](https://drive.google.com/file/d/1bZTyLF3PQkr877TEQ1HFicZZ_OCxbbOi/view?usp=sharing)) 19 | - [Sign up for GitHub](https://github.com) 20 | - [Download and Install Git](https://git-scm.com) 21 | - [Check for SSH Keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/checking-for-existing-ssh-keys) and [Generate SSH Keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent) 22 | 23 | - [Add SSH Key to GitHub](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account) 24 | - [Set up Git for GitHub](https://docs.github.com/en/github/getting-started-with-github/set-up-git) 25 | - [Connect to GitHub via SSH](https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh/about-ssh) 26 | - [Deploy Repository to GitHub Pages](https://docs.github.com/en/pages/quickstart) 27 | - [Feature Branch Workflow](https://www.atlassian.com/git/tutorials/comparing-workflows/feature-branch-workflow) 28 | 29 | **Demo:** 30 | - Create a simple website GitHub repository, implement Git version control, 31 | and deploy repository to GitHub Pages ([demo-website](https://github.com/johnnylaicode/demo-website)) 32 | - Work with feature branch workflow ([feature-website](https://github.com/johnnylaicode/feature-website)) 33 | 34 | **Resources:** 35 | - [Git Textbook](https://git-scm.com/book/en/v2) 36 | - [Git Reference Manual](https://git-scm.com/docs/) and [Complete List of Git Commands](https://git-scm.com/docs/git#_git_commands) 37 | - [Git Cheat Sheet](https://training.github.com/downloads/github-git-cheat-sheet/) 38 | - [Video: Git Tutorial 1](https://www.youtube.com/watch?v=HVsySz-h9r4&t=443s&ab_channel=CoreySchafer) 39 | - [Video: Git Tutorial 2](https://www.youtube.com/watch?v=SWYqp7iY_Tc&ab_channel=TraversyMedia) 40 | - [Simple Git Guide](http://rogerdudler.github.io/git-guide/) 41 | - [HTML Tutorial](https://www.w3schools.com/html/default.asp) 42 | - [CSS Tutorial](https://www.w3schools.com/css/default.asp) 43 | 44 | ---------- 45 | ## Class 2 (2/7, 2/9) 46 | **Intro to Assignment 1:** 47 | - ### [Assignment 1 - Zoo](https://docs.google.com/document/d/1_sdgw_fjEVF8d5oPL5nwkbf6JC12rs7c/edit?usp=sharing&ouid=103231663234242419974&rtpof=true&sd=true) 48 | - **[Starter code for Assignment 1](https://github.com/johnnylaicode/zoo-starter-code)** 49 | 50 | **Demo:** 51 | - Demo starter website for Assignment 1 ([assignment1](https://github.com/johnnylaicode/assignment1)) 52 | 53 | **Work on Assignment 1 - Zoo** 54 | 55 | ---------- 56 | ## Class 3 (2/14, 2/16) 57 | **JavaScript:** 58 | - Intro to JavaScript ([slides](https://drive.google.com/file/d/1tmhqP-oqxQsd0PkmqWLZyasclURiVwVu/view?usp=sharing)) 59 | - [Eloquent JavaScript Chapter 3: Functions](http://eloquentjavascript.net/03_functions.html) 60 | - [Eloquent JavaScript Chapter 4: Objects and Arrays](http://eloquentjavascript.net/04_data.html) 61 | 62 | **Node.js:** 63 | - [Install Node.js via Download](https://nodejs.org/en/download/) or [Install Node.js via Package Manager](https://nodejs.org/en/download/package-manager/) 64 | 65 | **Resources:** 66 | - [Video: JS Crash Course](https://www.youtube.com/watch?v=hdI2bqOjy3c&ab_channel=TraversyMedia) 67 | 68 | **Watch for next class:** 69 | - [Intro to the DOM](https://www.youtube.com/watch?v=l-0nPnSvbX8) 70 | - [Traversing the DOM](https://www.youtube.com/watch?v=8LWQNnVAMh4) 71 | - [DOM Events](https://www.youtube.com/watch?v=QE1YQnhntgw) 72 | 73 | ---------- 74 | ## Class 4 (2/23, 2/28) 75 | ### *Reminder:* Assignment 1 - Zoo is due on Thursday, 2/24, at 11:59 PM. 76 | 77 | **JavaScript:** 78 | - [Eloquent JavaScript Chapter 5: Higher Order Functions](http://eloquentjavascript.net/05_higher_order.html) 79 | 80 | **Intro to Assignment 2:** 81 | - ### [**Assignment 2 - JavaScript Methods**](https://docs.google.com/document/d/1ckjvIJC2m3StDUrcPe0iuZzyQ35sMb9s/edit?usp=sharing&ouid=103231663234242419974&rtpof=true&sd=true) 82 | - **[Starter code for Assignment 2 (templates)](https://github.com/johnnylaicode/javascript-methods-starter-code)** 83 | 84 | **Demo:** 85 | - JavaScript method examples ([javascript-method-examples](https://gist.github.com/johnnylaicode/cad4215ea93d5cfe0cb856e9bde8c5f9)) 86 | 87 | **Document Object Model (DOM):** 88 | - Intro to DOM ([slides](https://drive.google.com/file/d/1ZHHGXPDOoH4kN3CQbNuYmSbf5wOdeZ5I/view?usp=sharing)) 89 | 90 | **Demo:** 91 | - DOM examples ([dom-examples](https://github.com/johnnylaicode/dom-examples)) 92 | 93 | **Work on Assignment 2 - JavaScript Methods** 94 | 95 | ---------- 96 | ## Class 5 (3/2, 3/7) 97 | **Document Object Model (DOM):** 98 | - Additional intro to DOM ([MDN: Intro to the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)) 99 | 100 | **Demo:** 101 | - Manipulate DOM in JavaScript ([DOM manipulation](https://gist.github.com/johnnylaicode/c8689ffee1f5fe516dec769d9bda1581)) 102 | 103 | **Supplemental materials:** 104 | - [Eloquent JavaScript Chapter 13: JavaScript and the Browser](http://eloquentjavascript.net/13_browser.html) 105 | - [Eloquent JavaScript Chapter 14: The Document Object Model](http://eloquentjavascript.net/14_dom.html) 106 | - [Eloquent JavaScript Chapter 15: Handling Events](http://eloquentjavascript.net/15_event.html) 107 | 108 | **Intro to Assignment 3:** 109 | - ### [Assignment 3 - Grid Maker](https://docs.google.com/document/d/1q7hkmY4ZOh567mkvz-c-R5aElXkI5Lx1/edit?usp=sharing&ouid=103231663234242419974&rtpof=true&sd=true) 110 | - **[Starter code for Assignment 3](https://github.com/johnnylaicode/grid-maker-starter-code)** 111 | 112 | **Demo:** 113 | - Grid Maker application 114 | 115 | **Watch for next class: required videos (watch all in the series)** 116 | - [Intro to React](https://www.youtube.com/watch?v=FRjlF74_EZk&list=PLruo2gSoqleiMVEIqmvZkIpFEN_TPt0hR) 117 | 118 | ---------- 119 | ## Class 6 (3/9, 3/14) 120 | ### *Reminder:* Assignment 2 - JavaScript Methods is due on Tuesday, 3/15, at 11:59 PM. 121 | **React:** 122 | - [React Docs: Main Concepts (Sections 1-5)](https://reactjs.org/docs/hello-world.html) 123 | - [Create React App](https://reactjs.org/docs/create-a-new-react-app.html) 124 | 125 | **Demo:** 126 | - A simple React application - Hello World 127 | 128 | **Extra practice:** 129 | - [React tutorial: Intro to React (building a Tic-Tac-Toe game)](https://reactjs.org/tutorial/tutorial.html) 130 | - [React tutorial: Getting Started with React](https://sabe.io/tutorials/getting-started-with-react) 131 | 132 | **Supplemental materials:** 133 | - [Video: React JS Crash Course 2021](https://www.youtube.com/watch?v=w7ejDZ8SWv8&ab_channel=TraversyMedia) 134 | - [React styling conventions](https://github.com/airbnb/javascript/tree/master/react) 135 | 136 | **Watch for next class: required video** 137 | - [Video: Async JS Crash Course - Callbacks, Promises, Async Await](https://www.youtube.com/watch?v=PoRJizFvM7s&ab_channel=TraversyMedia) 138 | 139 | ---------- 140 | ## Class 7 (3/16, 3/21) 141 | **React, Asynchronous Programming, and API:** 142 | - [React Application Examples (Components 1-5): React components, async/await, API](https://github.com/johnnylaicode/react-examples) 143 | 144 | **Demo:** 145 | - React application example codes (Components 1-5) 146 | 147 | **Work on the following items:** 148 | - **Practice of React application examples (Components 1-5)** 149 | - **Assignment 3 - Grid Maker** 150 | 151 | **Chrome extensions used in class:** 152 | - [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) 153 | - [JSON Viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh) 154 | 155 | **Supplemental materials:** 156 | - [React Docs: Main Concepts (Sections 6-12)](https://reactjs.org/docs/hello-world.html) 157 | - [Promises, async/await, asynchronous JavaScript](https://javascript.info/async) 158 | - [In-depth article on async/await](https://blog.bitsrc.io/understanding-javascript-async-and-await-with-examples-a010b03926ea) 159 | - [Video: async/await](https://www.youtube.com/watch?v=vn3tm0quoqE&t=170s) 160 | - [Eloquent JavaScript: Asynchronous Programming](https://eloquentjavascript.net/11_async.html) 161 | - [MDN: Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 162 | - [MDN: Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 163 | - [Axios tutorial](http://zetcode.com/javascript/axios/) 164 | - [Video: Axios Crash Course](https://www.youtube.com/watch?v=6LyagkoRWYA) 165 | - [Video: HTTP Crash Course](https://www.youtube.com/watch?v=iYM2zFP3Zn0) 166 | 167 | ---------- 168 | ## Class 8 (3/23, 3/28) 169 | ### *Reminder:* Assignment 3 - Grid Maker is due on Friday, 3/25, at 11:59 PM. 170 | **React Router:** 171 | - Intro to React Router ([slides](https://drive.google.com/file/d/1Y4ZwIDnq8CehSFPIsgfqhd3GMsUln9zl/view?usp=sharing)) 172 | 173 | **Intro to Assignment 4:** 174 | - ### [Assignment 4 - Bank of React](https://gist.github.com/johnnylaicode/a2e6608f0b50a96d50b1873647e8ea4a) 175 | - **[Example code for Assignment 4](https://github.com/johnnylaicode/bank-of-react-example-code)** 176 | 177 | **Recommended materials for next class:** 178 | - Redux: comprehensive tutorial by Dan Abramov, the creator of Redux ([Part 1](https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867)) ([Part 2](https://egghead.io/courses/building-react-applications-with-idiomatic-redux)) 179 | - [Article](https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60) on Thunks in Redux 180 | - [Coding example](https://learn.co/lessons/redux-thunk-readme) using Thunks 181 | 182 | **Work on Assignment 4 - Bank of React** 183 | 184 | ---------- 185 | ## Class 9 (3/30, 4/4) 186 | **Redux** 187 | - Managing state in React applications with Redux 188 | - Intro to Redux ([slides](https://drive.google.com/file/d/10TY2X1do1xdS6XSAIW4lhCHcN8QiZPSt/view?usp=sharing)) 189 | - Intro to Thunk Middleware ([slides](https://drive.google.com/file/d/14j-i0AarzEXF4xAevzFh0BVjBbbjB_11/view?usp=sharing)) 190 | - [React Application Examples (Component 6): Redux and Thunk](https://github.com/johnnylaicode/react-examples) 191 | 192 | **Demo:** 193 | - React application example code (Component 6) 194 | 195 | **Work on the following items:** 196 | - **Practice of React application example (Component 6)** 197 | - **Assignment 4 - Bank of React** 198 | 199 | ---------- 200 | ## Class 10 (4/6, 4/11) 201 | **Intro to Final Project:** 202 | - ### [Final Project - CRUD Application](https://docs.google.com/document/d/1AGD9n-i-srKOS0SodAITX9GFZv3opLBw/edit?usp=sharing&ouid=103231663234242419974&rtpof=true&sd=true) 203 | - **[Client starter code for Final Project](https://github.com/johnnylaicode/client-starter-code)** 204 | - **[Server starter code for Final Project](https://github.com/johnnylaicode/server-starter-code)** 205 | 206 | **Demo:** 207 | - Final Project starter application 208 | 209 | **Supplemental materials:** 210 | - [What's a CRUD application?](https://medium.com/geekculture/whats-a-crud-app-e5a29cce03b5) 211 | 212 | **Resources:** 213 | - Downloads: [PostgreSQL](https://www.postgresql.org/download/) and [Postman](https://www.postman.com/downloads/) 214 | 215 | ---------- 216 | ## Class 11 (4/13, 4/25) 217 | ### *Reminder:* Assignment 4 - Bank of React is due on (New Due Date) Monday, 4/18, at 11:59 PM. 218 | **RESTful API, Express, and Sequelize** 219 | - Build back-end application using Express and Sequelize 220 | - RESTful API ([slides](https://drive.google.com/file/d/1MG0Ac4evjuP2yQBbRrgNzBbnSfRZZoSE/view?usp=sharing)) 221 | - Intro to Express ([slides](https://drive.google.com/file/d/1Jc6xT47ZxVYdoRs3u_LHGKfb42i8ueXv/view?usp=sharing)) 222 | - Intro to ORM and Sequelize ([slides](https://drive.google.com/file/d/1ON3TuZWXS1ThsOWR05nc0aDOqf_ubetY/view?usp=sharing)) 223 | 224 | **Demo:** 225 | - RESTful API and test using Postman 226 | - Express routing feature examples ([express-routing](https://github.com/johnnylaicode/express-routing)) 227 | - Postgres psql 228 | 229 | **Supplemental materials:** 230 | - [Tutorial: Setting up a simple Node application with Express/Sequelize](https://www.youtube.com/watch?v=bOHysWYMZM0&ab_channel=TraversyMedia) 231 | - [Relational database concepts](https://www.youtube.com/watch?v=NvrpuBAMddw) 232 | - [Intro to Object-Relational Mapping](https://www.youtube.com/watch?v=dHQ-I7kr_SY) 233 | - [psql commands](https://www.postgresqltutorial.com/psql-commands/) 234 | - [Sequelize documentation](https://sequelize.org/master/) 235 | 236 | **Resources:** 237 | - [Add an existing project to GitHub](https://docs.github.com/en/github/importing-your-projects-to-github/importing-source-code-to-github/adding-an-existing-project-to-github-using-the-command-line) 238 | 239 | ---------- 240 | ## Class 12 (4/27, 5/2) 241 | **Express and Sequelize** 242 | - *Continue:* Build back-end application using Express and Sequelize 243 | 244 | **Work on Final Project - Full-Stack CRUD Application** 245 | - **Final Project documentation, with highlights indicating various functions already included in the starter code (green=done, yellow=partially done): [Final Project - CRUD Application (highlighted)](https://docs.google.com/document/d/1LKio5WxvYwvpmrC-x3jHuAuZjPoNMHY8/edit?usp=sharing&ouid=103231663234242419974&rtpof=true&sd=true)** 246 | 247 | ---------- 248 | ## Class 13 (5/4, 5/9) 249 | **Review for Course Assessment Test** 250 | - Review document and example questions/answers for Course Assessment Test 251 | - *Note: The above information is available on Blackboard.* 252 | 253 | **Complete Teacher Evaluation** 254 | 255 | **Work on Final Project - Full-Stack CRUD Application** 256 | 257 | ---------- 258 | ## Class 14 (5/11, 5/16) 259 | ### *Reminder:* Final Project - Full-Stack CRUD Application is due on Wednesday, 5/18, at 11:59 PM. 260 | **Course Assessment Test (optional extra credit)** 261 | - Complete the optional Course Assessment Test on Wednesday, 5/11. 262 | 263 | **Work on Final Project - Full-Stack CRUD Application** 264 | - Final Project is due on Wednesday, 5/18, at 11:59 PM. 265 | --------------------------------------------------------------------------------