Daily README/DISCUSSION

class-00/README.md

@@ -0,0 +1,31 @@
+# Welcome to Code 301
+
+## Overview
+
+The labs in this folder should be completed independently prior to the first Code 301 lecture.
+
+Each assignment has a corresponding Canvas assignment. Make sure to complete each lab and submit the assignment so your TA can grade your work. Ask your instructor or a TA if you have any questions.
+
+## Before you begin
+
+## Cloning Our Class Repo
+
+- Visit your class repository in a browser (link can be found in your course syllabus)
+- **Fork the class repository** by clicking the "Fork" button on the repo page in GitHub.
+- Once you do this, you'll have your own "copy" of the repo
+- **Clone the repository**
+  - On your local machine, create a `301` folder under your current `codefellows` folder
+  - Create your clone within this folder
+  - Note: Your future 301 lab assignments will also be done here
+- **Set the class repository as your `upstream`**
+  - `cd` into your cloned repo and type this command:
+  - `git remote add upstream CLASS-REPO-URL`
+    - Replace `CLASS-REPO-URL` with the actual URL to the class repository, not your fork.
+- From this point on, when your instructor commits changes to the class repository, you can pull those changes into your fork with this command, from within your folder
+  - `git pull upstream master`
+
+### Why are we doing this?
+
+- You will be using the "wiki" feature of GitHub within your fork to document your lecture notes and reading notes.
+- Additionally, you may want to add your own notes to the class days in addition to what your instructor posts.
+- Maintaining your own fork allows you to keep connected to the class "master" repository, while still being able to make changes to your version or fork of it.

class-01/DISCUSSION.md

