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.
Syllabus
- Overview & Expectations
- Evaluation & Skills Progression
- Portfolio Presentations
- Program and Module Overview (slides)
JavaScript
- Intro to JS
- Functions
- Arrays
forLoops- Arrays & Loops - Practice
- Array Prototype Methods
- Objects Literals
- Object Literals - Practice
- Intro to Unit Testing JavaScript
- Classes, `this`, & Object Instances
- Intro to DOM Manipulation
- DOM Manipulation Pt. II
- the DOM tree: intro to data structures
- Javascript: Connecting the Data Model to the DOM
- JavaScript Playground
- localStorage and JSON
- Event Bubbling and Delegation
- Javascript Workshop
- Javascript Workshop Advanced
- Partner Problem Solving Challenge
HTML and CSS
- Intro to HTML
- HTML: Planning a Layout
- HTML Review Workshop: Structure, Semantics
- Intro to CSS
- CSS: Layout
- CSS: Box Model
- Intro To Responsive Layouts
- CSS Layout Challenges
- Reset vs Normalize CSS Files
- Intro to Flexbox
- Intro to Grid - Slides, Grid Tutorial
- CSS Transitions, Transformations, and Animations
- HTML Accessibility Breakout Session
- HTML and CSS Workshop
Developer Skills
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
- Intro to Accessibility
- Web Accessibility - ARIA
JavaScript
General
- Data Types: Simple vs. Complex
- Object Literals: Accessing, Creating & Modifying Values
- 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
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 and Integration Testing React Components
- Testing Asynchronous React
- Go Fetch!
React Router
Redux
Advanced React and Redux
ES6 Fundamentals
Application Architecture
Accessibility
Workshops
Other Stuff
Module 4 Lessons
Combined BE/FE Module
Please visit our new Module 4 combined FE/BE curriculum site.
