💻
[JS] The Interactive Web
CS4All Resources
  • Curriculum Overview
  • 📬Leave Us Feedback
  • Unit 1: HTML & CSS: Good vs Bad Design
    • 🔮Unit 1 Overview
    • U1LA1.1: Building with HTML
    • U1LA1.2: Structuring Pages with Divs, Classes, IDs
    • 🗃️U1LA1 Mini Project: My Fan Page Part 1
    • U1LA2.1: Styling your page with CSS
    • 🗃️U1LA2 Lab: My Fan Page Part 2
    • U1LA3.1: Layout with CSS Grid
    • 🗃️U1LA3.1 Lab: Grid Interview
    • U1LA3.2: Layout with Flexbox
    • 🗃️U1LA3.2 Lab: Flexbox Interview
    • U1LA4.1: Focus on Design in HTML && CSS
    • U1LA4.2: Breakpoint Lesson
    • 🗃️U1LA4 Lab: ChefHub Goes Mobile
    • U1LA5.1: Creating Accessible Websites
    • 🗃️U1LA5 Lab: What Do You Hear? Make it Accessible
    • U1LA6.1: Working with CSS Frameworks - Bulma
    • 🗃️U1LA6 Lab: CheeseBook Computers with Bulma
    • 🎨Unit 1 Final Project: My Travel Page
  • Unit 2: Intro to DOM Manipulation Basics
    • 🔮Unit 2 Overview
    • U2LA1: JavaScript Essentials - Variables to Arrow Functions
    • 🗃️U2LA1 Mini Project: JavaScript Essentials
    • U2LA2.1: DOM Manipulation with JavaScript Click Interactions
    • U2LA2.2: Accessible Shopping Cart
    • 🗃️U2LA2 Mini Project: The National Horse Race
    • U2LA3: Inputs and Conditionals
    • 🗃️U2LA3 Mini Project: The Interactive Site
    • U2LA4: Add, Remove, and Toggle
    • 🗃️U2LA4 Mini Project: The Cross-Wired Lightbulbs Puzzle
    • 🎨Unit 2 Final Project: Input-Output Helper Site
  • Unit 3: Advanced DOM
    • 🔮Unit 3 Overview
    • U3LA1: JavaScript Arrays, Iteration, and Objects
    • 🗃️U3LA1 Mini Project: Arrays, Iteration, and Objects Lab
    • U3LA2.1: JavaScript Essentials - Variables to Arrow Functions
    • U3LA2.2: Typeahead Search
    • U3LA2.3: Fuzzy Matching - Autocorrect
    • 🗃️U3LA2 Mini Project: Fuzzy Matching Personality Quiz
    • U3LA3.1 JavaScript Mutability
    • U3LA3.2: Advanced DOM Manipulation
    • 🗃️U3LA3 Mini Project: Card Organizer
    • U3LA4: Local Storage
    • 🎨Unit Final/U3LA4 Project: Twenty in Ten Game
  • Unit 4: Intro to APIs
    • 🔮Unit 4 Overview
    • U4LA1: Intro to APIs
    • U4LA1.2: JavaScript Arrays, Iteration, and Objects
    • 🗃️U4LA1 Mini Project: Deck of Cards: Higher Lower
    • U4LA2: Connecting to Closed APIs using the Giphy API
    • 🗃️U4LA2 Mini Project: DIY Dictionary
    • U4LA3.1: APIs vs SDKs
    • U4LA3.2: Requests on the Web - GET & POST
    • 🎨Unit 4 Final Project: API GUIs
  • Unit 5: Simple Websockets and Final Project
    • 🔮Unit 5 Overview
    • U5LA1: Servers and Express
    • 🗃️U5LA1 Mini Project: Express Lab
    • U5LA2: Intro to WebSockets
    • 🗃️U5LA2 Mini Project: Simple Sockets Lab
    • U5LA3: Socket Servers
    • 🗃️U5LA3 Mini Project: Socket Server Lab
    • U5LA4 [TBD]
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Overview
  • NYS Standards
  • Suggested Duration
  • Prerequisite Skills
  1. Unit 4: Intro to APIs

Unit 4 Overview

How can access remote data and incorporate it into a webpage?

Overview

This unit is all about APIs. Section 1 guides students from primarily accessing endpoints straight on the browser to gradually adding code until students are using async/await functions to hit the API. Section 2 is similar but focusses on closed APIs and SDKs.

To finish the unit, students will create a final project, a graphical user interface (GUI) for the API of their choosing. They'll have the flexibility to design a website from scratch that allows the user to visualize and access data from the API more easily.

If you are following the curriculum and have decided not to add a final project for Unit 3, most likely you will plan to incorporate Unit 5. Therefore, consider adding Unit 3 topics (namely local storage and methods that create DOM elements) as a requirement in your rubric for the final project here. Otherwise, if you have done a final project for Unit 3, you most likely will not have time to get to the stretch content in Unit 5. Therefore, at the end of this unit students will be completing the Course Final Project, and the duration will be on the higher end of 4-5 weeks for the final project.

Regardless, it isn't unusual or superfluous to do a unit 4 final project, skip unit 5, and do a final project (ie. 2 projects back to back) if this is what time allows. Simply use the course final project as a pivot or extension of this projects. Students can either build on top of their existing projects, pivot in a slight different direction, or start a new project with a different trajectory.

NYS Standards

NB: HTML and CSS are considered 'mark-up' languages, not programming languages. As such, many Computational Thinking skills will be better addressed in future units.

  • 9-12.DL.1 Type proficiently on a keyboard.

  • 9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.

  • 9-12.DL.5 Transfer knowledge of technology in order to use new and emerging technologies on multiple platforms.

  • 9-12.IC.1 Evaluate the impact of computing technologies on equity, access, and influence in a global society.

  • 9-12.IC.5 Describe ways that complex computer systems can be designed for inclusivity and to mitigate unintended consequences.

  • 9-12.IC.6 Create accessible computational artifacts that meet standard compliance requirements or otherwise meet the needs of users with disabilities.

Suggested Duration

Approx. 3-5 weeks for core content and 2-5 weeks for the Final Project (depending on if this is the course final project or not).

Prerequisite Skills

Students should feel comfortable creating, reading, updating, and iterating through objects. To design a strong final project, they should also feel confident writing HTML and CSS. A solid understanding in mutability is encouraged.

Local storage and methods to create DOM elements are proposed in the extensions. However, these concepts are not essential to understand APIs. They are however essential topics in Javascript programming. Consider balancing the incorporation of these topics based on the level of your students.

PreviousUnit Final/U3LA4 Project: Twenty in Ten GameNextU4LA1: Intro to APIs

Last updated 1 year ago

🔮