Lesson Plans
Module 1 Lessons
Syllabus
- Overview & Expectations
- Weekly Detail
- Evaluation & Skills Progression
- FEE Program Orientation (google slides)
HTML and CSS
- HTML I: Structure & Semantics
- HTML Review Workshop: Structure, Semantics
- CSS I: Structure, Box Model, and Positioning
- CSS Jigsaw
- Intro To Responsive Layouts
- CSS Layout Challenges
- Reset vs Normalize CSS Files
- Introduction to Flexbox | Slides
- Introduction to Grid
- CSS Transitions, Transformations, and Animations
- Unicorn Rescue
- HTML Accessibility Breakout Session
- HTML and CSS Workshop
- Approaching a New Spec
Javascript
- JS I: Data Types, Variables, Conditionals, and Functions
- JS II: Scope, Arrays, and For Loops
- JS III: Introduction to DOM Manipulation
- JS IV: Objects, `this`, Classes, & Instances
- JavaScript Playground
- localStorage and JSON
- Debugging Javascript
- Event Bubbling and Delegation
- Introduction to Unit Testing JavaScript
- Intro to Array Prototype Methods
- What is
this? - Javascript Workshop
- Javascript Workshop Advanced
- Refactor Workshop
Git and Github
Design Principles
System and Set Up
Community
Professional Development
Module 2 Lessons
Module 2 focuses on fundamental JavaScript concepts, popular patterns for writing and organizing front-end code, and learning new tools and workflows to help improve the development process for more complex applications. Projects will reinforce lesson concepts by emphasizing Object-Oriented Programming, Test-Driven Development and heavy data manipulation. | Intro to Mod 2 (slides)
General Web, Tooling & Workflow
- Intro to NPM
- Build Processes with Webpack
- ESLint Basics
- git Workflow: taming merge conflicts
- git Workflow: Merge vs Rebase
- Refactoring Guidelines
- Workflow: remote & local repos, Forking vs. Cloning
- Effective GitHub Collaboration
- Whiteboarding and Pseudocoding
- Introduction to Network Requests
- How The Web Works
- Cross-Browser Compatibility
Design & UI/UX
JavaScript
General
- Data Types: Simple vs. Complex
- ES5 vs ES6
- Rules of "this"
- jQuery Intro - DOM Traversal, Manipulation, and Events
Objects
- Objects: Literals, Constructors, and this
- Objects: Prototype & Prototype Chain
- Objects: Inheritance
- Objects: Review Session
Scope
Prototypes and Data Manipulation
Testing
CSS
Module 3 Lessons
Module 3 focuses on front-end frameworks and libraries for building complex, scalable, fully-tested applications, as well as diving into asynchronous JavaScript and consuming APIs. Primary tools used are React, React Router, and Redux. Projects are designed to reinforce lesson concepts by allowing students to practice implementing network requests, frameworks, and testing in applications that range from small and simple to larger and more complex.
Tooling & Workflow
React
- React I: the What and the Why
- React II: the How
- React III: Advanced Data Management
- Unit Testing React with Create React App, Enzyme, and Jest
- Testing Async Methods & API Calls in React
React Router
Redux
Advanced React
ES6 Fundamentals
- Promises
- Promises Review & Practice
- Higher Order Functions & Currying
- ES6 Generators
- ES6 Spread & Rest Operators
- ES6 Destructuring (Exercises)
Application Architecture
Accessibility
Workshops
Other Stuff
Module 4 Lessons
Server-Side JavaScript and APIs
- Kickoff
- Introduction to Node.js
- Server-Side Testing With a DB
- Deploying a Node app to Heroku
- Express Middleware
- Web Scraping Workshop
Data Persistance
Security & Authentication
Build Tools & Workflow
- Connecting Front-End and Back-End Applications
- Environments & Their Variables
- Advanced git Workflow
- Continuous Integration with TravisCI | TravisCI Walkthrough
Mobile Dev: React Native and Progressive Web Apps
Interview Prep
- "Wheel of Jeopardy" Interview Questions
- Repository Refactor
- Mock Interview Pairing
- Interviewee Questions
- Recursion
- Sorting Algorithms
- Linked List
- Binary Search Trees
- Big-O
