Learn AJAX and make an interactive, graphical news feed. | Luke Fabish | Skillshare

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!

      1:43
    • 2. Soooo, what is AJAX, anyway?

      6:15
    • 3. How to use AJAX in JavaScript

      10:18
    • 4. Public APIs - what you need to know

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

      12:58
    • 6. Reading headlines from our news API

      17:37
    • 7. Dealing with AJAX failures

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

      22:12
    • 9. Time to say goodbye!

      0:44

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:

47ff322a

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!

Resources(1)

Student Projects