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
- Scott Ertmer
- Travis Rollins
Resources
- Portfolio Presentations
- Program and Module Overview (slides)
- Mod 1 Repeater Hub
- Javascript Foundations Exercises (Mythical Creatures)
- Extra Practice Hub
- Daily Problem Solving Practice
- Professional Development
- Slack 101
JavaScript
- JS: Data Types & Variables
- JS: Truthy & Falsy Expressions
- JS: Intro to Functions
- JS: Pure Functions
- JS: Arrays
- JS: For Loops
- JS: Array Prototype Methods
- JS: Objects
- JS: Dot and Bracket Notation
- JS: Intro to Unit Testing
- 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 Layout Challenges
- Reset vs Normalize CSS Files
- CSS: Flexbox
- CSS: Grid Slides, CSS: Grid Tutorial
- CSS Transitions, Transformations, and Animations
- HTML and CSS Workshop
- Refactoring HTML and CSS
Developer Skills
- Intro to the Terminal
- Dev Skills: Problem Solving & 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
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.
Instructors
Resources
General Web, Tooling & Workflow
- NPM & Tooling
- Build Processes with Webpack
- ESLint Basics
- git Workflow: taming merge conflicts
- Refactoring Guidelines
- Workflow: remote & local repos, Forking vs. Cloning
- Workflow: PRs and GH Communication
- Whiteboarding and Pseudocoding
- Network Requests: GETs
- Network Requests: POSTs
- Network Request Exercises
- Error Handling
- How The Web Works
- Intro to the Backend
- Cross-Browser Compatibility
Design & UI/UX
JavaScript
General
- Data Types in JS
- Object Literals: Accessing, Creating & Modifying Values
- ES5 vs ES6
- Closures
- Context and "this" keyword
- Asynchronous JavaScript
- Intro to Destructuring
Objects
- OOP I: Making Objects w/Constructor Functions and Classes
- Objects & 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 Cypress. 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
Tooling & Workflow
React
- React: The What and the Why
- React: Our First IdeaBox
- React: Advanced Data Management
- React: PropTypes
- Intro to Cypress
- Go Fetch!
React Router
Advanced React
Back End with Express
ES6 Fundamentals
- Promises
- Promises Review & Practice
- JavaScript Advanced Syntax
- Higher Order Functions & Currying
- ES6 Generators
