Learn how to use Gatsby (Version 3) in this full course for beginners. Gatsby is a static site generator that makes it quick to develop websites. You will learn how to create a recipes site.

Course Code:

No tags,

Course Contents

  • (0:00:00) Intro
  • (0:00:56) Gatsby Info
  • (0:02:46) Course Structure
  • (0:03:28) Course Requirements
  • (0:05:09) Vs Code
  • (0:06:02) Module Intro
  • (0:07:29) Install Gatsby-Cli
  • (0:09:29) Setup New Gatsby Project
  • (0:15:07) Folder Structure
  • (0:29:42) First Page
  • (0:38:26) Error Page
  • (0:41:01) Nested Structure
  • (0:44:41) Links
  • (0:51:21) Navbar
  • (0:56:26) Layout Component
  • (1:05:44) CSS Module Intro
  • (1:06:47) Inline CSS
  • (1:08:27) Global CSS
  • (1:14:01) CSS Naming Issues
  • (1:17:50) CSS Modules
  • (1:28:04) Styled-Components
  • (1:40:51) House Cleaning
  • (1:48:33) Styles
  • (1:53:05) Footer
  • (1:56:31) Error Page
  • (1:57:38) Contact Page
  • (2:03:45) Assets And Icons
  • (2:10:56) Navbar Setup
  • (2:20:11) Navbar Logic
  • (2:24:51) Gatsby Image Info
  • (2:28:30) Sandbox Setup
  • (2:34:36) Install Plugin
  • (2:38:15) Static Image Setup
  • (2:45:41) Shared Props And Options
  • (2:50:20) Options Example
  • (2:58:10) All Layouts
  • (3:04:29) Height
  • (3:09:04) About Page
  • (3:18:56) Hero Page
  • (3:25:19) Gatsby And GraphQL Intro
  • (3:28:39) Gatsby DataLayer In A Nutshell
  • (3:30:20) GraphiQL Interface
  • (3:36:35) SiteMetadata
  • (3:42:14) First Query
  • (3:51:27) Explorer
  • (3:53:52) Static Query Vs Page Query
  • (3:55:18) UseStaticQuery Hook - Code Exporter
  • (4:01:34) UseStaticQuery, GraphQL - From Scratch
  • (4:12:05) Field Alias
  • (4:15:06) Query Keyword, Name And Gatsby Clean
  • (4:18:19) Page Query
  • (4:25:20) Install SOURCE-FILESYSTEM Plugin
  • (4:35:33) AllFile Field
  • (4:41:50) Query Arguments
  • (4:50:03) Static Path Fix
  • (4:51:26) File - Field
  • (4:54:48) SourceInstanceName - Argument
  • (4:56:56) Gallery Setup
  • (5:00:47) GatsbyImageData - Field
  • (5:08:56) Render Gallery
  • (5:20:41) GetImage - Helper Function
  • (5:25:23) Local VS External Data
  • (5:26:50) Headless CMS
  • (5:28:49) Contentful
  • (5:29:37) Setup Contentful Account
  • (5:33:14) Content-Type
  • (5:40:07) Content
  • (5:47:36) Connect Gatsby - Contentful
  • (5:52:36) ENV Variables
  • (5:58:48) AllContentfulRecipe - Field
  • (6:05:57) AllRecipes Component
  • (6:15:00) RecipesList Component
  • (6:26:59) Featured Recipes
  • (6:37:50) Utils Setup
  • (6:42:47) Helper Function
  • (6:50:27) TagsList
  • (6:54:14) Tags Page
  • (7:00:22) Recipe Template Page Setup
  • (7:04:57) Recipe Template Page Walkthrough
  • (7:14:00) Slugify
  • (7:18:15) Query Variables
  • (7:27:05) Recipe Template Query
  • (7:34:27) Recipe Template Return
  • (7:46:45) GATSBY-NODE.JS Setup
  • (7:50:43) Create Tag Pages Programmatically
  • (8:08:36) Tag Template Return
  • (8:20:07) Possible Bug Fix
  • (8:26:53) Fonts
  • (8:32:40) Contact Form
  • (8:37:16) FAVICON
  • (8:39:23) SEO Setup
  • (8:45:40) SEO - Props
  • (8:51:34) SEO - Complete
  • (9:01:05) Netlify Info
  • (9:01:58) Netlify - Drag And Drop
  • (9:05:32) Continuous Deployment
  • (9:14:44) Webhooks