CS and the City

Course Overview

Implementation Guide

Course Contents

These anchor links jump further down this page

• Unit 1: HTML + CSS Review
• Unit 2: React.js
• Unit 3: Data Science Mindsets
• Unit 4: Project Mode

Resources to build Prerequisite Skills

• Lab: Command Line Hidden Treasure (Command Line)
• Lab: Clean the Refrigerator (Command Line Advanced)

Unit 1

HTML and CSS Review

---

Unit 1-1: Elements and Nesting

• Lesson: Elements and Nesting
• Lab: HTML Biography (Core Elements)
• Lab: Fixer Upper (Code formatting)

Unit 1-2: Design Principles

• Lesson: Design Principles
• Lab: New York Newspaper (Write rulesets to match a mockup)
• Lab: Shorthand Converter (Convert shorthand to HTML)
• Lab: Serious Selectors (Specificity & niche CSS selectors)

Unit 1-3 Boostrap (extension unit)

• Lab: Boostrap Card Columns Inspiration Wall (Interact with Bootstrap Documentation)

Unit 1-4 CSS Grid (extension unit)

• Lesson: CSS Grid
• Lab: Grid Games (Match styled)
• Lab: Fakebook (Match unstyled HTML to a Grid mockup)
• Lab: Mockup Magic (Nested Grids)

Unit 1-5 CSS Flexbox (extension unit)

• Lesson: CSS Flexbox
• Lab: Flexsites (Flexbox)

Unit 2

React.js

---

Unit 2-1 React Setup

• Lesson: Hello World
  • Worksheet #1 (HTML)
  • Worksheet #2 (React)
  • Additional: Blank Project Template

Unit 2-2 Functional Components

• Lesson: Functional Components
  • Accompanying App: Furbook Main Page
• Lab: Dollar Pizza (Build components on an existing template)
• Lab: Furbook Profile Page (Convert HTML site to React site)

Unit 2-3 Iteration

• Lesson: JavaScript Iteration
• Lab: Survey Says

Unit 2-4 Props + JSX

• Lesson: Props + JSX
  • Accompanying App: Street Eats
• Lab: NY State Education Data: Props (Refactor a hardcoded component to be responsive)
• Lab: New York Education Data Transparency (Use props passed to component to populate page to match a mockup)
• Lab: Street Difficult

Unit 2-5 Parent & Child Components

• Lesson: Parent & Child Components (Breaking a page down into components, deciding what will be inside of what)
  • Example App / Lab: Yearbook
  • Accompanying App: Music Library
• Lab: Build-a-Blog (Componentize HTML into components which are nested)
• Lab: Atlas of Remote Islands (Pass props down through nested components)

Unit 2-6 Style Props & Inline Styling

• Lesson: Style Props & Inline Styling (Time of day / open / closed conditional styling)
  • Accompanying App: SportScores
• Lab: Crazy Clocks

Unit 2-7 State

• Lesson: State (State, inline events)
  • Accompanying App: The Three-Button App
• Lab: Input Tiles Fidget App (State in components, inline events)
• Lab: CodeBreakers (Other inline events)
• Lesson: State (Lifecycle methods, passing state among elements)
  • Accompanying App: School Supplies
• Lab: Create a Grocery App
• Lab: Scorekeeper

Unit 3

Data Science Mindsets

---

Unit 3-1 Data in Argument & Decision-Making

• Lesson: Data in Argument & Decision-Making
• Lab: Spin: Library Data Lab

Unit 3-2 Bias

• Lesson: Bias
• Discussion Lab: Unintentional Bias
• Discussion Lab: Critiquing Bias

Unit 3-3 Data Collection

• Lesson: Data Collection
• Lab: Finding Data
• Lab: Collecting Our Own Data (2 Days)

Unit 3-4 Statistical Measurements

• Lesson: Statistical Measurements
• Lab: Galton Height Dataset

Unit 3-5 Segmenting & Pivot Tables

• Lesson: Data Analysis
• Lab: Titanic Data
• Lab: Manhattan Street Trees

Unit 3-6 Data Visualization (Mapping)

• Lesson: Data Visualization
• Lab: Exploratory Visualization
• Lab: Google Maps

Unit 4

Project Mode

---

• Project facilitation guide
• Student Exemplar Project 1: NYC Water
  • Deployed
  • Code
• Student Exemplar Project 2: Nutrition Tracker
  • Deployed
  • Code

Unit 4-A Victory

• Lesson: Visualizing Data with Victory
• Video: Data Vizualization with Victory Walkthrough
• Lab: Demographics Dashboard

Unit 4-B JSON & Firebase

• Lesson: Storing Data with JSON & Firebase
  • Setup: Getting Started with Firestore
• Video: JSON & Firebase Walkthrough
• Lab: User Interaction Components

Unit 4-C APIs

• Lesson: APIs in React
• Lesson: NYC Open Data
• Video: APIs Walkthrough
• Lab: Squirrel Data Explorer