Duration of the online course: 4 hours and 36 minutes
New
Build real web apps with JavaScript data & APIs—fetch, charts, maps, Node.js and databases. Take this free course and level up your dev portfolio.
In this free course, learn about
Course setup essentials and using the terminal/CLI to run commands
Using fetch() with async/await to load data and handle responses
Fetching images: convert response to Blob/object URL before setting .src
Parsing CSV/tabular data: split rows by newline, then columns by commas
Creating charts with Chart.js only after data is loaded to avoid undefined values
Working with JSON APIs: response.json() to turn fetch responses into JS objects
Mapping geodata with Leaflet.js and adding a tile layer for visible map imagery
Auto-refreshing live data (e.g., ISS) using setInterval() without page reloads
Why use Node.js/Express: server-side logic, security, and API/database integration
Privacy/security concerns for geolocation and sensitive client-side features
Handling POST requests in Express by enabling JSON body parsing middleware
Persisting and querying data with a database; returning query results to clients
Sending webcam frames to a server via POST using Base64-encoded image data
Proxying external APIs in Node, combining multiple API responses, and hiding keys with dotenv
Course Description
Turn JavaScript into a tool for building real, data-driven web experiences. In this free online course, you’ll learn how to request, transform, and present information from files, public services, and your own server so your projects feel alive and interactive instead of static. You’ll practice the essential workflow of modern web development: loading data, handling asynchronous responses, and using that data to power visual interfaces users can understand at a glance.
You’ll start by working in the browser with the Fetch API, getting comfortable retrieving different kinds of resources and converting responses into formats JavaScript can use. From there, you’ll move beyond console logs and make data meaningful through visuals—creating graphs with Chart.js and building maps with Leaflet to place information in a real-world context. You’ll also learn how to refresh results automatically on a schedule so your pages can update without constant manual reloads, a key technique for live dashboards and trackers.
As the course progresses, you’ll step into server-side development with Node.js and Express to understand why the back end matters even for JavaScript-first apps. You’ll handle POST requests, accept JSON safely, and store information so it persists. Using a database, you’ll be able to save and query entries, then send them back to the browser to display in a useful interface, including mapping records for an engaging user experience.
Practical details are treated like first-class skills: working from the terminal, combining responses from multiple APIs, and protecting sensitive credentials using environment variables. You’ll also see what it takes to bring a project online with deployment workflows, giving you a clearer path from learning code to publishing a functioning web application. By the end, you’ll have a stronger foundation in APIs, client–server architecture, and the habits that make web projects reliable, secure, and ready to share.
Course content
Video class: Working with Data and APIs in JavaScript01m
Exercise: What is described as the main attraction of the course “Working with Data and APIs in JavaScript”?
Video class: Setup: Everything you need to begin the course Working with Data and APIs in JavaScript03m
Exercise: Which tool becomes especially important in later modules because it’s used to run commands from the terminal?
Video class: 1.1: fetch() - Working With Data15m
Exercise: When fetching an image file with the Fetch API, what step is needed before assigning it to an < img > element’s src?
Video class: 1.2 Tabular Data - Working With Data17m
Exercise: When manually parsing a CSV string in JavaScript, what delimiter is used first to split the text into rows?
Video class: 1.3: Graphing with Chart.js - Working With Data19m
Exercise: What is the main reason the chart is created only after awaiting the data-loading function?
Video class: 1.4: JSON - Working with Data and APIs in JavaScript16m
Exercise: When retrieving ISS location data from an external API in JavaScript, which step correctly converts the fetch response into a usable JavaScript object?
Video class: 1.5 Mapping Geolocation with Leaflet.js - Working with Data and APIs in JavaScript15m
Exercise: In Leaflet.js, what must you do to make the map background images appear (not just an empty grid with controls)?
Video class: 1.6 Refreshing Data with setInterval() - Working with Data and APIs in JavaScript08m
Exercise: Which JavaScript feature is used to automatically refresh the ISS latitude/longitude data at a fixed rate without reloading the page?
Video class: 2.1 Server-side with Node.js - Working with Data and APIs in JavaScript18m
Exercise: Why is Node.js introduced for the project instead of only using client-side JavaScript?
Video class: 2.2 Geolocation Web API - Working with Data and APIs in JavaScript15m
Exercise: Why is geolocation (and similar features) often handled carefully when building client/server JavaScript apps?
Video class: 2.3 HTTP Post Request with fetch() - Working with Data and APIs in JavaScript16m
Exercise: What Express feature must be enabled so a server can read incoming POST data as JSON in `request.body`?
Video class: 2.4 Saving to a Database - Working with Data and APIs in JavaScript11m
Exercise: What is the main reason to use a database in a client–server JavaScript app?
Video class: 2.5 Database Query - Working with Data and APIs in JavaScript13m
Exercise: When retrieving all records from the server to display them on a page, which combination is used to query the database and send the results back to the client?
Video class: 2.6 Saving Images and Base64 Encoding - Working with Data and APIs in JavaScript12m
Exercise: How can a webcam frame be sent from the browser to a server as part of a POST request?
Video class: 2.7 Project Wrap-up: Accessibility and Design - Working with Data and APIs in JavaScript11m
Exercise: Why might you fetch data from an external API using Node (server-side) instead of directly from the client?
Video class: 3.1 API calls from Node.js (Weather data from Dark Sky) - Working with Data and APIs in JavaScript17m
Exercise: Why is a server-side (Node) proxy used to request weather data from an external API?
Video class: 3.2 Open Air Quality API in Node.js - Working with Data and APIs in JavaScript16m
Exercise: How can one server response include data from multiple APIs in a JavaScript app?
Video class: 3.3 Mapping Database Entries with Leaflet.js - Working with Data and APIs in JavaScript13m
Exercise: On the View Checkins page, what technique is used to display each saved checkin on the map?
Video class: 3.4 Hiding API Keys with Environment Variables (dotenv) and Pushing Code to GitHub11m
Exercise: What is the main purpose of using a dotenv file with the dotenv package in a Node.js project?
Video class: 3.5 Web Application Deployment (Glitch and Heroku) - Working with Data and APIs in JavaScript19m