Gatsby Tutorial and Projects Course

Gatsby Tutorial and Projects Course
Gatsby Tutorial and Projects Course
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 48 Hours | 27.3 GB

Create Blazingly Fast Websites with Gatsby

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.

What you’ll learn

  • Create Blazingly Fast Websites/Projects with Gatsby
Table of Contents

Course Info
1 Gatsby Intro
2 Course Info
3 Course Requirements
4 Video Blur Fix
5 Course Review
6 VS STUDIO CODE SETUP

Gatsby Tutorial
7 Tutorial Info
8 Global CSS
9 Naming Issue
10 CSS Modules
11 Styled Components
12 Gatsby and GraphQL Intro
13 Gatsby DataLayer in a Nutshell
14 GraphiQL Interface
15 siteMetadata
16 First Query
17 Explorer Example
18 Install
19 Render Intro
20 Examples Setup
21 Code Exporter – useStaticQuery
22 useStaticQuery and graphql
23 Field Alias
24 Query Keyword and Name
25 StaticQuery Component
26 PageQuery
27 Images Setup
28 gatsby-source-filesystem Plugin Install
29 Folder Structure
30 allFile field
31 Query Arguments
32 file field
33 sourceInstanceName
34 Install gatsby-image
35 gatsby-image Overview
36 gatsby-image Query
37 Render gatsby-image setup
38 Render gatsby-image
39 Gatsby Image Optimizations
40 Create Pages
41 maxWidth parameter
42 Data Intro
43 Local Data VS External Data
44 Headless CMS Info
45 Contentful Info
46 Contentful Interface
47 Content-Type
48 Content
49 Connect To Contentful
50 Products Query
51 Link Component
52 Products Page
53 Products Page CSS
54 Nested Pages
55 Product Template
56 Slug Query
57 Gatsby-Node
58 Slug Info
59 Single Product Query
60 Query Variables
61 Product Template Complete
62 Navbar
63 Product Template CSS
64 Docs
65 ENV VARIABLES
66 gatsby build
67 Drag and Drop
68 Continuous Deployment
69 Webhooks
70 Layout Component
71 CSS Intro
72 Inline CSS

Portfolio Project
73 Intro
74 Strapi Setup
75 First Content-Type
76 First Content
77 Connect Gatsby-Strapi
78 Project Backend
79 Jobs Query
80 Jobs Component
81 Projects Content-Type
82 Projects Content
83 Projects Query
84 Starter Project
85 Projects Setup
86 Project List
87 Project Component
88 Projects Page
89 Blog Content-Type
90 Blog Content
91 Blog Query
92 Blog List
93 Blog Component
94 Blog Page
95 Dev Setup
96 Create Blog Pages Programmatically
97 Blog Template
98 Image in Markdown
99 Strapi-Claudinary
100 Prop-Types
101 Footer
102 Sidebar
103 Sidebar Toggle
104 Sidebar Animation
105 Error Page
106 Setup Info
107 About Page Intro
108 About Page Content-Type and Data
109 About Page
110 Contact Page
111 Formspree
112 gatsby-browser.js
113 Google Fonts
114 Netlify Deploy
115 SEO Intro
116 SEO Alternatives
117 Navbar
118 SEO Basic Setup
119 SEO Query
120 SEO – All Pages
121 sitemap Plugin
122 Twitter Cards
123 Finished Project
124 Hero Image Query
125 Hero
126 Services and Title
127 Strapi Info

