Lesson Plan

[rdpacheco]

SMART Goal

By September 21, 2018, design and implement an HTML/CSS/JS “Todo” app* that performs CRUD** operations on a data server; basing project and code structure on current trends. A “Todo” app uses a lot of fundamental design and code patterns that will form a foundation for future, more advanced, JS work. Testing will be a stretch goal.

*Similar in function to http://todomvc.com/examples/vanillajs/ **Create Read Update Delete

[rdpacheco]

Topic 1

Concepts

• Project Setup
  • Understand the common ways to structure a project's files and directories

Lesson

Mentor goes over common project structures

• Project Structure
  • Will this project need a build or deploy step?
  • Where will tests go?
  • Are there best practices?
• High level design
  • How will it all work?
  • How can we break this project into pieces that can be independently worked on?
• Begin with a few misc files
  • Go over misc data types

Homework

Mentee sets up repo and base project with singleton data store

Notes

Leave time for misc questions that need to be addressed

[rdpacheco]

Topic 2

Concepts

• Data Types and Methods
  • Understand the basic JS data types and the methods that come with them
• Variable Scope and the Global Namespace
  • Understand the core concepts of Scopes/Closures and how to share variables between them

Lesson

Mentor goes over basic data types and concepts like closures

Notes

Go over prototypes, scopes

Post Meeting Notes

• This one may have been too packed. Should break this out into at least 2 topics
• Need to talk about semicolons and line endings

[rdpacheco]

Topic 3

Concepts

• CRUD
  • Understand core concepts of Create, Read, Update and Delete

Lesson

Mentor goes over CRUD concepts

Homework

Mentee implements CRUD operations that modify data store (browser dev console only, no UI).

Notes

Focuses on writing functions that do only 1 thing

[rdpacheco]

Topic 4

Concepts

• DOM Basics
  • Understand the basics of the Document Object Model and how to interact with it

Lesson

Mentor goes over how to get the UI to display data

Homework

Mentee implements data driven list in display

[rdpacheco]

Topic 5

Concepts

• Events
  • Understand JS Events and how to use them

Lesson

Mentor goes over DOM event/listeners concepts

Homework

Mentee connects CRUD actions on the UI using buttons and inputs

Notes

Focus on using events

[rdpacheco]

Topic 6

Concepts

• Testing
  • Understand the different types of testing and how to implement them

Lesson

Mentor goes over the common Front End testing types and how to decide what to test

[rdpacheco]

Topic 7

Concepts

• Testing
  • Understand the different types of testing and how to implement them

Lesson

Mentor helps set up unit testing framework

Homework

Mentee implements unit testing for CRUD calls