Web Design


Get Up to Speed w/ Gatsby v3

A mini-series focused on Gatsby v3 and how images now work


2 hours


Jun 2021

Last Update
Regular Price

Exclusive  Offer
Unlimited access to 30 000 Premium SkillShare courses

What you will learn

Gatsby v3

How Gatsby handles Images & Background Images

How to upload and deploy a Gatsby Website


Learn how to handle Images the Gatsby v3 Way

Image processing is what Gatsby does best. But they changed the way images are handled—in a good way—in Gatsby v3.

In the past, using Gatsby Image would take 5 to 6 steps in order to fully take advance of. Now it's two, maybe 3 if you want to get super creative. The process is streamlined, making it sooooo much easier to create fast-loading sites with multiple image formats—including the webP format.

Turn Color images into Grayscale—in GraphQL

Look ma! No photoshop needed! Leverage the power of GraphQL and learn how to turn images into grayscale without destroying one pixel.

Not happy with the look? Give it a duotone with CSS. We'll learn how to do just that in the course, making your images flawless & fast loading.

Look Ma! No GraphQL for images!

Say what? Yep! If you dreaded setting up GraphQL all to load up an image in Gatsby Image, you're in luck. Gatsby StaticImage is a dream. One line and Gatsby outputs multiple versions of the image, including the webP format.

Responsive Website Goodness!

We'll leverage the power of React Bootstrap (that has bootstrap under the hood) to make our website 100% responsive. Oh heck yes.

Social Media Icons—with React Font Awesome

Font Awesome was already awesome. But then they became more awesome with React Font Awesome. Bring in SVG, fast-loading social media icons via React Font Awesome.

In this course, I'll walk you through how to install and load up any icon in their catalogue.

Let's get this site online too!

You've built it. Now let's launch it. I'll also walk you through how to upload your work to Github and then how to deploy the website via Netlify. From a blank canvas (ok, almost blank canvas) to a fully built one-page website that can be seen around the world, this course has it all.


Get Up to Speed w/ Gatsby v3
Get Up to Speed w/ Gatsby v3
Get Up to Speed w/ Gatsby v3
Get Up to Speed w/ Gatsby v3


Setting up Gatsby v3


Installing Gatsby

Installing Yarn

Building an About Landing Page with Gatsby v3

Source Files & Example Images

Installing hello world

Installing gatsby plugins

Installing 3rd party react plugins

The Free Links to all of the plugins

Bringing in css and images

Let the importing begin

Enter the GraphQL World

Setting up the background image

Full-screen background image with color overlay

Bring in Gatsby Helmet

The grid - Container Rows Cols

Aligning content to the middle of the page with Bootstrap flex

Lets bring in some type and stylize it

It's React Font Awesome Time

And now it's Tooltip Time

Gatsby and Static Images

Fixing the spacing

Git Hub and Netlify

Adding the favicon

In conclusion


Udemy ID


Course created date


Course Indexed date
Course Submitted by