Request Data from a Custom API Endpoint to Source Nodes in Gatsby with gatsby-node.js

Create and Source Custom Nodes from Data in Gatsby with createNode

Use Gatsby’s GraphQL Explorer GraphiQL to Query and Browse Your Custom Sourced Data

Use Gatsby’s useStaticQuery React Hook to Query Custom Sourced Data for a Web App

Create a Custom React Hook Using Gatsby’s useStaticQuery to Query Custom Sourced Data

Create a Grid Layout of List Items Using CSS Grid Templates

Add a Cutout Notch to an HTML Element with a CSS Polygon Clip Path

Source and Create Nodes with Data from an API in Gatsby to Create a Pokemon Pokedex

In this lesson, we'll learn how to use [CSS Clip Path](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) to add a notch to our grid layout. We'll walk through understanding how the clip-path property works, applying a polygon clip path, and using it to create a notch effect like the real Pokedex.

Course

Source and Create Nodes with Data from an API in Gatsby to Create a Pokemon Pokedex

Add a Cutout Notch to an HTML Element with a CSS Polygon Clip Path

Share this video with your friends