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 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 with semantic HTML, and clean, readable code.

Instructors

Resources

• Overview & Expectations
• Evaluation & Skills Progression
• Portfolio Presentations
• Program and Module Overview (slides)
• Mod 1 Repeater Hub
• Javascript Foundations Exercises (Mythical Creatures)
• Extra Practice Hub

JavaScript

• JS: Data Types & Variables
• JS: Statements, Expressions, and Operators
• JS: Truthy & Falsy Expressions
• JS: Intro to Functions
• JS: Arrays
• JS: For Loops
• Arrays & Loops - Practice
• JS: Array Prototype Methods
• JS: Object Literals
• Object Literals - Practice
• JS: Dot and Bracket Notation
• JS: Intro to Unit Testing
• JS: Unit Testing Classes
• JS: Classes
• JS: Intro to the DOM
• JS: Intro to Event Listeners
• JS: User Events Playground
• JS: The DOM Part II
• The DOM Tree: Intro to Data Structures
• JS: Connecting the Data Model to the DOM
• JavaScript Playground
• JSON and localStorage
• JS: Event Bubbling and Delegation
• Javascript Workshop
• Javascript Workshop Advanced
• Partner Problem Solving Challenge

HTML and CSS

• HTML: Fundamentals
• HTML: Planning a Layout
• HTML Review Workshop: Structure, Semantics
• CSS: Fundamentals
• CSS: Layout
• CSS: Box Model
• CSS: Responsive Layouts
• CSS Layout Challenges
• Reset vs Normalize CSS Files
• CSS: Flexbox
• CSS: Grid Slides, CSS: Grid Tutorial
• CSS Transitions, Transformations, and Animations
• HTML Accessibility Breakout Session
• HTML and CSS Workshop

Developer Skills

• Intro to the Terminal
• Dev Skills: Pseudocoding
• Setup GitHub Repo - Tutorial
• Git Review
• Intro to Git and GitHub
• Git Commands
• Git Collaboration
• Git Merge Conflicts
• Git Workflow Steps
• Debugging
• Dev Skills: Refactoring

Professional Development

• Giving & Receiving Feedback

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)

Instructors

General Web, Tooling & Workflow

• NPM & Tooling
• 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
• Workflow: PRs and GH Communication
• Whiteboarding and Pseudocoding
• Network Requests: GETs and POSTs
• Network Request Exercises
• Error Handling
• How The Web Works
• Intro to the Backend
• Cross-Browser Compatibility

Design & UI/UX

• Introduction to UI/UX; Empathy in Design
• Introduction to Personas
• Intro to Accessibility
• WAI - ARIA

JavaScript

General

• Data Types in JS
• Object Literals: Accessing, Creating & Modifying Values
• ES5 vs ES6
• Context and "this" keyword
• jQuery Intro - DOM Traversal, Manipulation, and Events
• Asynchronous JavaScript
• Intro to Destructuring

Objects

• OOP I: Making Objects w/Constructor Functions and Classes
• OOP II: Objects & Prototype Chain
• Objects: Inheritance
• Objects: Review Session

Scope

• Scope I: Execution Contexts
• Scope II: Scopes & Scope Chain
• Scope III: Closures

Prototypes and Data Manipulation

• Array Prototype Methods: Iterators
• Array Prototype Methods: Mutator & Accessor

Testing

• Testing: TDD, 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.

Instructors

Curriculum

• Welcome to Mod 3 (slides)
• Re-Norming
• Mod 3 Submission Guide

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
• Intro to Cypress
• Go Fetch!

React Router

• React Router 5

Advanced React

• Intro to Hooks
• Advanced Hooks
• Data Visualization with React

Back End with Express

• Intro to Express

ES6 Fundamentals

• Promises
• Promises Review & Practice
• JavaScript Advanced Syntax
• Higher Order Functions & Currying

Application Architecture

• MVC Architecture
• MVC Architecture Slides
• REST Architecture and URLs
• Agile: User Stories

Back End with Express

• Express

Accessibility

• Accessibility Deep Dive

Workshops

• Grocery List
• Thought Box
• React to Redux Workshop
• Nested Promises Workshop

Other Stuff

• Module 2 Review
• Response Playground
• Async and Await
• Post CSS
• Pull Request Review
• User Testing Adventure
• ES6 Generators
• Advanced Git Workflow
• Merge vs Rebase Workflow

Module 4 Lessons

| Intro to Mod 4 (slides)

| Portfolio Requirements

| Interview Submission Form

Combined BE/FE Module

Please visit our new Module 4 combined FE/BE curriculum site.