• Skip to primary navigation
  • Skip to main content

Code the Dream

Real Talent. Real Experience. Real Impact.

  • About
    • Who We Are & What We Do
    • Job Openings
    • CTD Voices
    • Code The Dream’s Impact
    • In The Media
    • Board
    • Contact Us
  • Get Involved
    • Volunteer
    • Senior Dev Fellowship
    • E-Newsletter
    • Thank You CTD Volunteers
  • Services
    • Portfolio
    • Need an App?
  • Class Info
    • Class Info
    • Apply Now
  • Blog
  • Donate
  • Show Search
Hide Search

Advanced Pre-Work Assignment

General Instructions > Part 1 > Part 2 > Submission

Part 1: Plan and Research

The first part of any project is to plan and research. What to build? How do you want to build it? What does the project need in order to be built? Consider these and many other questions before even the first line of code is written. Use the suggestions below to plan out your project so the build and test process will be a smoother one.

This part has two tasks:

  1. Plan your project
  2. Research to prepare to begin

Plan: Task 1 of 2

Your pre-work assignment is to build a site using one of the following public APIs. Pick a topic that is of most interest to you:

  • Open-Meteo – a weather API
  • Spotify – a music API (requires a free Spotify account and use of an access token)
  • Swapi.Tech – an API about Star Wars films
  • Marvel – an API about the Marvel fandom
  • ARTIC – an art API from the Art Institute of Chicago
  • TheDogAPI or the TheCatAPI – APIs about (you guessed it!) Dogs or Cats
  • SampleAPIs – an API for coffee lovers

The finished project you build as your pre-work assignment should contain the minimum of all the following:

  • STRUCTURE:
    • A public GitHub repository containing your project
    • An HTML document for the page
    • A CSS document to style the HTML page
    • A JavaScript file that retrieves data from one of several public API sources to display the data on your HTML page
    • A README file that includes the instructions for running the webpage
  • CONTENT:
    • Display the data for at least 2 of the models in the API
      • Examples: If you choose the use the Weather API, use temperature and condition (rainy/sunny/etc) models. For the Star Wars API, use characters and film title models.
    • Include navigation from each model’s page to the other models that are displayed
      • Example: If you choose to use the Weather API, be able to click between a page that shows temperatures and a page that shows conditions. For the Star Wars API, have a page that shows character information and a page that shows film information.
    • Issue new GET requests for the linked data to display in the linked pages.
  • FUNCTIONALITY:
    • Be sure that we can get the code to run without issues by following the instructions in the README file
    • Be sure navigation between the different models behaves properly and is not slowed down by requesting more data than needs to be displayed
    • Be sure your code is readable and well structured
    • If including a user-interactive feature like a search field, be sure that you appropriately handle error cases
    • Be thoughtful about what type of styling is used (example: font-sizes are not too small or large, colors are not too dark/light to be easily seen, etc.)

Now that you know the requirements, start planning your site!

If you feel this project is more advanced that your skill level, and you need or want to complete and apply for the Intro to Programming class instead, please email classes@codethedream.org to make us aware of the change and click this link to be redirected to the Intro to Programming Pre-Work Assignment Instructions.


Research: Task 2 of 2

If it’s been a while since you’ve worked with API data, and/or you need any refreshers, here are some additional resources that may help get you going:

GitHub Resources

  • https://docs.github.com/en/github/getting-started-with-github
  • https://product.hubspot.com/blog/git-and-github-tutorial-for-beginners
  • https://lab.github.com/githubtraining/introduction-to-github 

Feel free to go through these to help learn the system. We do require your pre-work submission to be in GitHub.

JS and API Fetch Resources

If you could use a little help with the API fetch portion. Feel free to utilize these resources as you work on your pre-work:

  • https://www.javascripttutorial.net/javascript-fetch-api/
  • https://www.geeksforgeeks.org/how-to-use-the-javascript-fetch-api-to-get-data/
  • https://www.freecodecamp.org/news/how-to-make-api-calls-with-fetch/
  • https://javascript.info/

API Documentation

Don’t forget to research the API documentation for your project so you understand how to use the API. Helpful things to ask yourself are: Do you need to sign up for a free account? Are you limited to how many API calls you can place in a day? What does the data look like that is returned from the call? Here are the links to the API options again:

  • Open-Meteo – a weather API
  • Spotify – a music API (requires a free Spotify account and use of an access token)
  • Swapi.Tech – an API about Star Wars films
  • Marvel – an API about the Marvel fandom
  • ARTIC – an art API from the Art Institute of Chicago
  • TheDogAPI or the TheCatAPI – APIs about (you guessed it!) Dogs or Cats
  • SampleAPIs – an API for coffee lovers

CLICK HERE TO PROCEED TO PART 2: BUILD AND TEST

Big thanks to @SASsoftware for inviting CTD apprentices to tour the campus and meet the team! pic.twitter.com/pPIORpgnZs

About 5 months ago

Vamos helps farmworker organizations plan, implement, and track outreach to workers in those hard-to-find locations. Find more info at codethedream.org/vamos

About 6 months ago

Apprentices and staff also visited #Texas to present at the Midwest Stream Forum! pic.twitter.com/pZZt6XfR3P

About 6 months ago

CTD is sharing Vamos, our outstanding farmworker outreach app, with the world! Our team presented at the NC Farmworker Institute in #Durham. pic.twitter.com/gFUrD3XED7

About 6 months ago

Thanks to the @TheOfficialACM, the Mays Center, and the Dreamer Resource Center at @TAMUSanAntonio for inviting CTD Apprentice Asaia Palacios to inspire #Dreamers and other students to pursue careers in #tech! Big shout out to CTD intern Janet Zulu for making the connection! pic.twitter.com/eWkvniWQwJ

About 6 months ago

Follow @CodeTheDream

Copyright © 2023 Code the Dream · All Rights Reserved · Website by Code the Dream & Tomatillo Design