MDX Blog
128 Intro
129 Error Page
130 Newsletter Page Setup
131 Collect Form Values in Netlify
132 MDX Intro
133 Basic Markdown
134 Basic Styling
135 First React Component
136 Nice Text
137 Complete Components Info
138 Counter and Like Button
139 Starter Project
140 Posts Intro
141 Single Post Setup
142 Frontmatter
143 Home Page Query
144 Posts Component
145 Single Post Component
146 Posts Page
147 Create Post Pages Programmatically
148 Single Post Query
149 Single Post Page JSX
150 Starter Project
151 Categories Setup
152 Categories Query
153 Categories JSX
154 Banner About
155 Banner Instagram
156 Banner Recent
157 Banner Categories
158 Navbar Categories
159 MDX – Inline Images
160 Video – RegularLocal
161 Setup Overview
162 Video – Iframe
163 MDX Wrapper Intro
164 Root MDX
165 First MDX Example
166 MDX – props children
167 MDX – Component Example
168 MDX – H2
169 MDX – H4
170 MDX – Inline Code
171 MDX – Blockquote
172 Navbar
173 Prism Setup
174 Prism Config
175 My Example
176 Favicon
177 Gatsby SEO
178 Finished Project
179 Sidebar
180 Sidebar Toggle
181 Hero
182 Footer

Backroads Tutorial Project
183 OLD PROJECT!!!
184 Layout Component
185 Rich Text Setup
186 Render Images in Rich Text Field
187 Render Another Post in Rich Text Field
188 Pagination Setup
189 Blogs Template Setup
190 Create Pages
191 Blog List Template
192 Numbering
193 Prev and Next Links
194 SEO Setup
195 Styling Intro
196 SEO Options
197 Basic SEO
198 Query siteMetadata
199 Twitter Cards
200 Facebook Cards
201 Adding SEO To All Pages
202 sitemap and robots.txt
203 Shared Hosting
204 Inline CSS
205 Global CSS
206 Component CSS
207 CSS Module
208 Bootstrap
209 Gatsby Config and SASS
210 Project Global CSS
211 React-Icons and Constants
212 Section Intro
213 Navbar
214 Footer
215 Simple Hero
216 Banner
217 Error Page
218 CSS Fix
219 Styled Components Intro
220 Styled Components Basics
221 Props With Styled Components
222 Title Component
223 Project Intro
224 Alternate Syntax
225 About Section
226 Services Section
227 Hosting Intro
228 Drag and Drop
229 Continuous Deployment
230 Gatsby and GraphQL Intro
231 Gatsby DataLayer in a Nutshell
232 GraphiQL Interface
233 siteMetadata
234 Setup Files
235 First Query
236 Render Intro
237 useStaticQuery Hook
238 External Variables
239 Query Keyword
240 StaticQuery
241 PageQuery
242 gatsby-source-filesystem
243 allFile field
244 Arguments
245 Bootstrap Gatsby Application
246 file field
247 gatsby-image plugin setup
248 gatsby-image Overview
249 Query Images with gatsby-image
250 Gatsby-Image Example
251 Gatsby-Image Fluid Details
252 About Image Fix
253 Background-Image-Plugin
254 Setup Home Page Background
255 StyledHero Component Details
256 Project Resources
257 Adding Background Images To All Pages
258 Transition Link Plugin
259 Contact Page
260 Adding Labels
261 FormSpree Service
262 Additional Headless CMS Info
263 External Data Intro
264 Headless CMS Intro
265 Contentful Intro
266 Contentful Interface
267 Folder Structure
268 Content Model
269 Content
270 Connect To Contentful
271 env variables
272 Project Resources
273 Prima’s GraphQL Playground Intro
274 Install Prisma’s GraphQL Playground
275 Setup Tours Queries
276 Featured Tours Component
277 Featured Tours Fixes
278 Creating Pages
279 Tour Component
280 Tours Component
281 Simple Default Props
282 Image Default Props
283 Creating Template
284 gatsby-node
285 Query Variables
286 Single Tour Query
287 Template Setup
288 Single Tour Page
289 Gatsby Link Component
290 Single Day Component
291 Blogs Intro
292 Blogs Contentful Setup
293 Posts Query
294 Posts Query Arguments
295 BlogList Component
296 Blog Card Component
297 Setup Blog Pages
298 Single Blog Query
299 Blog Template Setup

