CF

Gatsby Tutorial and Projects Course

21h 48m 56s
English
Paid
Updated September 2026

Gatsby Tutorial and Projects Course is a 223-lesson 21 hours 48 minutes self-paced course by Udemy. Gatsby combines React, GraphQL, webpack, and react-router into a static site generator that behaves more like a modern front-end framework than a typical one.

Course facts

Lessons
223
Duration
21 hours 48 minutes
Level
All levels
Language
English
Updated
2026-09-11
Instructor
Udemy
Price
Premium

Gatsby combines React, GraphQL, webpack, and react-router into a static site generator that behaves more like a modern front-end framework than a typical one.

What Gatsby gives you

Through smart pre-configuration, Gatsby produces sites built entirely from static files for very fast page loads, along with service workers, code splitting, server-side rendering, smart image loading, asset optimization, and data prefetching handled largely automatically.

Two-part structure

The course splits into a tutorial section covering Gatsby fundamentals, followed by a projects section where you apply those fundamentals to build several real sites, with intro videos for every project available to preview first. Only basic React knowledge is required.

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.

Requirements:
  • Basic Knowledge of React

What you'll learn:

  • Create Blazingly Fast Websites/Projects with Gatsby
Who this course is for:
  • Everyone Interested in Building Blazingly Fast Static Websites With Gatsby

Who teaches Gatsby Tutorial and Projects Course? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in Gatsby Tutorial and Projects Course?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 223 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Gatsby Intro
All Course Lessons (223)
#Lesson TitleDurationAccess
1
Gatsby Intro Demo
01:36
2
Course Info
00:31
3
Course Requirements
00:54
4
Video Blur Fix
01:51
5
Course Review
00:43
6
Visual Studio Code
01:42
7
Intro
01:28
8
Install gatsby-cli
02:01
9
Setup New Project
05:39
10
Project Structure
14:36
11
First Page
08:45
12
Error Page
02:36
13
Nested Pages
03:41
14
Links
06:41
15
Navbar
05:06
16
Layout Component
09:19
17
CSS Info
01:11
18
Inline CSS
01:41
19
Global CSS
05:35
20
CSS Naming Issues
03:50
21
CSS Modules
10:15
22
Styled-Components
12:48
23
House Cleaning
07:43
24
Styles
04:33
25
Footer
03:27
26
Error Page
01:08
27
Contact Page
06:08
28
Assets and Icons
07:12
29
Navbar Setup
08:56
30
Navbar Functionality
04:41
31
Gatsby Image Info
03:40
32
Sandbox Setup
06:07
33
Install Plugin
03:40
34
Static Image Setup
07:27
35
Shared Props and Options
04:40
36
Options Example
07:51
37
All Layouts
06:20
38
Height
04:36
39
About Page
09:53
40
Hero Page
06:18
41
Gatsby and GraphQL Intro
03:21
42
Gatsby DataLayer in a Nutshell
01:42
43
GraphiQL Interface
06:16
44
siteMetadata
05:40
45
First Query
09:14
46
Explorer
02:06
47
Static Query vs Page Query
01:27
48
useStaticQuery Hook - Code Exporter
06:17
49
useStaticQuery, graphql - From Scratch
10:32
50
Field Alias
03:02
51
Query Keyword, Name and Gatsby Clean
03:14
52
Page Query
07:02
53
Install SOURCE-FILESYSTEM Plugin
10:14
54
allFile - Field
06:18
55
Query Arguments
08:14
56
Static Path Fix
01:24
57
file - Field
03:23
58
sourceInstanceName - Argument
02:09
59
Gallery Setup
03:52
60
gatsbyImageData - Field
08:10
61
Render Gallery
11:46
62
getImage - Helper Function
04:34
63
Local vs External Data
01:28
64
Headless CMS
02:00
65
Contentful Info
00:49
66
Setup Contentful Account
03:38
67
Content-Type
06:54
68
Content
07:30
69
Connect Gatsby - Contentful
05:01
70
ENV Variables
06:13
71
allContentfulRecipe - Field
07:10
72
AllRecipes Component
09:04
73
RecipesList Component
12:00
74
Featured Recipes
10:52
75
Utils Setup
04:58
76
Helper Function
07:41
77
TagsList
03:48
78
Tags Page
06:09
79
Recipe Template Page Setup
04:36
80
Recipe Template Page Walkthrough
09:04
81
Slugify
04:08
82
Query Variables
08:51
83
Recipe Template Query
07:23
84
Recipe Template Return
12:19
85
GATSBY-NODE.JS Setup
03:59
86
Create Tag Template Pages Programmatically
17:54
87
Tag Template Return
11:32
88
Possible Bug Fix
06:47
89
Fonts
05:48
90
Contact Form
04:37
91
FAVICON
02:08
92
SEO - Setup
06:18
93
SEO - Props
05:55
94
SEO - Complete
09:32
95
Netlify Info
00:54
96
Netlify - Drag and Drop
03:35
97
Netlify - Continuous Deployment
09:13
98
Webhooks
04:30
99
Intro
00:58
100
Install Starter
01:57
101
Project Overview
07:49
102
GATSBY-BROWSER
08:51
103
Navbar
08:32
104
Hero
15:24
105
Services
06:13
106
Setup Strapi
06:06
107
Content-Type
05:40
108
Content
05:01
109
Connect Strapi - Gatsby
04:40
110
Jobs Query
03:16
111
Single Job
08:11
112
Jobs Logic
05:18
113
Sort Jobs
02:30
114
Project Content-Type
04:55
115
Project Content
03:37
116
Project Query
03:47
117
Projects Component
07:42
118
Single Project Component
07:05
119
Projects Page
02:20
120
Setup Project Pages Programmatically
05:00
121
Project Template
06:11
122
About Page - Setup
04:54
123
About Page - Complete
06:14
124
Error Page and Footer
04:36
125
Contact Page
03:15
126
Sidebar Setup
07:54
127
Sidebar Logic
05:28
128
Initial Deploy
02:48
129
siteMetadata
05:57
130
SEO Component
15:34
131
Complete Project
08:28
132
Intro
00:30
133
Install
01:48
134
Project Overview
02:44
135
Plugins and main.css
02:59
136
Navbar
07:17
137
Sidebar
03:44
138
Sidebar Toggle
03:34
139
Hero
03:36
140
Footer
02:09
141
Error Page
02:21
142
Newsletter Info
04:52
143
Collect Form Values in Netlify
09:28
144
MDX Setup
04:50
145
Basic Markdown
05:27
146
Basic Styling
05:38
147
First React Component
04:02
148
Nice Text
04:35
149
Complete Components Info
05:53
150
Counter and Like Button
04:36
151
Posts Intro
05:50
152
Single Post Setup
05:01
153
Frontmatter
06:22
154
Home Query
08:30
155
Posts Component
05:11
156
Single Post Component
05:47
157
Posts Page
02:12
158
Create Post Pages Programmatically
09:01
159
Single Post Query
04:33
160
Post Template Complete
05:16
161
Categories Setup
13:05
162
Categories Query
04:06
163
Categories JSX
02:29
164
Banner About
04:44
165
Banner Recent
06:55
166
Banner Categories
08:02
167
Navbar Categories
03:03
168
Inline Images with Remark Images Plugin
14:01
169
Inline Images with GatsbyImage
09:51
170
Regular Video
10:48
171
External Video
07:43
172
MDX Wrapper Intro
06:27
173
Root MDX
09:14
174
First MDX Example
06:30
175
MDX - props / children
05:39
176
MDX - Component Example
05:55
177
MDX - H2
06:10
178
MDX - H4
02:37
179
Inline Code
05:43
180
MDX - Blockquote
09:54
181
Prism Setup
09:21
182
Prism Config
10:16
183
My Example
04:10
184
Intro
00:38
185
Bootstrap Starter
01:52
186
Starter Info
01:48
187
Global Styles with Styled-Components
06:55
188
Root Wrapper
03:39
189
Hero
05:34
190
Navbar
04:54
191
About and Title Components
06:16
192
Airtable Info
04:40
193
Airtable Setup
02:17
194
First Table
12:07
195
API Docs and Keys
03:11
196
Connect Airtable and Gatsby
09:04
197
Latest Project Query
04:07
198
Projects Component
09:29
199
Customers Table
04:58
200
Customers Query
06:19
201
Customers Slider Info
01:02
202
Survey Setup
09:46
203
Survey Fetch Items
08:27
204
Survey - Display Items
05:43
205
Survey - Update Items
07:57
206
Alternative Loading Setup
03:01
207
All Projects Query
03:25
208
Search Buttons - Setup
04:11
209
Search Buttons - Complete
09:40
210
Algolia - Intro
03:21
211
Algolia - Account Setup
06:16
212
Algolia - Plugin Setup
04:31
213
Algolia - Query Setup
11:17
214
Algolia - Basic Front-End
08:15
215
Algolia - SearchBox Component
03:07
216
Algolia - New Hits
07:04
217
Context API
11:29
218
Nested Links Info (sublinks)
10:25
219
Sidebar
11:38
220
Payments Page
03:58
221
Toggle Sidebar
04:36
222
Navbar - Sublinks
12:20
223
Tile Layout
07:55
Unlock unlimited learning

