Lesson Plans

Module 1 Lessons

Module 1 focuses on building a foundation for Front End Engineering and some of the tools and processes necessary for development. Students will learn to write semantic HTML, build responsive layouts, and write clean, refactored JavaScript that utilizes DOM manipulation, Object-Oriented Programming concepts, and Test-Driven Development. Projects will reinforce lesson concepts by emphasizing Object-Oriented Programming, comp recreation including responsive design, and clean, readable code.

Syllabus

• Overview & Expectations
• Evaluation & Skills Progression
• Portfolio Presentations
• FEE Program Orientation (google slides)

HTML and CSS

• Intro to HTML
• HTML: Planning a Layout
• HTML Review Workshop: Structure, Semantics
• Intro to CSS
• CSS: Layout
• CSS Jigsaw
• Intro To Responsive Layouts
• CSS Layout Challenges
• Reset vs Normalize CSS Files
• Introduction to Flexbox
• Introduction to Grid - Slides, Grid Tutorial
• CSS Transitions, Transformations, and Animations
• Unicorn Rescue
• HTML Accessibility Breakout Session
• HTML and CSS Workshop
• Approaching a New Spec

Javascript

• Intro to JS
• Functions
• Scope
• Arrays & Loops
• JS II: Scope, Arrays, and For Loops
• JS III: Introduction to DOM Manipulation
• JS IV: Objects, `this`, Classes, & Instances
• Object Literals - Review
• 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

• Git Review
• Intro to Git and GitHub
• Git Commands
• Git Workflow

Design Principles

• Design I
• Typography Foundations
• Color Theory Foundations
• Gestalt Principles

System and Set Up

• Introduction to the Terminal

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

• Introduction to UI/UX; Empathy in Design
• Introduction to Personas
• Web Accessibility

JavaScript

General

• Data Types: Simple vs. Complex
• ES5 vs ES6
• Rules of "this"
• jQuery Intro - DOM Traversal, Manipulation, and Events
• Asynchronous JavaScript

Objects

• Objects: Literals, Constructors, and this
• Objects: Prototype & Prototype Chain
• Objects: Inheritance
• Objects: Review Session

Scope

• Scope: Execution Contexts
• Scope: JS Scopes & Scope Chain
• Scope: Scope & Closures

Prototypes and Data Manipulation

• Array Iterator Prototype Methods

Testing

• Testing: TDD with Mocha and Chai
• Testing: Linting & Hooks
• Testing: Spies

CSS

• Introduction to Sass

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

• Tools you will need this mod

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

• React Router 4
• React Router Testing

Redux

• Redux I: the Why and the What
• Testing Redux
• IdeaBox To Redux
• Redux-Thunk Middleware

Advanced React

• Intro to Hooks
• Redux-Saga Middleware
• Data Visualization with React

ES6 Fundamentals

• Promises
• Promises Review & Practice
• Higher Order Functions & Currying
• ES6 Generators
• ES6 Spread & Rest Operators
• ES6 Destructuring (Exercises)

Application Architecture

• MVC Architecture
• MVC Architecture Slides
• Rest Architecture and Urls

Accessibility

• Accessibility Deep Dive

Workshops

• Grocery List
• Thought Box
• React to Redux Workshop
• Network Request Exercises

Other Stuff

• Post CSS
• Pull Request Review
• User Testing Adventure

Module 4 Lessons

Server-Side JavaScript and APIs

• Kickoff
• Introduction to Node.js
• Getting Started with Express
• Server-Side Testing With a DB
• Deploying a Node app to Heroku
• Express Middleware
• Web Scraping Workshop

Data Persistance

• Data Storage & Modeling
• Intro to SQL
• Express with Knex and Postgres

Security & Authentication

• Intro to OAuth

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

• Intro to PWAs
• Intro to Service Workers | Slides
• React Native (with Expo!) Intro

Interview Prep

• "Wheel of Jeopardy" Interview Questions
• Repository Refactor
• Mock Interview Pairing
• Interviewee Questions
• Recursion
• Sorting Algorithms
• Linked List
• Binary Search Trees
• Big-O

Topics to Push Yourself

• Differentiation: Push Yourself
• Persisting Data with IndexedDB | Slides
• Background Sync | Slides
• Get Low-Level: Understanding Specs and Standards Bodies
• Performance
• Localization
• New Technologies
• Building Real-Time Applications with WebSockets
• Intro to Client Side Security
• HTTP vs HTTPS
• Intro to JWTS