Gatsby Tutorial and Projects Course

21h 48m 56s
English
Paid

Course 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.

Read more about the course

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

Watch Online

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

Watch Online Gatsby Tutorial and Projects Course

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Master Gatsby (Master Package)

Master Gatsby (Master Package)

Sources: wesbos
Building modern websites is tough. Preloading, routing, compression, critical CSS, caching, scaling and bundlers all make for blazing fast websites, but extra development and to...
11 hours 57 minutes 6 seconds