SuperHi FM

Search:

Catalog Cart About Sign in

ADVANCEDCOURSE

Ajax + APIs

Remix projects by learning how to work with APIs (how different websites talk to each other) and Ajax (a way of grabbing and working with that data).

Rik Lomas

Taught by

Rik Lomas

Design Knowledge

Design Knowledge

Lesson 01

Welcome to the course!

Lesson 02

What is Ajax + what are APIs?

Lesson 03

Setting up our Design Knowledge project

Coin Price

Coin Price

Lesson 01

Introduction to Coin Price

Lesson 02

Setting up our HTML and CSS

Lesson 03

Adding a price checking function

Uova

Uova

Lesson 01

Introduction to Uova and Contentful

Lesson 02

Setting up a static HTML and CSS page

Lesson 03

How to use Contentful

Unsplash Search

Unsplash Search

Lesson 01

Introduction to Unsplash Search

Lesson 02

How Unsplash's API works

Lesson 03

Static site with loading screen

Figure

Lesson 01

Introduction to our client presentation tool

Lesson 02

The Figma developer documentation

Lesson 03

Adding our static site with styles

Instafeed

Instafeed

Lesson 01

Introducing Instafeed

Lesson 02

Getting our Instagram access token

Lesson 03

Viewing our data from Instagram

Pitchfork Scraper

Pitchfork Scraper

Lesson 01

Introduction to web scraping

Lesson 02

How to run a Ruby script

Lesson 03

Grabbing HTML using HTTParty

Get access to Ajax + APIs

Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
Projects and code that you can alter and include in your own sites and portfolio
Resources to get you started and going post-course

Your instructor

Rik Lomas

Rik Lomas

Founder + CEO

With support from...

Lawrence Gosset

Lawrence Gosset

Teacher

Course structure

Chapter 01

Design Knowledge

Lesson 01
Welcome to the course!
Lesson 02
What is Ajax + what are APIs?
Lesson 03
Setting up our Design Knowledge project
Lesson 04
Setting up Javascript events
Lesson 05
Adding our data in an static array
Lesson 06
Making our data an array of objects
Lesson 07
Moving data into a JSON file
Lesson 08
Fetching data in the Javascript console
Lesson 09
Pulling in JSON into the page
Lesson 10
Cleaning our code with shortcut functions
Lesson 11
Getting a real data source
Lesson 12
How SuperHi uses Ajax + APIs
Lesson 13
Using the random data source
Lesson 14
Adding styling to our data and site
Lesson 15
Other data sources

Chapter 02

Coin Price

Lesson 01
Introduction to Coin Price
Lesson 02
Setting up our HTML and CSS
Lesson 03
Adding a price checking function
Lesson 04
Pulling in JSON from our API
Lesson 05
Changing the currency type
Lesson 06
Updating HTML on site
Lesson 07
Adding a setInterval to get every 60 seconds
Lesson 08
Other features of the Coindesk API

Chapter 03

Uova

Lesson 01
Introduction to Uova and Contentful
Lesson 02
Setting up a static HTML and CSS page
Lesson 03
How to use Contentful
Lesson 04
Getting the JSON response from Contentful
Lesson 05
Taming Contentful data
Lesson 06
Pulling data from Contentful
Lesson 07
Using Javascript map to transform our array
Lesson 08
Adding Ajax-enabled HTML
Lesson 09
Adding in fuller HTML
Lesson 10
Ordering data from Contentful
Lesson 11
More Contentful features

Chapter 04

Unsplash Search

Lesson 01
Introduction to Unsplash Search
Lesson 02
How Unsplash's API works
Lesson 03
Static site with loading screen
Lesson 04
Adding form events to our site
Lesson 05
Fetching the Unsplash search URL
Lesson 06
Adding Authorization headers
Lesson 07
Introducing Postman
Lesson 08
Using Postman to clean up JSON responses
Lesson 09
Display search results
Lesson 10
Adding more data from our API response
Lesson 11
Adding background color to the page
Lesson 12
Adding final styles

Chapter 05

Figure

