SuperHi FM

Search:

Catalog Cart About Sign in

Next: Chapter 03

Super Shapes

Back: Chapter 01

FIFTY Festival

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!

Email Discord

Search:

Catalog Cart About Sign in

Next: Chapter 03

Super Shapes

Back: Chapter 01

FIFTY Festival

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!

Email Discord

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

SuperHi

Advanced CSS + Javascript

Chapter 02

Jiffy

In our second week we will build a site that lets us search for Gifs using Giphy’s API. We’ll talk about APIs and why they’re so great and how we can use Ajax to fetch data. We’ll also explore some new CSS Grid layout and flexbox tricks.

Links + downloads

Chapter resources

Chapter URL

Videos

Lesson 01

Project introduction

Lesson 02

The new interactive slides

Lesson 03

What we’ll learn

Lesson 04

Adding our initial HTML

Lesson 05

Column layout using flexbox

Lesson 06

Styling up our search input and loading indicators

Lesson 07

What are APIs and why are they great?

Lesson 08

Getting data in the background using fetch

Lesson 09

Using fetch to get data from Giphy’s API

Lesson 10

Creating our gif video element using Javascript

Lesson 11

Separating tasks out into their own functions

Lesson 12

Using CSS Grid to stack our videos on top of each other

Lesson 13

Responding to key press events on input

Lesson 14

Using event data to test what key we’ve pressed

Lesson 15

Improving our search hint to show the user what they’re searching

Lesson 16

Putting our fetch code into a function that uses the search term

Lesson 17

Getting a random item from our array of images

Lesson 18

Toggling a loading state on our page

Lesson 19

Adding a video animation effect on video load

Lesson 20

Clearing our gif stack and resetting the search

Lesson 21

Responding to events across the whole page

Lesson 22

Handling errors when things go wrong

Lesson 23

Responsive styles and tweaks

Lesson 24

Project finish and final code summary

Private notes

A place for you to post notes about anything on this page. Only you can view your notes.

SuperHi FM

Want some ambient music in the background? Play our radio station!