Gatsby Demystified: A complete course on how Gatsby V3 works

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