(re)Introduce ourselves: what is your name and what is something you've found yourself looking forward to each day during the quarantine?
Let's go around the room and take turns responding to these prompts in our own words. If you're not sure, just do your best!
How the internet works
- Why is HTTP a thing?
- What is an API and why do APIs like the deck of cards thing exist?
- Write about two kinds of HTTP requests you make in your daily life.
- Why do some URLs have ?s and &s in them?
How webpages work
- What’s a good metaphor for HTML, CSS, and JavaScript?
- What would you use Chrome Dev Tools for?
- What is the JavaScript console?
I'll work through each of these on my screen. Feel free to ask questions if you have any.
- Use the Mapbox Static Images API to request a static map similar to the one we requested from Google Maps during class. Hint #1: you’ll need to sign up for a Mapbox Account and get an access token from your account page. Hint #2: getting a bit lost with all of the query parameters and options? Try using Postman to keep yourself organized.
- Work through the Mapbox add custom markers in Mapbox GL JS tutorial on your own. Don’t worry if you get stuck! Do your best to work through each step and keep notes about what you tried and where you got stuck.
- Let's use VS Code's Live Share plugin here. If you haven't set it up, take a few minutes now. This should make it a bit easier to see the code as it's being written.
We'll start on Slide 19 of this presentation: https://docs.google.com/presentation/d/1sc1l22FkovglOs3w6xFHdsC420OrK1BNU0IGGkqkLfk/edit#slide=id.g6595fc3a76_0_93.
We'll start on Slide 17 of this presentation: https://docs.google.com/presentation/d/1aSRDsZUGfRgcnSu4MbQ2ypdBeTHIJU6kjGhiUUpTzuA/edit#slide=id.g7cbf41296b_0_0
Nice work! The information we covered today and the maps we built will serve as the foundation for the next two classes.
Next week: we'll build on our basic Mapbox GL JS map by adding interactivity. Two weeks from now: we'll build on our map even more by integrating it with an external API.