Web Dev by SHPE Tech

# Web Dev by SHPE Tech Created by [Guillermo Sanchez](http://github.com/membriux) **Resources for students learning web development with HTML, CSS, Bootstrap, JS, Node, and Mongo DB. Resources include starter projects, learning material, topics, and more during the academic quarter at UC Irvine.** **[Check out our repository](https://github.com/membriux/Teach-Webdev-SHPE)** ## Instructors Guillermo Sanchez – guilleis@uci.edu Guillermo Hernandez – guilleeh@uci.edu ## Schedule | Day/Time | Time | Location | | --------- | ---- | -------- | | Mondays | 6pm | HH 156 | | Tuesdays | 5pm | ICS 259 | ## Attendance/Homework Submission ### [Attendance Link](https://docs.google.com/forms/d/e/1FAIpQLSdAgljgjx-yGatFFyuxLxqx69ZFHId-iH-YlPjrfnoIXe80XQ/viewform) ### [Assignment Submission](https://docs.google.com/forms/d/e/1FAIpQLSdbHataTiAFyV0KlQU3SrDV6TjfuygvzLTQBmiKvUh3M000Mw/viewform) - [How to submit assignments](https://youtu.be/YggM5sLvMpU) ## Project Starters ### Unit 0: Intro to Grid Bootstrap & GitHub – [Josue Lopez](https://github.com/josueal1) [Instructions/Steps for Lab 0](https://github.com/membriux/Teach-Webdev-SHPE/tree/master/CompletedProjects/Intro-to-Git-Grid-System) [**Homework: Your First Website**](https://www.makeschool.com/academy/track/web-dev-with-node/your-first-website--landing-page/intro-landing-page) ### Unit 1: Intro to Javascript – [Israel](https://github.com/israelj013) Tic-Tac-Toe [Project Starter](https://github.com/membriux/Teach-Webdev-SHPE/blob/master/ProjectStarters/TTT%20Starter.zip) [Completed Project](https://github.com/membriux/Teach-Webdev-SHPE/raw/master/CompleteZips/tic-tac-toe.zip) [Lecture Slides](https://drive.google.com/open?id=1vsueSz2A_DgyuxHBU5qpSQdeVePFpT2zolwO-RacyC8) [Lecture video](https://youtu.be/6eMGMxjaik8) [**Homework: Concentration Game**](https://www.makeschool.com/academy/track/web-dev-with-node/build-a-game-of-concentration-with-javascript/intro-landing-page-Tqk=) ### Unit 2: JSON & Passing Data – [Memo](https://github.com/guilleeh) Pokedex [Project Starter](https://github.com/membriux/Teach-Webdev-SHPE/raw/master/ProjectStarters/pokedex-starter.zip) [Completed Project](https://github.com/membriux/Teach-Webdev-SHPE/blob/master/CompleteZips/pokedex.zip) [Lecture Slides](https://docs.google.com/presentation/d/1w9gElqUfftCWZQFMXizGYT50OpZdjXGUlrlgDGhQc2w/edit?usp=sharing) [Monday Lecture Video](https://youtu.be/gnJMWqLtR2s) [Tuesday Lecture Video](https://youtu.be/a9J_pO-ZPkM)  [**Homework: APIs**](https://www.makeschool.com/academy/track/web-dev-with-node/build-a-giphy-api-wrapper/giphy-api-introduction) ### Unit 3: APIs – [Memo](https://github.com/guilleeh) [Project Starter](https://github.com/membriux/Teach-Webdev-SHPE/raw/master/ProjectStarters/github-finder-starter.zip) [Completed Project](https://github.com/membriux/Teach-Webdev-SHPE/raw/master/CompleteZips/github-finder.zip) [Lecture Slides](https://docs.google.com/presentation/d/1uV3IrJ9qYg6PKUXg35e8NoLn9mCG4ln-zCbTG_l4Ajc/edit?usp=sharing) [Monday Lecture Video](https://youtu.be/AOnqvrJ0clw) **Homework:** Catch up on [APIs](https://www.makeschool.com/academy/track/web-dev-with-node/build-a-giphy-api-wrapper/giphy-api-introduction) and [Concentration Game](https://www.makeschool.com/academy/track/web-dev-with-node/build-a-game-of-concentration-with-javascript/intro-landing-page-Tqk=) ### Unit 4: Mongo Chat – [Memo](https://github.com/guilleeh) [Project Starter](https://github.com/membriux/Teach-Webdev-SHPE/raw/master/ProjectStarters/Mongo-chat.zip) [Completed Project](https://github.com/membriux/Teach-Webdev-SHPE/raw/master/CompleteZips/mongo-chat.zip) [Monday Lecture](https://youtu.be/IqLAv5ssc8Y) [**Homework: Makereddit Pt. 1**](https://www.makeschool.com/academy/track/web-dev-with-node/makereddit/00-get-started) ### Unit 5: E-Commerce – [Osvaldo](https://github.com/waldo023) [Project Starter](https://github.com/membriux/Teach-Webdev-SHPE/raw/master/ProjectStarters/Ecommerce-starter.zip) [Completed Project](https://github.com/membriux/Teach-Webdev-SHPE/blob/master/CompleteZips/Ecommerce.zip)  [**Homework: Makereddit Pt. 2**](https://www.makeschool.com/academy/track/web-dev-with-node/makereddit/00-get-started) **Homework: Form groups and brainstorm for project, ideas.** ### Unit 6: CrapMaps – [Guillermo](https://github.com/) [Project Starter](https://github.com/membriux/Teach-Webdev-SHPE/raw/master/ProjectStarters/maps_starter.zip) [Completed Project](https://github.com/membriux/Teach-Webdev-SHPE/blob/master/CompleteZips/maps_project.zip) HW: Finalize group formations, commence working on projects  ## Resources ### [Make School](https://www.makeschool.com/academy) - Tutorials on web dev, mobile dev, and mobile game dev ### [Bootstrap](https://getbootstrap.com) - CSS framework + documentation to help you style your website ### [Materialize](https://materializecss.com/) - Google's CSS framework + documentation to help you style your website ### [W3Schools](https://www.w3schools.com/) - Tutorials on pretty much everything (i.e. python, Ajax, SQL, C++, JS, UI/UX, and more) ### [Top 100 Web Dev resources/tools](https://www.websitehostingrating.com/top-100-web-development-resources/) - Tutorials/Resources on the best languages, Javascript libraries, web app frameworks, web front-end frameworks, databases, etc. ### [Udacity](https://www.udacity.com/) - Well structured courses in cutting edge tech like machine learning, computer vision, autonomous systems, cloud computing, data science, and more. Taught by leading industries like Google, Facebook, Lyft etc. as well as top performing professors in well-known educational institutions. ### [Udemy](https://www.udemy.com/) - Courses on almost anything taught by industry professionals, cheaper than Udacity courses. ### [Coursera](https://www.coursera.org/) - Courses similar to Udacity, but focused on the academics. Where as Udacity is more hands-on learning. ### [Name](Link) - Description