Phase1-javascript.md

Flatiron School Phase 1 Javascript Curriculum

Welcome to Phase 1

• Welcome - What To Expect In Phase 1
• Blogging

Discussion Questions

• Discussion Questions: Arrow Functions
• Discussion Questions: Thinking in Types
• Discussion Questions: JS and the DOM
• Discussion Questions: Events
• Discussion Questions: ES6 Features
• Discussion Questions: Client-Server Communication
• Discussion Questions: AJAX
• Discussion Questions: Execution Context

JavaScript Fundamentals

• Video: Variables and Data Types
• JavaScript Variables
  • Review: Variables Lab
  • Review: Strings Lab
• Comparisons in JavaScript
• Video: JavaScript Conditionals
• Review: Conditionals
• Logical Operators
  • Review: Control Flow Lab
  • Review: Arithmetic Lab

Functions in JavaScript

• Video: Functions
• Review: Functions
  • Functions Lab
  • Functions: Continued
  • Video: Arrow Functions
• Arrow Functions
• Callback Functions
  • First-Class Functions
  • JavaScript Advanced Functions: First-Class Functions Lab

Scope

• Video: Scope
• Introduction to Scope
• Scope Chain
  • Scope Lab
• Lexical scoping

Working with Data Structures in JavaScript

• Video: Arrays and Objects
• Arrays
• Array Methods
  • Arrays Lab
• Objects
• Modifying Objects
  • Objects Lab
• Review: Debugging
• Video: JavaScript Loops
  • Looping Lab
• Object Iteration
• Traversing Nested Objects
  • Bonus: JavaScript Object-ball

Video Series: Array Iteration

• Video: First Class Functions
• Video: First Class Functions Part 2
• Video: .map
• Video: .map Part 2
• Video: .find
• Video: .reduce
• Video: .forEach

Array Iteration

• Array Iterator Methods
• Finding Array Elements
  • Using the Array Find Method
• Filtering Array
  • Using the Array Filter Method
• Mapping Arrays
  • Using the Array Map Method
  • Using the Array Reduce Method
• forEach: The Iterator of No Return
• Arrays and Objects - What is Really Going On?

JavaScript Advanced Syntax

• Video: Destructuring & Spread Operator
  • Destructuring Assignment
• Advanced Function Parameter Syntax: Default / Rest / Spread

Introducing Flatiron's Three Pillars of JavaScript

• Defining Front-End Web Programming
  • Stitching Together the Three Pillars

JavaScript and the DOM

• Video: Intro to DOM
• Introduction to the DOM
  • DOM Editing Lab
• Changing The DOM with DevTools and JavaScript
• The DOM Is a Tree
• Video: DOM Selectors
• JavaScript Query Selector Methods
• Video: Changing DOM Elements
  • Creating and Inserting DOM Nodes Lab
• You're a DOM Manipulation Expert Now!

JavaScript Events

• Video: DOM Events
• JavaScript Events
  • JavaScript Event Listeners Lab
  • Moving Things with JavaScript by Acting on Events
• Video: Forms
• Video: DOMContentLoaded
  • The JavaScript DOMContentLoaded Event
  • Challenge: TaskLister Mini-Project
• You're an Eventing Expert Now!

Communicating with the Server

• Introduction to Communicating with the Server
• Video: Intro to the Internet
• How The Web Works
• Video: JSON
• Video: Postman
  • Using JSON Server and Postman to Mock Client/Server Communication
• Video: Asynchronous JavaScript & Fetch
• Video: DOM Manipulation Review
• Video: GET Requests
• Using fetch()
  • Fetch Lab
  • Fetch on Demand with Forms
• Asynchronous JavaScript
• Video: POST Requests
• Video: PATCH Requests
• Video: DELETE Requests
  • Sending Data with Fetch

Combining the Three Pillars

• Pulling It All Together
  • Building the Simple Liker App

Applying Your Learning

• Interacting with the DOM using Events
• Fetch Dog CEO
• Toy Tale
• GitHub Search App

Additional Practice: JavaScript

• Additional Practice: Monsters
• Additional Practice: Woof Woof Welcome to Doggo Bark Bark
• Additional Practice: Westminster Kennel Club Dog Show
• Additional Practice: BookLiker
• Additional Practice: JavaScript Quotes
• Phase 1 Mock Code Challenge: Ramen Rater

Algorithmic Problem Solving

• Introduction to Algorithmic Problem Solving
• What is an Algorithm?
  • Palindrome Lab
  • Palindrome Lab Solution 1
  • Palindrome Lab Solution 2
• Big O Notation
• Big O Examples
  • Has Target Sum Lab
  • Has Target Sum Lab Solution
• Algorithmic Problem Solving Conclusion

Context in JavaScript

• Introduction to Context
• Context and Implicit Setting
• Context and Explicit Setting
  • Context Lab
• The Lost Context Bug Code-Along
  • JavaScript Functional Library Project

Object-Oriented JavaScript

• Video: Intro to Object-Oriented JavaScript
• Video: Execution Context
• Object Orientation in JavaScript
• Classes and Instances
  • Initializing Instances
  • Adding Behavior With Methods
• Method Types
  • Getter and Setter Methods
  • Static Methods Lab
• Video: Inheritance
• Class Extensions and Inheritance
• Class Extension Lab
• Super
  • Super Lab
• Liskov's Substitution Principle

JavaScript Inheritance

• Prototypal Inheritance
• Constructor Functions
  • Constructor Functions Lab
• Using Prototypes
  • Object Methods in JS Lab
• Prototypal Inheritance Conclusion

Additional Practice: HTML Forms and Modern Elements

• HTML Forms
  • HTML Forms Lab
• HTML IFrames
  • HTML IFrames Lab
• HTML5 Media
  • HTML5 Embedded Videos Lab
• HTML5 Semantic Elements
  • HTML5 Semantic Elements Lab

Git and GitHub

• Welcome to Git/GitHub
• Intro to Version Control
• Git Basics
• .gitignore
• Getting Code with GitHub
• Pushing Code to GitHub
• Maintaining a Good Commit History
• Viewing the Git Commit History
• Undoing Changes with Git
• Working with Branches
• Merging Branches with Git
• Resolving Merge Conflicts
• Collaborating with Git and GitHub
• Building a Great GitHub Profile

Phase 1 Project

• Phase 1 Project Guidelines