Gatsby Tutorial and Projects Course

Create Blazingly Fast Websites with Gatsby

Bestseller

(918 ratings)

9,614 students

Created by John Smilga

Last updated 10/2020

English

English [Auto], French [Auto]

$12.99

~~$19.99~~

35% off

3 days left at this price!

Buy now

30-Day Money-Back Guarantee

What you'll learn

Create Blazingly Fast Websites/Projects with Gatsby

Requirements

Basic Knowledge of React

Description

Gatsby is a React-based, GraphQL powered static site generator. It combines together the best parts of React, webpack, react-router, GraphQL, and other front end tools to provide excellent developer experience. Gatsby is far more than typical static site generator though. You can think of it more like a modern front-end framework.

It uses powerful pre-configuration to build a website that uses only static files for incredibly fast page loads, service workers, code splitting, server side rendering, smart image loading, asset optimization, and data prefetching.

The course will consist of two parts. In the first part, the tutorial part we will cover Gatsby basics, and in the second part, projects part, we will build interesting projects using Gatsby.

All project intro videos are available for preview.

Who this course is for:

Everyone Interested in Building Blazingly Fast Static Websites With Gatsby

Featured review

Brett Bell

66 courses

7 reviews

a year ago

A straightforward and to the point tutorial of how to build sites with Gatsby. Includes two projects to see how it works in the real world. Glad he used services like Nelify and Contentful to show how you can get up and running quickly. You will want to be familiar with React before taking this course, as John assumes you have that background.

6 sections • 352 lectures • 37h 15m total length

Preview02:02
Course Info
00:35
Course Requirements
01:31
Video Blur Fix
01:37
Course Review
00:32
VS STUDIO CODE SETUP
02:39

Tutorial Info
00:22
Install
05:46
Folder Structure
08:10
Create Pages
08:07
Link Component
06:21
Navbar
04:19
Layout Component
10:10
CSS Intro
01:13
Inline CSS
00:56
Global CSS
03:44
Naming Issue
02:43
CSS Modules
07:41
Styled Components
09:43
Gatsby and GraphQL Intro
03:39
Gatsby DataLayer in a Nutshell
01:41
GraphiQL Interface
06:15
siteMetadata
04:21
First Query
06:05
Explorer Example
01:37
Render Intro
00:51
Examples Setup
01:24
Code Exporter - useStaticQuery
04:13
useStaticQuery and graphql
10:18
Field Alias
02:47
Query Keyword and Name
01:32
StaticQuery Component
05:42
PageQuery
06:12
Images Setup
02:20
gatsby-source-filesystem Plugin Install
05:51
allFile field
06:41
Query Arguments
09:09
file field
03:34
sourceInstanceName
04:19
Install gatsby-image
02:32
gatsby-image Overview
05:30
gatsby-image Query
05:26
Render gatsby-image setup
08:09
Render gatsby-image
10:50
Gatsby Image Optimizations
07:55
maxWidth parameter
05:13
Data Intro
02:14
Local Data VS External Data
01:48
Headless CMS Info
02:04
Contentful Info
01:10
Contentful Interface
03:41
Content-Type
04:36
Content
06:29
Connect To Contentful
05:55
Products Query
06:11
Products Page
11:41
Products Page CSS
06:13
Nested Pages
05:05
Product Template
02:17
Slug Query
01:58
Gatsby-Node
15:13
Slug Info
02:22
Single Product Query
02:03
Query Variables
03:12
Product Template Complete
07:21
Product Template CSS
01:22
Docs
01:29
ENV VARIABLES
06:33
gatsby build
02:51
Drag and Drop
03:08
Continuous Deployment
07:42
Webhooks
03:57
Source Code
00:22