@@ -0,0 +1,25 @@
+# Readings
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+- [Shay Howe’s intro to RWD](http://learn.shayhowe.com/advanced-html-css/responsive-web-design/){:target="_blank"}
+- [All About Floats](https://css-tricks.com/all-about-floats/){:target="_blank"}
+
+<!-- ## Additional Resources
+
+PLACEHOLDER
+
+### Videos
+
+PLACEHOLDER -->
+
+### Bookmark/Skim
+
+- [Don't Overthink It Grids](https://css-tricks.com/dont-overthink-it-grids/){:target="_blank"}
+- [CSS Floats Explained By Riding An Escalator](https://medium.freecodecamp.org/css-floats-explained-by-riding-an-escalator-57fa55232333){:target="_blank"} - If you took Code 201, review this article. If you did not take Code 201, this is Essential reading.
+
+- [SMACSS Official Documentation](http://smacss.com/){:target="_blank"}

class-01/README.md

@@ -0,0 +1,24 @@
+# SMACSS and Responsive Web Design
+
+## Overview
+
+Today we will be covering some new topics and reviewing concepts you should already be familiar with. For students who completed Code 201, today should be a review of CSS floats.
+
+We will spend some time reviewing the concepts from the lab 00 assignments. We will also discuss several new and very important topics, including state, scope, and the "new" keyword.
+
+## Daily Plan
+
+- Overview of 301
+- Review of lab 00 assignments
+- Discussion of context, scope, "this", and "new"
+- Review of CSS floats
+- Introduction to code challenges
+- Introduction of Code Challenge topic
+- Lab Prep
+
+## Learning Objectives
+
+As as result of completing Lecture 1 of Code 301, students will: 
+- Gain an understanding of scope with arrow functions and with the use of `let` and `const` in place of `var`
+- Gain an understanding of context, scope, "this", and the "new" keyword
+- Refresh their understanding of CSS floats

class-02/DISCUSSION.md

@@ -0,0 +1,24 @@
+# Readings: TOPIC NAME
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+- JavaScript and jQuery book by Jon Duckett pages 293-301, 306-331 and 354-357
+- [6 Reasons for Pair Programming](https://www.codefellows.org/blog/6-reasons-for-pair-programming/){:target="_blank"}
+
+<!-- ## Additional Resources
+
+PLACEHOLDER
+
+### Videos
+
+PLACEHOLDER -->
+
+### Bookmark/Skim
+
+- JavaScript and jQuery book by Jon Duckett pages 332-335
+
+- JavaScript and jQuery book by Jon Duckett pages 302-305

class-02/README.md

@@ -0,0 +1,28 @@
+# jQuery Selectors and Events
+
+## Overview
+
+Today's class will focus on jQuery selectors and events. jQuery is an excellent library for DOM traversal and manipulation. We will also go through examples of using jQuery to handle events. 
+
+We will begin a lab assignment today which will carry over to the assignment for lab 3.
+
+## Daily Plan
+
+- Warm-up exercise
+- Review code challenges
+- Introduction of today's code challenge topic
+- Code review of lab assignment
+- jQuery selectors
+- jQuery events
+- Code Demo
+- Lab Preview
+
+## Learning Objectives
+
+As a result of completing Lecture 2 of Code 301, students will:
+- Understand why the jQuery library is useful and how to include it in a project
+- Perform DOM traversal and manipulation using jQuery selectors
+- Differentiate between certain methods
+- Understand the process of chaining methods
+- Understand proper `<script>` loading order in HTML
+- Understand how AJAX can be used to read a JSON file

class-03/DISCUSSION.md

@@ -0,0 +1,24 @@
+# Readings
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+- [Templating with Mustache](https://medium.com/@1sherlynn/javascript-templating-language-and-engine-mustache-js-with-node-and-express-f4c2530e73b2){:target="_blank"}
+- [A Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/){:target="_blank"}
+- [Flexbox Froggy](https://flexboxfroggy.com/){:target="_blank"}
+  - Complete all steps of this tutorial
+
+<!-- ## Additional Resources
+
+PLACEHOLDER
+
+### Videos
+
+PLACEHOLDER -->
+
+### Bookmark/Skim
+
+- Reference: [Mustache.js Official Documentation](https://github.com/janl/mustache.js){:target="_blank"}

class-03/README.md

@@ -0,0 +1,24 @@
+# Flexbox & Templating
+
+## Overview
+
+Today we will discuss the benefits of using a templating library called Mustache to render our images. We will also discuss a CSS layout mode called Flexbox, comparing and contrasting between Flexbox and floats.
+
+## Daily Plan
+
+- Warm-up exercise
+- Review code challenges
+- Introduction of today's code challenge topic
+- Code review of lab assignment
+- Mustache
+- Flexbox
+- Code Demo
+- Lab Preview
+
+## Learning Objectives
+
+As a result of completing Lecture 3 of Code 301, students will:
+
+- Understand the benefits of using a templating library to render multiple elements
+- Be able to distinguish between the different Mustache expression types
+- Understand how to style pages using Flexbox

class-04/DISCUSSION.md

@@ -0,0 +1,26 @@
+# Readings: TOPIC NAME
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+- [CSS Grid Garden](https://cssgridgarden.com/){:target="_blank"}
+  - Complete all steps of this tutorial
+
+<!-- ## Additional Resources
+
+PLACEHOLDER
+
+### Videos
+
+PLACEHOLDER -->
+
+### Bookmark/Skim
+
+- [RegExr](https://regexr.com/){:target="_blank"} - Pay particular attention to the cheatsheet
+- [Regex Tutorial](https://medium.com/factory-mind/regex-tutorial-a-simple-cheatsheet-by-examples-649dc1c3f285){:target="_blank"}
+- [Regex 101](https://regex101.com/){:target="_blank"}
+- [CSS Grid Reference](https://css-tricks.com/snippets/css/complete-guide-grid/){:target="_blank"}
+- [Responsive design with CSS Grid](https://medium.com/samsung-internet-dev/common-responsive-layouts-with-css-grid-and-some-without-245a862f48df){:target="_blank"}

class-04/README.md

@@ -0,0 +1,27 @@
+# Responsive Web Design and Regular Expressions 
+
+## Overview
+
+Today's lecture will cover several topics. The style-based topic include a third approach to styling, CSS Grids. We will also discuss relative units for responsive web design and a demonstration of how to add icon fonts to an application.
+
+We will also discuss the basics of pattern matching with regular expressions, including the introduction of several online validation tools.
+
+## Daily Plan
+
+- Warm-up exercise
+- Review code challenges
+- Introduction of today's code challenge topic
+- CSS Grid Garden
+- Responsive web design
+- Icon fonts
+- Regular expressions
+- Code Demo
+- Lab Preview
+
+## Learning Objectives
+
+As a result of completing lecture 4 of Code 301, students will:
+- Understand how to create a responsive web site using relative units
+- Be able to style a web application with CSS grids
+- Understand how to add and style icon fonts
+- Understand the basics of pattern matching with regular expressions

class-05/DISCUSSION.md

@@ -0,0 +1,22 @@
+# Readings: TOPIC NAME
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+- [Heroku: Getting Started with Node](https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction){:target="_blank"}
+  - Complete all of the steps through "View logs"
+
+<!-- ## Additional Resources
+
+PLACEHOLDER
+
+### Videos
+
+PLACEHOLDER -->
+
+### Bookmark/Skim
+
+- [Deploying a Simple Blog to Heroku](https://howtonode.org/deploy-blog-to-heroku)

class-05/README.md

@@ -0,0 +1,45 @@
+# Class 5: Deployment
+
+## Overview
+
+Today we will cover code deployments.
+
+Following lecture, we will deploy our portfolio app, workshop style. Each student will follow along, deploying the personal portfolio built in lab 4 to a cloud web hosting platform called Heroku.
+
+## Daily Plan
+
+- Warm-up exercise
+- Introduction of today's code challenge topic
+- Build City Explorer (HTML, CSS, JS, jQuery, Mustache)
+- Deployment Overview and Demo
+- Deployment Workshop
+- Lab Preview
+
+## Learning Objectives
+
+As a result of completing lecture 5 of Code 301, students will:
+
+- Understand the difference between deploying static and dynamic web applications
+- Understand deployment processes over multiple environments
+- Be able to deploy dynamic web applications to Heroku
+
+### Deployment Workshop
+
+Today, we will be deploying your portfolio to a real web server. This will require a carefully stepped process:
+
+- [ ] Create a new repository for your server at GitHub
+- [ ] Develop and test your server from your machine
+  - /data route that sends JSON data
+  - Static files served from `/public`
+  - Simple 'hello world' `index.html` in public
+- [ ] Check in your server code to GitHub (`master` branch)
+- [ ] Create an account at Heroku.com
+- [ ] Create a new "app" from your Heroku Dashboard
+- [ ] Deploy your app from your GitHub repository (see Deploy tab in Heroku)
+- [ ] Confirm app is live!
+- [ ] Connect your app to master
+- [ ] Move portfolio website content to the `public` folder
+- [ ] Check in your server code to GitHub (`master` branch)
+- [ ] View Heroku logs (Activity tab)
+- [ ] Confirm app with portfolio content is live
+- [ ] Win.

class-06/DISCUSSION.md

@@ -0,0 +1,21 @@
+# Readings: TOPIC NAME
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+- [An Introduction to Node.js on sitepoint.com](https://www.sitepoint.com/an-introduction-to-node-js){:target="_blank"}
+
+<!-- ## Additional Resources
+
+PLACEHOLDER
+
+### Videos
+
+PLACEHOLDER
+
+### Bookmark/Skim
+
+PLACEHOLDER -->

class-06/README.md

@@ -0,0 +1,28 @@
+# Node, npm, and Express
+
+## Overview
+
+Today we will take a step into the back end, beginning to write a proper `server.js` file to serve API data to the City Explorer client application. You will continue to build out this file through lab 9, working with a new partner each day.
+
+Another component of this portion of the course involves working with a static client which you have no control over. You will be able to view the source code for this client, but will not be permitted to modify it in anyway. Servers and clients are separate entities; the only relationships that exist between them are the relationships we create. This week, you will be creating those relationships.
+
+## Daily Plan
+
+- Warm-up exercise
+- Review code challenges
+- Introduction of today's code challenge topic
+- Code review of lab assignment
+- Node, ExpressJS, and npm
+- Environment variables
+- Code Demo
+- Lab Preview
+
+## Learning Objectives
+
+As a result of completing Lecture 6 of Code 301, students will:
+- Begin to understand how the world wide web works
+- Be able to explain the role of the browser and the server as components of the web request-response cycle
+- Understand how to initialize a NodeJS project and use NPM packages
+- Understand the basics of working with ExpressJS 
+- Control their production and deployment environments
+- Understand how to interact with a static client code base

class-07/DISCUSSION.md

@@ -0,0 +1,32 @@
+# Readings: TOPIC NAME
+
+Below you will find some reading material, code samples, and some additional resources that support today's topic and the upcoming lecture.
+
+Review the Submission Instructions for guidance on completing and submitting this assignment.
+
+## Reading
+
+- [What Google Learned From Its Quest to Build the Perfect Team](https://www.google.com/amp/mobile.nytimes.com/2016/02/28/magazine/what-google-learned-from-its-quest-to-build-the-perfect-team.amp.html){:target="_blank"}
+  - If you took Code 201, skim this article again for a refresher. If you did not take Code 201, read this article and think about how it can influence the way you work with your partners during pair programming.
+- [How I explained REST to my brother](https://gist.github.com/brookr/5977550)
+
+<!-- ## Additional Resources
+
+PLACEHOLDER
+
+### Videos
+
+PLACEHOLDER -->
+
+### Bookmark/Skim
+
+- [Documentation for SuperAgent](https://visionmedia.github.io/superagent/){:target="_blank"}
+
+## API Keys
+
+Request a personal API key from the following APIs. You should receive these in your email within a few hours, often within minutes. Please request these keys prior to lecture to allow adequate time because you will need them in order to complete your lab assignment. Note: do not post your API keys in the Canvas discussion or on GitHub. Save them in a secure place.
+
+- [Geocoding API Docs](https://locationiq.com/){:target="_blank"}
+- [Dark Sky API Docs](https://darksky.net/dev/docs){:target="_blank"}
+- [Yelp API Docs](https://www.yelp.com/developers/documentation/v3/business_search){:target="_blank"}
+- [The Movie DB API Docs](https://developers.themoviedb.org/3/getting-started/introduction){:target="_blank"}