☑ 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.
Setting up Gatsby v3
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