Preview02:32
Starter Project
00:07
Dev Setup
02:32
Setup Info
13:12
Navbar
07:07
Hero Image Query
04:18
Hero
09:26
Services and Title
08:30
Strapi Info
02:01
Strapi Setup
04:49
First Content-Type
10:25
First Content
08:06
Connect Gatsby-Strapi
05:08
Project Backend
04:11
Important Update!!!!
00:08
Jobs Query
04:54
Jobs Component
18:15
Projects Content-Type
08:06
Projects Content
04:31
Projects Query
05:30
Projects Setup
06:10
Project List
07:30
Project Component
07:41
Projects Page
03:57
Blog Content-Type
05:33
Blog Content
07:14
Blog Query
05:46
Blog List
04:17
Blog Component
04:40
Blog Page
05:07
Create Blog Pages Programmatically
06:45
Blog Template
05:48
Image in Markdown
02:40
Important Update!!!!
00:30
Strapi-Claudinary
08:23
Prop-Types
18:52
Footer
03:07
Sidebar
05:23
Sidebar Toggle
05:55
Sidebar Animation
02:16
Error Page
02:56
About Page Intro
02:39
About Page Content-Type and Data
05:00
About Page
09:03
Contact Page
04:40
Formspree
04:56
gatsby-browser.js
02:43
Google Fonts
02:52
Netlify Deploy
05:07
SEO Intro
03:41
SEO Alternatives
01:24
SEO Basic Setup
06:29
SEO Query
07:26
SEO - All Pages
06:23
sitemap Plugin
02:12
Twitter Cards
06:36
Finished Project
00:05

Preview05:42
Preview00:07
Starter Project
02:52
Setup Overview
04:27
Navbar
10:59
Sidebar
03:43
Sidebar Toggle
03:35
Hero
09:06
Footer
02:08
Error Page
02:20
Newsletter Page Setup
04:51
Collect Form Values in Netlify
09:27
MDX Intro
04:57
Basic Markdown
05:26
Basic Styling
05:37
First React Component
04:01
Nice Text
04:34
Complete Components Info
05:52
Counter and Like Button
04:35
Posts Intro
05:49
Single Post Setup
05:00
Frontmatter
06:21
Home Page Query
09:45
Posts Component
07:34
Single Post Component
09:13
Posts Page
03:18
Create Post Pages Programmatically
09:00
Single Post Query
06:58
Single Post Page JSX
08:06
Categories Setup
13:04
Categories Query
06:50
Categories JSX
06:15
Banner About
09:35
Banner Instagram
07:54
Banner Recent
07:31
Banner Categories
08:01
Navbar Categories
03:02
MDX - Inline Images
14:00
Video - Regular/Local
10:47
Video - Iframe
07:42
MDX Wrapper Intro
06:26
Root MDX
09:13
First MDX Example
06:29
MDX - props / children
05:38
MDX - Component Example
05:54
MDX - H2
06:09
MDX - H4
02:36
MDX - Inline Code
05:42
MDX - Blockquote
09:53
Prism Setup
09:20
Prism Config
10:15
My Example
04:09
Favicon
02:07
Gatsby SEO
11:55
Finished Project
00:09

Preview03:17
About Project
03:36
Starter Project
00:09
Get Starter Project
02:16
Setup Info
02:54
Global Styles with Styled-Components
06:54
Root Wrapper
03:38
Hero Setup
05:03
Background Image Query
06:58
Background Image Setup
12:05
Background Image Bug Fix
00:41
Navbar Component
04:53
About and Title Components
06:15
Airtable Info
04:39
Airtable Setup
02:16
First Table
12:06
API Docs and Keys
03:10
API KEYS
00:20
Connect Airtable - Gatsby
09:03
Latest Projects Query
07:29
Projects Component
13:37
Customers - Table
04:57
Customers - Query
05:38
Customers - Slider Setup
14:42
Customers - Slider Complete
10:44
OPTIONAL!!!!
00:04
Hero - Slider Setup
06:46
Hero - Slider Complete
03:38
Hero - Slider Dots
02:58
Survey Setup
09:49
Survey - Fetch Items
08:26
Survey - Display Items
05:42
Survey - Update Values
07:56
Search Buttons - Setup
07:30
Search Buttons - Complete
09:39
Algolia Intro
03:20
Algolia ENV VARIABLES
00:06
Algolia - Account Setup
06:15
Algolia - Plugin Setup
04:30
Algolia - Query Setup
17:24
Algolia - Basic Front End Setup
08:14
Algolia - SearBox Component
03:06
Algolia - New Hits Component
06:52
Context API
11:28
Nested Links Info (sublinks)
10:24
Sidebar
11:37
Payments Page
03:57
Toggle Sidebar
04:35
Navbar - Sublinks
12:19
Tile Layout
15:47

