/1907-GHP-NY-WEB-FT

Your one stop shop for all materials relating to your Grace Hopper Program experience

Primary LanguageJavaScript

📚 1907-GHP-NY-WEB-FT

This will be your main place for Fullstack related materials!

🛠️ Helpful Resources/Links

Click to Expand

🥚 Foundations

Click to Expand

Fullstack Test First Solution Videos

Foundations Checkpoint

🐣 Junior Phase

Week 1

Collaboration & Git, HTML & CSS, DOM & Events

Click to open

Day 1: Collaboration

Topic Lecture Slides Solution Review
Pair Programming 📺 🖼️ - -
Git: Getting Comfortable 📺1 📺2 📺3 🖼️ - 📺
  • You should be able to:
    • Manage a project using git
    • Practice effective pair programming

Day 2: HTML & CSS, Debugging

Topic Lecture Slides Solution Review
HTML & CSS 📺 🖼️ - -
Intro To Boxing 📺 🖼️ - -
Practical Debugging: Prevention 📺 🖼️ - -
Practical Debugging: Detection, Diagnosis, & Treatment 📺 🖼️ - -
  • You should be able to:
    • Create a basic HTML document using common elements (div, p, h1, ul, button, etc)
    • Add some basic styling to an HTML document
    • Navigate the browser developer tools (console, elements, network)

Day 3: DOM and Events

Topic Lecture Slides Solution Review
Flexbox 📺 🖼️ 👾 📺
Intro to the DOM 📺 🖼️ 👾 -
Event Listeners & Handlers 📺 🖼️ - -
  • Demo code from lecture
  • Homework:
    • Check out the solution code / review videos from today!
  • You should be able to:
    • Style a page using Flexbox
    • Define the DOM
    • Set up event listeners to handle DOM events
    • Manipulate the DOM using the DOM API
    • Explain how a browser uses HTML, CSS, and JavaScript to display a web page

Day 4: Pixelate, Trackr

  • Pre-Work:
    • None! :)
Topic Lecture Slides Solution Review
Pixelate - - 👾 -
Fitness Tracker 1 - - 👾 -
  • You should be able to:
    • (see day 3 above)

Day 5: Conway's Game of Life

Topic Lecture Slides Solution Review
Game of Life 📺 🖼️ 👾 📺
Weekly Review - - - -
  • You should be able to:
    • (see day 3 above)

Week 2

Node, Express, Sequelize

Click to Open

Day 1: Intro to Node & Express

Topic Lecture Slides Solution Review
Intro to Node 📺 🖼️ slides -
Node Shell (Async Code) 📺 🖼️ 👾 -
HTTP and Express 101 📺 🖼️ - -
Express 201 📺 🖼️ slides - -
Wizard News 1 - - 👾 -
  • Homework:
  • You should be able to:
    • Explain the purpose of Node
    • Explain asynchronicity in JavaScript and how one might handle asynchronous code
    • Describe the role of a client, a server, and HTTP
    • Describe Express middleware, requests, and responses
    • Handle URL params in an Express route
    • Know when and why you would use app.use and next in your Express app
    • Use module.exports and require to create modular applications

Day 2: Databases & SQL

Topic Lecture Slides Solution Review
Intro to Databases & PostgreSQL 📺 🖼️ — —
Intro to SQL 📺 🖼️ - 👾
Schema Design 📺 🖼️ - -
  • Extra Resources:
  • You should be able to:
    • Explain what a database is, and why you would use one
    • Write SQL queries using some common keywords (SELECT, FROM, WHERE, ORDER BY, JOIN, etc)
    • Articulate what a primary key is
    • Articulate what a foreign key is, and why you would use one
    • Explain the difference between a 1-to-1, 1-to-many, and many-to-many relationship

Day 3: Postgres & Express Routing

Topic Lecture Slides Solution Review
async/await 📺 demo 🖼️ 👾 -
Node-Postgres 📺 🖼️ 👾 📺
RESTful Routing 📺 demo 🖼️ 👾 📺
  • Homework:
    • Check out the solution code and review video for Wizard News
    • Get started on the Express Checkpoint if you haven't already
  • You should be able to:
    • Handle asynchronous code and Promises with async/await
    • Describe the role of pg in our stack
    • Define REST and its advantages
    • Create and mount Express Routers
    • Explain the role of body parsing middleware

Day 4: ORM & WikiStack 1

Topic Lecture Slides Solution Review
Intro to ORMs 📺 🖼️
Wikistack - - 👾 📺
  • Homework:
    • Check out the solution for Wikistack
  • Additional Resources:
  • You should be able to:
    • Define an ORM, and explain its pros/cons
    • Define Models in Sequelize
    • Associate models
    • Hook into Sequelize lifecycle events
    • Query on models (findAll, findOne, create, "magic methods", etc)

Day 5: WikiStack 2

Topic Lecture Slides Solution Review
Express & Sequelize Rounding Out - 🖼️ - -
Wikistack 2 - - - -
  • Homework:
    • Work on checkpoints!
  • You should be able to:
    • Write custom error handlers in Express
    • Utilize eager loading in Sequelize queries
    • Write class and instance methods on Sequelize models

Week 3

Single-Page Applications, React, Testing

Weekly Review

Click to Open

Day 1: Front-end Modules & Trip Planner

Topic Lecture Slides Solution Review
Client Server Architecture - 🖼️ - -
Front End Modules (Webpack) - - - -
Spa & Ajax - 🖼️ - -
ES modules - 🖼️ - -
  • You should be able to:
    • Define the roles of the client and server
    • Install Webpack and set-up a project
    • Create a SPA using AJAX to fetch data and JavaScript to manipulate the DOM without a page refresh
    • Use ES6 module syntax to import and export modules in frontend JavaScript

Day 2: React

Topic Lecture Slides Solution Review
Intro to React - 🖼️ - -
State & Props - 🖼️ - -
Component Lifecycle - 🖼️ - -
Contact List - - - -
  • Homework:
  • You should be able to:
    • Write a class or functional component in React
    • Pass, receive, and render props in a React component
    • Hook into React lifecycle events (ie, componentDidMount)
    • Define and update state in a component
    • Handle state changes in response to AJAX, user events, etc
    • Render lists of data in JSX

Day 3: Juke

  • Pre-Work:
    • None :)
Topic Lecture Slides Solution Review
Intro to Juke - 🖼️ - -
  • Homework:
    • Review the solution to Juke if you want extra clarity!
    • Prep for Pillars :)
      • Review the daily takeaways for Express/Sequelize/React topics
      • Cody's Cafe - great test-based practice for Sequelize
      • Express and Sequelize Checkpoints
      • Old workshops (Wikistack and Juke are great!)
  • You should be able to:
    • Describe how data flows between the client and server in a fullstack application
    • Organize a reasonable file structure for a fullstack application

Day 4: Testing & Solo Project

Topic Lecture Slides Solution Review
Testing Intro - 🖼️ - -
Testing Async - 🖼️ - -
  • You should be able to:
    • Describe why we use testing, how to write a test spec, and what to write test specs for
    • Describe what Test-Driven Development is
    • Write test specs using the TDD paradigm using mocha/chai testing frameworks
    • Know how to handle async code in tests using the done callback or returning a promise

Day 5: Pillars

Resources: