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

Join premium to watch
Go to premium
# Title Duration
1 Gatsby Intro 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

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