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.