Lesson 01
Introduction to our client presentation tool
Lesson 02
The Figma developer documentation
Lesson 03
Adding our static site with styles
Lesson 04
How to think about the project with Javascript
Lesson 05
Adding promise chaining
Lesson 06
Fetching our Figma file
Lesson 07
Getting frame ids from Figma
Lesson 08
Generating images using the Figma API
Lesson 09
Adding extra query string information
Lesson 10
Changing the loader to the Figma document title
Lesson 11
Turning our grid into a slideshow
Lesson 12
Getting and sending comments using the Figma API

Chapter 06

Instafeed

Lesson 01
Introducing Instafeed
Lesson 02
Getting our Instagram access token
Lesson 03
Viewing our data from Instagram
Lesson 04
Adding Instagram to our site
Lesson 05
Refreshing our access token

Chapter 07

Pitchfork Scraper

Lesson 01
Introduction to web scraping
Lesson 02
How to run a Ruby script
Lesson 03
Grabbing HTML using HTTParty
Lesson 04
Installing Nokogiri
Lesson 05
Parsing and displaying content with Nokogiri
Lesson 06
Looping over tags in Ruby
Lesson 07
Grabbing attributes from content

SuperHi students work at the best

Our students are based all over the world and work at creative companies large and small. Why not check out some of their work?

View student work

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

Whenever someone says “Twitter has an API”, what they mean is that Twitter has a particular way to let other sites remix their data to create brand new projects.

If you want to make a custom Instagram feed, a Figma-driven client presentation tool, a Bitcoin tracker, or your own redesigned version of Twitter, all of these projects need to communicate back-and-forth with a data source.

Our short online course, aimed at beginners, is designed for people who want to work with APIs (how different websites talk to each other) and Ajax (one way of grabbing and sending that data) together to make remixed projects.

What you’ll learn

Learn to work with your own data and external data sources
Work with data across several formats such as JSON, XML + HTML
Make sites that use services like Figma, Instagram and Contentful to make data-driven sites
Using data from sources like Unsplash search to build interactive API-driven sites
How to work with sites that don't have APIs to use with web scraping

Requirements

A computer with Mac OS X 10.9 or above, Windows XP or above, or a recent Linux version installed and a broadband internet connection. That’s it!

Target Audience

Anyone who is looking for ways to work with data from third party services such as Figma, Contentful, Twitter or Instagram.

We would recommend a little knowledge of HTML, CSS and Javascript before starting this course – taking one of Foundation HTML, CSS + JS or Javascript for Designers courses will be sufficient – as we'll be covering how to work with them in context of sending and receiving data to web pages.

A portion of the course covers back-end coding with Ruby but prior knowledge of Ruby or back-end coding isn't needed to join this course.

Most of our students work in the creative industries – designers, strategists and copywriters are the most common jobs – but you can work in any industry to join the course.

In the first project, we'll talk about what is Ajax, what are APIs and what is asynchronous Javascript, and use all these techniques to grab data from a third-party source to display designer quotes.

Some data sources continually change and update (hi Bitcoin!) and in this project, we grab data from CoinDesk to display the latest Bitcoin price in dollars, euros and pounds.

Sometimes a self-built CMS can feel overkill, so on this project we set up with Contentful to get JSON data from their CMS's API to display on our restaurant site.

Data often depends on our users so in this project, we grab data from Unsplash based on our user's search query. If they want blue photos, they'll get blue photos!

APIs can be used to automate laborous processes. In this project, we take our working Figma project and turn it into a client presentation tool.

Some APIs are more awkward to use than others, so in this project, we'll talk about Instagram's API which has a few more hoops to get the information we want: our own photos!

Some data sources don't have an accessible API so how do we get that data? We switch to back-end coding with Ruby to grab Pitchfork album reviews from the web.

Rik (he/him) is a Mancunian coder, teacher and CEO of SuperHi. He was the co-founder of Steer (a code school in London) and has taught several thousand people to code. He is a bit too old to be posting memes on our social media and recently featured as a Sour Patch Kid in the Macy's Thanksgiving Parade.