00
Course Introduction & Tools
Objectives
Class Logistics & Materials
Course Structure
Course Tools
Folder Organization
Confirm Node & Git Installation
What is Programming?
What is JavaScript?
Pseudocode
Class Exercise - Smart Thermostat Pseudocode
Group Exercise - Rock, Paper, Scissors
01
Command Line JS & Git
Objectives
Intro the the Command Line
Code Along: Command Line Intro
Git Overview
Github
Git Vocabulary
Git Basics
Code Along: Basic Git Workflow
Code Along: Git Branching & Merging
02
JavaScript Basics
Objectives
Variables
What are Variables?
Declaring Variables
Updating Variables
Naming Rules for Variables
var keyword
const
When to use let vs const
Data Types
Strings
Numbers
Booleans
Arrays
Objects
Arithmetic Operators
Comparison Operators
Logical Operators
03
Control Flow and Loops
Objectives
Conditionals
if Statement
if..else Statement
if..else if Statement
ternary Operator
Switch Statement
Loops & Iteration
while Loop
do..while Loop
for Loop
forEach Loop
Lab: JS Basics, Control Flow & Loops
04
Functions and Scope
Function Overview
Declaring Functions
Calling Functions
Hoisting
Returning Values from Functions
Working with Parameters
Functions Calling Other Functions
Function Expressions & Anonymous Functions
Arrow Functions
Scope
Global Scope
Local Scope
Scope in Block Statements
Single Responsibility Principle
Code Along: Rolling Dice
05
Arrays & Objects
Objectives
Array Review
Creating Arrays
Accessing Array Values
Updating Array Values
Adding & Removing Items
.push()
.pop()
.shift()
.unshift()
.slice()
length Property
Array Iterators
.forEach()
.map()
.find()
.filter()
.reduce()
Other Iterators
Objects
Creating Objects
Accessing Properties
Dot Notation
Bracket Notation
Assigning Properties
Methods
Nested Objects
06
DOM & jQuery
Objectives
Document Object Model
jQuery Overview
What is jQuery?
Benefits of jQuery
Document Ready Function
Adding jQuery to your Projects
Add jQuery via Download
Add jQuery via CDN
jQuery Syntax
jQuery Selectors
jQuery Objects
Code Along: Rolling Dice jQuery
jQuery Events
Events Handlers
Mouse Events
.click() Event
.hover() Event
Form Events
.change() Event
.submit() Event
Other Events
jQuery Manipulation
Getting & Setting Content
.text()
.html()
.val()
.attr()
Inserting & Removing Content
.append()
.prepend()
.before()
.after()
CSS & Style Manipulation
.css()
.addClass()
.removeClass()
.toggleClass()
jQuery Effects
.show() & .hide()
.toggle()
.slideUp() & .slideDown()
.slideToggle()
.fadeIn() & .fadeOut()
Other Effects
jQuery Traversing
ancestors
descendants
Other Traversal Methods
07
DOM & jQuery II
$(this)
event.currentTarget
Code Along: Color Scheme Switcher
Code Along: Traffic Light
Code Along: Score Keeper
08
DOM & jQuery III
Code Along: HiLo
Lab: CitiPix
09
HTTP and APIs
Objectives
Clients & Servers
HTTP
Overview
HTTP Requests
URLs
HTTP Methods
GET
POST
PUT
DELETE
HTTP Responses
Status Codes
APIs
Overview
Finding APIs
Data Formats
API Keys
JSON
Overview
JSON.stringify()
JSON.parse()
AJAX
Overview
AJAX Requests using Native JS
AJAX Requests with jQuery
Code Along: Giphy API
Code Along: Twilio SMS API
Lab: Send & Receive with Twilio SMS API
10
Asynchronous JS and Promises
Objectives
Synchronous Programming
Asynchronous Programming
Simulating Async Operations
Challenges of Async Programming
Handling Async Issues with Callbacks
Promises
Overview
Creating Promises
Consuming Promises
Handling Async Issues with Promises
Passing values with Promises
Error Handling with .catch()
Async / Await
Overview
Handling Async Issues with Async / Await
Passing Values with Async / Await
Error Handling with Async / Await
Code Along: Giphy API with Async / Await
11
Lab: Giphy Weather App
Objectives
Instructions
Requirements
12
Project: Build a Slackbot
Objectives
Project Overview
Documentation
Tutorial
Step 1: Create New Slack Workspace
Step 2: Create New Slack App
Step 3: Set Up Node Application
Step 4: Run ngrok
Step 5: Create a test Slash command
Step 6: Install App to Workspace
Step 7: Responding to Slash Commands
Step 8: Test your Slash Command
Step 9: Access Slash Command Parameters
Step 10: Make API Request to OpenWeather
Step 11: Respond to Slack with Current Weather
Step 12: Use Environment Variables to Protect Secure Credentials
Step 13: Handle Errors Gracefully
Step 14: Enhance Weather Response with Emojis
13
Object Oriented JS
Objectives
Classes
Overview
Constructor
Encapsulation
Instances
Methods
Overview
Getters & Setters
General Methods
Static Methods
Inheritance
Overview
Super & Extends
14
Intro to CRUD and Firebase
Objectives
CRUD
Firebase
Overview
Benefits
NoSQL Databases
Code Along: Firebase Playlist App
15
Project: Firebase Todo App
Objectives
Instructions
Requirements
16
Intro to Express
Objectives
Clients & Servers
Express
Overview
Middleware
Routing
Route Parameters
Code Along: Express TMDB App
17
Deploying Your App
Objectives
Github Pages
Code Along: Hosting with Github Pages
Surge
Code Along: Hosting with Surge
Securing Sensitive Credentials with Parcel
Code Along: Using Environment Variables with Parcel
Heroku
Code Along: Hosting with Heroku
Step 1: Install Heroku
Step 2: Prepare the App
Step 3: Run Heroku Locally
Step 4: Deploy to Heroku
18
Final Projects Lab
Lab: Final Projects
19
Final Project Presentations
Presentation Script
A.
Homework Assignments
HW Assignment #1
HW Assignment #2
HW Assignment #3
HW Assignment #4
B.
Final Projects
Overview & Requirements
Milestones & Due Dates
I.
Submit Project Ideas
II.
Get Idea Approved
III.
Create Github Repository for Final Project
IV.
Create & Submit Wireframes
V.
Create Project Plan
VI.
Host Final Project
VII.
Submit Final Project
C.
Solutions
Classwork & Lab Solutions
Homework Solutions
D.
Class Resources
Office Hours
Documentation
Git Commands
Git Workflow for Submitting Assignments
Keyboard Shortcuts
Recommended Atom Editor Settings
Opening Atom from Command Line
Working with Atom Themes
Show Git-Ignored Files in Atom
Node & Git Installation
Mac OS X Installation Instructions
Windows Installation Instructions
Linux Installation Instructions
Keys to Success
Learning HTML & CSS
CORS
E.
Continue Learning
Free Courses & Guides
JSD
>
Final Projects
>
Milestones & Due Dates
> Get Idea Approved
Milestone II: Get Final Project Idea Approved
Get Idea Approved
Milestone II: Get Final Project Idea Approved
Due Date
: Thursday, September 5th
After meeting with the instructor and discussing your idea, you’ll formally decide what you want to build