OLD PROJECT!!!
00:05
Section Intro
01:25
Project Intro
09:24
Setup Files
02:53
Bootstrap Gatsby Application
15:08
Project Resources
00:04
Folder Structure
11:44
Creating Pages
10:37
Gatsby Link Component
06:00
Layout Component
16:23
Styling Intro
03:47
Inline CSS
01:43
Global CSS
07:21
Component CSS
03:31
CSS Module
09:57
Bootstrap
04:48
Gatsby Config and SASS
15:13
Project Global CSS
10:39
React-Icons and Constants
14:19
Navbar
22:31
Footer
07:27
Simple Hero
07:30
Banner
07:46
Error Page
03:59
CSS Fix
05:36
Styled Components Intro
04:29
Styled Components Basics
09:43
Props With Styled Components
07:10
Title Component
13:56
Alternate Syntax
02:50
About Section
07:34
Services Section
08:24
Hosting Intro
00:46
Drag and Drop
05:43
Continuous Deployment
08:04
Gatsby and GraphQL Intro
03:40
Gatsby DataLayer in a Nutshell
01:42
GraphiQL Interface
07:18
siteMetadata
05:23
First Query
11:08
Render Intro
00:45
useStaticQuery Hook
08:44
External Variables
00:59
Query Keyword
00:57
StaticQuery
10:00
PageQuery
05:56
gatsby-source-filesystem
07:48
allFile field
06:24
Arguments
07:15
file field
05:28
gatsby-image plugin setup
03:20
gatsby-image Overview
06:29
Query Images with gatsby-image
07:31
Gatsby-Image Example
25:06
Gatsby-Image Fluid Details
09:06
About Image Fix
08:38
Background-Image-Plugin
14:58
Setup Home Page Background
08:18
StyledHero Component Details
05:29
Adding Background Images To All Pages
06:09
Transition Link Plugin
10:32
Contact Page
08:53
Adding Labels
01:08
FormSpree Service
04:17
Additional Headless CMS Info
00:16
External Data Intro
01:51
Headless CMS Intro
01:49
Contentful Intro
01:33
Contentful Interface
06:55
Content Model
07:04
Content
10:40
Connect To Contentful
09:15
env variables
13:26
Project Resources
00:11
Prima's GraphQL Playground Intro
05:05
Install Prisma's GraphQL Playground
02:44
Setup Tours Queries
11:53
Featured Tours Component
20:25
Featured Tours Fixes
01:28
Tour Component
12:53
Tours Component
17:27
Simple Default Props
13:10
Image Default Props
16:58
Creating Template
04:42
gatsby-node
22:09
Query Variables
10:06
Single Tour Query
06:02
Template Setup
14:58
Single Tour Page
20:39
Single Day Component
10:25
Blogs Intro
01:59
Blogs Contentful Setup
09:58
Posts Query
04:28
Posts Query Arguments
05:36
BlogList Component
07:39
Blog Card Component
06:01
Setup Blog Pages
08:03
Single Blog Query
06:02
Blog Template Setup
06:58
Rich Text Setup
03:10
Render Images in Rich Text Field
08:24
Render Another Post in Rich Text Field
08:38
Pagination Setup
09:23
Blogs Template Setup
05:33
Create Pages
14:52
Blog List Template
06:37
Numbering
09:21
Prev and Next Links
09:44
SEO Setup
05:14
SEO Options
00:49
Basic SEO
08:13
Query siteMetadata
08:37
Twitter Cards
09:23
Facebook Cards
05:47
Adding SEO To All Pages
06:17
sitemap and robots.txt
03:56
Shared Hosting
06:43

John Smilga

Instructor

4.7 Instructor Rating
6,019 Reviews
49,863 Students
7 Courses

Hello, I am John Smilga and I am a web developer. I live and work in Los Angeles, CA. I spend most of my day, experimenting with HTML, CSS and Javascript (and it's endless list of frameworks). I enjoy coding and the challenge of learning something new everyday. You can also find me at youtube channel Coding Addict.

This course includes:

Training 5 or more people?

Gatsby Tutorial and Projects Course

What you'll learn

Requirements

Description

Who this course is for:

Featured review

Course content

Instructor

This course includes:

Training 5 or more people?

Gatsby Tutorial and Projects Course

What you'll learn

Requirements

Description

Who this course is for:

Featured review

Course content

Course Info6 lectures • 9min

Gatsby Tutorial67 lectures • 5hr 22min

Portfolio Project57 lectures • 5hr 16min

MDX Blog55 lectures • 5hr 56min

Design Project with Airtable50 lectures • 5hr 30min

Backroads Tutorial Project117 lectures • 15hr 3min

Instructor