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).
Taught by
Rik Lomas
Taught by
Rik Lomas
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.
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!
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.
Lawrence Gosset
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
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
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
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
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
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 workDon’t worry, we are here to help you with:
Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!
