Learn AJAX and make an interactive, graphical news feed. Staff Pick

Luke Fabish, Let's get coding!!

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (1h 27m)
    • 1. Welcome to the class!

    • 2. Soooo, what is AJAX, anyway?

    • 3. How to use AJAX in JavaScript

    • 4. Public APIs - what you need to know

    • 5. Three fundamental AJAX states (we'll start by waiting!)

    • 6. Reading headlines from our news API

    • 7. Dealing with AJAX failures

    • 8. Access the GIPHY API with your awesome new AJAX skills

    • 9. Time to say goodbye!


Project Description

This is where we make a fun, interactive and unique application that’ll teach you everything you need to know to use AJAX in your own web pages.

We’re going to take advantage of two publicly-available web APIs - a news feed, and Giphy’s image search.

We’ll join these two API’s together to interpret the world’s headlines with animated GIFs. Frankly, I can’t think of a better way to make sense of the world. It'll look something like this:


To help you get started I’m going to provide some files with skeleton HTML and CSS in them to kickstart your project. Download and double-click ajax-class-resources.zip to get started.

The steps to completing your animated GIF news interpretation app are:

  • Implement a simple search of the GIPHY image database with AJAX
  • Search the News API with AJAX
  • Add error handling for when things don’t go right.
  • Add a ‘waiting’ animation for when the web is slow.
  • Join the output of the News API with our GIPHY image search

If you run into any trouble along the way, let me know! I’m hanging out on Skillshare every day and I’m always ready to help out.

Finally, don’t forget to share your project with the class!


Student Projects