Gatsby Demystified- A complete course on how Gatsby V3 works

Gatsby Demystified: A complete course on how Gatsby V3 works, available at $59.99, has an average rating of 4.7, with 126 lectures, based on 5 reviews, and has 144 subscribers.

You will learn about How to setup and run a Gatsby JS project GraphQL Gatsby Plugin Image (StaticImage) Gatsby Background Image Netlify CMS How Markdown Files work in Gatsby Responsive Web Design This course is ideal for individuals who are Wed Developers looking to expand their knowledge or College Students looking for a new web dev language or Junior Web Developers or Web Designers It is particularly useful for Wed Developers looking to expand their knowledge or College Students looking for a new web dev language or Junior Web Developers or Web Designers.

Enroll now: Gatsby Demystified: A complete course on how Gatsby V3 works

Summary

Title: Gatsby Demystified: A complete course on how Gatsby V3 works

Price: $59.99

Average Rating: 4.7

Number of Lectures: 126

Number of Published Lectures: 126

Number of Curriculum Items: 126

Number of Published Curriculum Objects: 126

Original Price: $39.99

Quality Status: approved

Status: Live

What You Will Learn

How to setup and run a Gatsby JS project

GraphQL

Gatsby Plugin Image (StaticImage)

Gatsby Background Image

Netlify CMS

How Markdown Files work in Gatsby

Responsive Web Design

Who Should Attend

Wed Developers looking to expand their knowledge

College Students looking for a new web dev language

Junior Web Developers

Web Designers

Target Audiences

Wed Developers looking to expand their knowledge

College Students looking for a new web dev language

Junior Web Developers

Web Designers

*** Course has been updated to take into account Gatsby v3 updates ***

In this course, you’ll learn how to build super-fast, modern-day websites using Gatsby JS. This course will take you from the absolute beginning to gaining a firm understanding of how Gatsby works.

We will start out with how to install and get Gatsby up and running.

From there, we will go into the setup of a Gatsby project and then move on to fully exploring GraphQL, a crucial component for using Gatsby. Once we have a solid foundation of GraphQL, we can then move on to Gatsby Image and Gatsby Background Image, two critical components to Gatsby.

We will also go over how to upload/deploy Gatsby to both Google Firebase and Netlify. In addition, we’ll also build out an about page landing website, for you to put your knowledge into action.

Start and stop as you want. This course can be learned in order or jump around if you need help in a particular area. I wanted this course to be a compendium as well, so you can come back if you need to at any time.

Ultimately I wanted to build this course as if I was just learning Gatsby. I incorporate React Bootstrap, a critical component in making your Gatsby website completely responsive. This is the course I wish I had years ago when beginning my Gatsby journey.

This course is for anyone looking for get a better grasp of how to use Gatsby JS!

Course Curriculum

Chapter 1: Installing and Setting up Gatsby

Lecture 1: Installing Gatsby

Lecture 2: Installing Yarn

Chapter 2: Deploying Gatsby to Firebase & Netlify

Lecture 1: Pricing

Lecture 2: Deploying Gatsby to Google Firebase

Chapter 3: The Basic Structure of Gatsby

Lecture 1: Intro

Lecture 2: Gatsby Config

Lecture 3: The Public Folder and Gatsby Build and Serve

Lecture 4: Pages

Lecture 5: Images

Lecture 6: Components

Chapter 4: Building a better starting template

Lecture 1: Overview

Lecture 2: Pulling the design out of the template

Lecture 3: The Custom CSS file

Lecture 4: Bringing in React Bootstrap

Lecture 5: Uploading Your Template to Github

Lecture 6: Changing the ReadMe

Lecture 7: Downloading the template

Chapter 5: Making Gatsby Responsive with React Bootstrap

Lecture 1: What Exactly Is React Bootstrap?

Lecture 2: The Container

Lecture 3: Rows and columns

Lecture 4: Other Grid Options

Chapter 6: GraphQL

Lecture 1: What is GraphQL

Lecture 2: Setting up a new gatsby project

Lecture 3: The Two Parts to GraphQL

Lecture 4: allFile

Lecture 5: file

Lecture 6: Cleaning up and Stylizing the index page

Lecture 7: Applying the queried file data to the index page

Lecture 8: Applying the queried allFile data to the index page

Lecture 9: Adjusting the Formatting of the GraphQL data

Lecture 10: Sorting GraphQL Data

Lecture 11: Static Query

Lecture 12: Source Code for GraphQL section

Chapter 7: Images & Background Images in Gatsby **Updated for Gatsby v3**

Lecture 1: Overview

Lecture 2: Source Code with Example Images

Lecture 3: The Links

Lecture 4: Installing Gatsby Hello World

Lecture 5: gatsby-source-filesystem

Lecture 6: gatsby-plugin-image

Lecture 7: gbimage-bridge

Lecture 8: react bootstrap installation

Lecture 9: Setting up our CSS

Lecture 10: Setting up gatsby-plugin-image

Lecture 11: StaticImage

Lecture 12: rows and cols

Lecture 13: Off to GraphQL we go

Lecture 14: GatsbyImage

Lecture 15: GatsbyImage with getImage

Lecture 16: alt information from graphQL

Lecture 17: Gatsby Background Image gbimage-bridge

Lecture 18: CSS this file

Chapter 8: Google Fonts in Gatsby

Lecture 1: Overview

Lecture 2: Setup our Gatsby Template

Lecture 3: Adding Google Fonts into our project

Lecture 4: Preloading Google Fonts in Gatsby

Chapter 9: Responsive YouTube Video

Lecture 1: Introduction

Lecture 2: Responsive YouTube Video in Gatsby

Chapter 10: Markdown Files

Lecture 1: Introduction

Lecture 2: Setup default template from Github

Lecture 3: Installing gatsby-transformer-remark

Lecture 4: Setting up the files and gatsby config

Lecture 5: Querying the Markdown data in GraphQL

Lecture 6: Implementing the query on a page

Lecture 7: Keeping Markdown Thumbnails all the same size

Lecture 8: Creating slugs in gatsby-node

Lecture 9: The slugs and graphQL

Lecture 10: Building the template

Lecture 11: Implementing the template in gatsby-node

Lecture 12: Slugs and Links

Lecture 13: Finishing The Template

Lecture 14: Ooops! I almost forgot to sort the data

Lecture 15: Source Code for the Markdown files

Chapter 11: Netlify CMS

Lecture 1: Introduction

Lecture 2: Setting up our files

Lecture 3: Setting up the admin file

Lecture 4: Netlify CMS plugins

Lecture 5: Github to Netlify

Lecture 6: Git Gateway and Identity

Lecture 7: Adding a new Entry

Lecture 8: Changing a field to Optional

Lecture 9: Adding an image in the markdown text

Lecture 10: Fixing the image displaying from the markdown text

Lecture 11: Fixing the Markdown images

Lecture 12: Source Code for Netlify CMS

Lecture 13: Intro

Lecture 14: Example images and text for project

Lecture 15: Links to plugins

Lecture 16: Downloading and Setting up a Template

Lecture 17: Installing React Bootstrap

Instructors

Haydn Adams, BFA
Web Development Tutorials for Designers

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 0 votes

4 stars: 2 votes

5 stars: 3 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!