Curriculum

  • 1

    1) CSS: Complex CSS & Flexbox

    • Week 1 Intro

    • REVIEW: Re-do CSS Diner (again) & Flexbox Froggy

    • Lecture: Fizzbuzz, VS Code Shortcuts, & Pseudo-Selectors

    • Example Code for FizzBuzz

    • Project: Update Your Personal Website (Finish by next class)

    • Download: Example personal site
  • 2

    2) CSS: Layouts with Flexbox

    • Lecture: Layouts

    • Download: Landing Page Skeleton

    • Project: Create a responsive product landing page (Finish by Tuesday week 3)

    • CSS Specificity Article

    • Flexbox Tower Defense

    • VIDEO: Navigating the Command Line

    • Github Tutorial

    • GitHub Crash Course

    • Signup for Netlify

  • 3

    3) Git and Netlify

    • Week 2 Intro

    • Lecture: Source Control & Deployment

    • Activity: Deploy Github site via Netlify

    • HTML/CSS Quiz

    • Learn: JavaScript & Basic Data Types
  • 4

    4) JavaScript: Variables & Types

    • Lecture: Variables, Data Types, and Boolean Expressions

    • CSS Selector/Specificity Quiz

    • VIDEO: Intro to JavaScript Functions

    • VIDEO: WTA Exercises

    • Learn: JavaScript Conditionals

    • VIDEO: Debugging WTA Exercises
  • 5

    5) JavaScript: Conditionals

    • Lecture: Conditionals

    • Lecture: Functions & WTA Exercises

    • WTA Exercises 0-8

    • Learn: JavaScript Loops
  • 6

    6) JavaScript: Loops

    • Lecture: Loops

    • Download: Lecture Loop Examples

    • WTA Exercises 9-11

    • Conditionals Quiz

    • Terminal Navigation Quiz

    • Learn: JavaScript Arrays
  • 7

    7) JavaScript: Arrays

    • Lecture: Arrays

    • Download: Arrays examples

    • WTA Exercises 12-16

    • DOM, Part 1

    • DOM, Part 2

    • Learn: DOM Manipulation
  • 8

    8) JavaScript: DOM Manipulation

    • Lecture: DOM Manip with Pokemon

    • Pokemon Sample Code

    • Project: Fizzbuzz (Finish by next class)

    • Learn: DOM Events
  • 9

    9) JavaScript: DOM Events

    • Lecture: DOM Events

    • Project: Color Changer (Finish before topic 11)

    • Learn: Random Numbers
  • 10

    10) JavaScript: Randomization

    • Lecture: Random #'s

    • WTA Exercises #17-18 (In-Class)

    • WTA Exercises #19-20 (In-Class)

    • VIDEO: String Methods

    • VIDEO: scope

    • Sam's Cardinal Sins
  • 11

    11) Project: Baby Name Generator

    • Lecture: Random Pokemon

    • Example Pokemon Code

    • Project: Baby Name Generator (Finish by topic 12)
  • 12

    12) JavaScript: String Manipulation

    • Lecture: Manipulating Strings

    • WTA Exercises #21-28 (Due by topic 15)

    • Lecture: Introduce Mad Lib Project

    • Project: Mad Lib Generator (Finish by topic 14)

    • VIDEO: Input Validation
  • 13

    13) JavaScript: Input Validation

    • Lecture: Complex Input Validation

    • WTA Exercises #29-31 (Due by topic 15)

    • WTA Exercise #32-33 (Due by topic 16)

    • Lecture: MadLibs & WTA Exercises Help
  • 14

    14) JavaScript: Small Functions

    • Lecture: WTA Exercises Help
  • 15

    15) JavaScript: Small Functions (2)

    • Lecture: WTA Exercises Help
  • 16

    16) JavaScript: Approaching Complex Projects

    • Lecture: Intro to Calculator

    • Project: Calculator (Due by topic 20)

    • Calculator Project Notes
  • 17

    17) JavaScript: Calculator Help

    • Lecture: Calculator Help
  • 18

    18) JavaScript: Application State

    • Lecture: Calculator state
  • 19

    19) JavaScript: Edge Cases

    • Lecture: Pos/Neg Button
  • 20

    20) JavaScript: ES 2015

    • Lecture: ES 2015

    • Lecture Recording
  • 21

    21) JavaScript: ES 2015 Classes

    • Lecture: ES2015 Classes

    • Lecture: 2D Arrays

    • Lecture Recording

    • Read: ES 2015 Classes

    • Read: forEach

    • Read: Array Higher-Order Methods

    • WTA Exercises #37-40 (Due by topic 22)

    • WTA Exercise #48 (Due by topic 22)
  • 22

    22) JavaScript: Higher-Order Array Methods

    • Lecture: Higher-Order Array Methods

    • Lecture Recording

    • WTA Exercises #45-47 Tuesday of Week 13
  • 23

    23) JavaScript: npm, parcel, .gitignore

    • Lecture: Parcel & Trash Panda-monium Project Intro

    • Lecture Recording

    • Trash Panda-monium Project, Part 1 (Due by next class)
  • 24

    24) JavaScript: ES 2015 Import/Export

    • Lecture: ES2015 Import/Export, Project Org, Project Help

    • Lecture Recording

    • Trash Panda-monium Project, Part 2 (Due by next class)
  • 25

    25) JavaScript: Syntax Review

    • Lecture: Project Help, Multi-State, Object Relationships

    • Lecture Recording

    • Trash Panda-monium Project, Part 3 (Due by next class)
  • 26

    26) JavaScript: Moving Pieces

    • Lecture: Raccoon Project Help

    • Lecture Recording

    • Trash Panda-monium Project, Part 4 (Due by next class)
  • 27

    27) JavaScript: Random Movement

    • Lecture: Adversary's Random Movement

    • Lecture Recording

    • Trash Panda-monium Project, Part 5 (Due by next class)

    • Learn: HTTP & REST

    • Install: Postman

    • Learn: Axios

    • Learn: Promises

    • Learn: async/await
  • 28

    28) JavaScript: HTTP, APIs, Axios, Promises, async/await

    • Lecture: HTTP, APIs, Axios, Promises, async/await

    • Lecture Recording

    • Project: Pokedex (Due in two classes)

    • Learn: React Components
  • 29

    29) React: React Components

    • Lecture: Intro to React

    • Lecture: React State and Lifecycle Methods

    • Lecture Code

    • Lecture Recording

    • Project: Stateful Tiles

    • Learn: React Forms & API Requests
  • 30

    30) React: Forms & API Requests

    • Lecture: React Forms & API Requests

    • Lecture Recording

    • Learn: React Router

    • Project: React-ified Pokedex
  • 31

    31) React: Routing

    • Lecture: React Router

    • Lecture Recording

    • Learn: Authentication/Authorization & Forms

    • Project: JSONPlaceholder Client (w/routes!)
  • 32

    32) React: Authentication

    • Lecture: LocalStorage, JWTs, Authentication

    • The Purrfect Gentleman Endpoints

    • Lecture: Signup in React

    • Lecture Recording

    • The Purrfect Gentleman Starter Code

    • Project: The Purrfect Gentleman, Part 1 (Due Next Class)
  • 33

    33) React: Implementing Authentication

    • Lecture: Implementing Authentication

    • Lecture Recording

    • Download: Lecture Code

    • Project: The Purrfect Gentleman, Part 2 (Due Next Class)

    • Learn: Redux
  • 34

    34) React: Redux

    • Lecture: Redux

    • Lecture Recording (Part 1)

    • Lecture Recording (Part 2)

    • Lecture Code

    • Project: Redux Version of JSONPlaceholder API
  • 35

    35) React: Redux Forms

    • Lecture: Redux Forms

    • Lecture Recording

    • Lecture Code

    • REDUX DEV TOOLS - YOU WANT THIS!!!

    • Project: The Purrfect Gentleman Redux (Due Next Class)

    • Learn: Hooks
  • 36

    36) React: Hooks

    • Lecture: Hooks

    • Lecture Recording

    • Project: Hookify The Purrfect Gentleman
  • 37

    37) React: Putting it all together

    • Lecture: Putting it all together

    • Lecture Recording

    • Learn: Firebase REST API
  • 38

    38) Firebase: Creating a simple backend

    • Lecture: connected-react-router

    • Lecture: Firebase

    • Lecture Code

    • Learn: Whiteboard Interviews

    • Lecture Recording

    • Project: FullStack The Purrfect Gentleman
  • 39

    39) Interview Prep

    • Lecture: What next?

    • Lecture: Whiteboard Interviews

    • Lecture Recording
  • 40

    40) Next Steps

    • What Now?

    • Looking for your first job in the age of Covid-19

    • 1) Personal Portfolio

    • 2) Keep Learning

    • 3) Network, Network, Network!!!

    • 1:1 Meeting