Get instant access to all 222 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to Gatsby Tutorial and Projects Course?

More courses by Udemy

Frequently asked questions

What prerequisites are necessary before taking the Gatsby course?
Before enrolling in the Gatsby course, students should have a foundational understanding of JavaScript and React. Familiarity with GraphQL is beneficial but not mandatory, as the course covers GraphiQL Interface and running queries with GraphQL. Basic knowledge of frontend development tools like Visual Studio Code will also be helpful.
What kind of projects will I build during the course?
Throughout the course, students will work on various projects including setting up a new Gatsby project, creating nested pages, and implementing a contact page. They will also build a gallery using the gatsbyImageData field, and explore the use of plugins such as SOURCE-FILESYSTEM to handle data efficiently.
Who is the target audience for this course?
The course is designed for frontend developers who want to enhance their skills in static site generation using Gatsby. It is suitable for those who are familiar with React and wish to explore its integration with GraphQL and other modern frontend tools. Developers aiming to optimize site performance and developer experience will find this course particularly useful.
What specific tools and platforms will be covered in the course?
The course covers a range of tools and platforms including Gatsby CLI for project setup, Visual Studio Code for development, and GraphiQL for interfacing with GraphQL. Students will also gain experience with CSS methodologies, styled-components, and various Gatsby plugins such as SOURCE-FILESYSTEM.
How does the depth and scope of this course compare to other Gatsby courses?
This course offers a comprehensive exploration of Gatsby, encompassing 223 lessons that cover topics from basic project setup to advanced data handling with GraphQL. Unlike some introductory courses, it delves into specific features like the useStaticQuery hook, static and page queries, and gatsbyImageData field, providing a thorough understanding of Gatsby's capabilities.
What topics are not covered in this course?
The course does not cover server-side rendering or deploying Gatsby sites to production environments. While it provides a solid foundation in static site generation and frontend development, it does not focus on backend development or integration with external APIs beyond basic GraphQL queries.
What is the expected time commitment for completing the course?
Given the extensive range of 223 lessons, students should anticipate dedicating a significant amount of time to complete the course. While the total runtime is unspecified, learners should plan for a commitment that allows for both watching the lessons and engaging in hands-on projects to fully grasp the concepts taught.