Gatsby MDX Blog Project
300 OLD PROJECT!!!
301 gatsby-plugin-mdx
302 Style Code Block
303 Add Counter
304 Getting Images
305 Setting Up Posts
306 FrontMatter
307 Plugins
308 allMdx Query
309 Arguments
310 Component Setup
311 Intro
312 Page Query
313 Post List
314 Post Card
315 Image Height CSS
316 gatsby-plugin-mdx
317 Post Template Structure
318 Slug Query
319 Create Pages for Posts
320 gatsby-plugin-mdx
321 Single Post Query
322 Setup Files
323 gatsby-plugin-mdx
324 Post Template Complete
325 Inline Images
326 Bootstrap Application
327 Folder Structure
328 Layout Component
329 gatsby-plugin-mdx
330 Mdx Install
331 Create First MDX

Personal Site Project – Using Strapi
332 OLD PROJECT!!!
333 GraphQl query
334 Courses
335 Single Course Component
336 Home Page
337 Deploy Gotchas
338 Single Project Setup
339 Additional Scripts
340 Project Intro
341 Project Starter
342 Setup Front-End
343 Starter Project Overview – OPTIONAL!!!!!
344 Setup Strapi(Back-End)
345 Content-Type Setup
346 Add Content
347 Connect to Strapi

Coffee Shop Project
348 OLD PROJECT!!!
349 Netlify – Github – Pipeline Completed
350 Navbar Component
351 Basic CSS
352 Netlify-Github Pipeline Revisited
353 Background Image Component
354 Info Section and Title Component
355 Footer Component
356 About Page
357 Contentful Intro
358 Contentful Setup
359 Intro
360 Content Model Setup
361 Add Content Items
362 Connect Gatsby Application to Contentful
363 Creating Build Variables on Netlify
364 Resources Folder Details
365 Coffe Item GraphQL Query
366 Menu Component Initial Setup
367 Display Coffee Items
368 Filter Categories
369 Adding Product Content Model and Extra Category
370 Setup Files and Future Resources
371 Testing Product Query
372 Rendering Products
373 Contact Section
374 Add Formspree Service
375 Snipcart Intro
376 Connect Gatsby to Snipcart
377 Snipcart Setup
378 Testing Snipcart
379 Webhooks
380 Finished Project Source Code
381 Bootstrap New Gatsby Application
382 Spring Cleaning
383 Project Coffee Cup Icon
384 Adding Bootstrap
385 Adding React Icons
386 Netlify – Github – Pipeline Setup

Restaurant Project
387 OLD PROJECT!!!
388 Use Bootsrap in Gatsby
389 Use SASS in Gatsby
390 Use Styled-Components in Gatsby
391 Use React-Icons in Gatsby
392 Navbar Component
393 Navbar Component State and Methods
394 Navbar Header Component
395 Styled-Components Setup
396 Navbar Links Component
397 Navbar Links CSS
398 Intro
399 Navbar Links Screen Size
400 Navbar Icons Component
401 Pages Setup
402 Push To GithubDeploy on Netlify
403 Home Header Component
404 Page Header Component
405 Styled Components Extension
406 Banner Component
407 Banner Button
408 Quick Info Section
409 Setup Video
410 Section Title Component
411 Section Button
412 Quick Info Section Completed
413 Footer Component
414 Footer Component Bug Fix
415 Gatsby Starter Project
416 Gatsby Image Plugin
417 Gallery Section Basics
418 Gallery Section StaticQuery
419 Gallery Section Request Multiple Images
420 Installation Details
421 Gallery Section CSS Grid
422 Gallery Section Request Multiple Images in one Query
423 Gallery Section Modified
424 Contenful Service Setup
425 Access Data
426 Environment Variables
427 Menu Component
428 Product Component and NetlifyContentful Hooks
429 Install Gatsby
430 Gatsby Folder Structure
431 Deploy On Netlify
432 Project Spring Cleaning
433 Use CSS in Gatsby