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
Syllabus
- Overview & Expectations
- Evaluation & Skills Progression
- Portfolio Presentations
- Program and Module Overview (slides)
JavaScript
- JS: Data Types, Variables, Conditionals
- JS: Intro to Functions
- JS: Arrays
- JS: For Loops
- Arrays & Loops - Practice
- JS: Array Prototype Methods
- JS: Object Literals
- Object Literals - Practice
- JS: Intro to Unit Testing
- 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
- Javascript: Connecting the Data Model to the DOM
- JavaScript Playground
- localStorage and JSON
- 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
- Dev Skills: Git Workflow
- 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. | 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
- 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
- Context and "this" keyword
- jQuery Intro - DOM Traversal, Manipulation, and Events
- Asynchronous JavaScript
Objects
- OOP I: Making Objects w/Constructor Functions and Classes
- OOP II: 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 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
Tooling & Workflow
React
- React I:The What and the Why
- React II: The How
- React III: Advanced Data Management
- Unit and Integration Testing Components
- Testing Asynchronous React
- Go Fetch!
React Router
Advanced React
ES6 Fundamentals
Application Architecture
Back End with Express
Accessibility
Workshops
Other Stuff
Module 4 Lessons
Combined BE/FE Module
Please visit our new Module 4 combined FE/BE curriculum site.
