Gatsby Tutorial and Projects Course

Gatsby Tutorial and Projects Course
Gatsby Tutorial and Projects Course
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 35 Hours | 22.0 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

Backroads Tutorial Project
7 Section Intro
8 Project Intro
9 Setup Files
10 Bootstrap Gatsby Application
11 Folder Structure
12 Creating Pages
13 Gatsby Link Component
14 Layout Component
15 Styling Intro
16 Inline CSS
17 Global CSS
18 Component CSS
19 CSS Module
20 Bootstrap
21 Gatsby Config and SASS
22 Project Global CSS
23 React-Icons and Constants
24 Navbar
25 Footer
26 Simple Hero
27 Banner
28 Error Page
29 CSS Fix
30 Styled Components Intro
31 Styled Components Basics
32 Props With Styled Components
33 Title Component
34 Alternate Syntax
35 About Section
36 Services Section
37 Hosting Intro
38 Drag and Drop
39 Continuous Deployment
40 Gatsby and GraphQL Intro
41 Gatsby DataLayer in a Nutshell
42 GraphiQL Interface
43 siteMetadata
44 First Query
45 Render Intro
46 useStaticQuery Hook
47 External Variables
48 Query Keyword
49 StaticQuery
50 PageQuery
51 gatsby-source-filesystem
52 allFile field
53 Arguments
54 file field
55 gatsby-image plugin setup
56 gatsby-image Overview
57 Query Images with gatsby-image
58 Gatsby-Image Example
59 Gatsby-Image Fluid Details
60 About Image Fix
61 Background-Image-Plugin
62 Setup Home Page Background
63 StyledHero Component Details
64 Adding Background Images To All Pages
65 Transition Link Plugin
66 Contact Page
67 Adding Labels
68 FormSpree Service
69 External Data Intro
70 Headless CMS Intro
71 Contentful Intro
72 Contentful Interface
73 Content Model
74 Content
75 Connect To Contentful
76 env variables
77 Prima’s GraphQL Playground Intro
78 Install Prisma’s GraphQL Playground
79 Setup Tours Queries
80 Featured Tours Component
81 Featured Tours Fixes
82 Tour Component
83 Tours Component
84 Simple Default Props
85 Image Default Props
86 Creating Template
87 gatsby-node
88 Query Variables
89 Single Tour Query
90 Template Setup
91 Single Tour Page
92 Single Day Component
93 Blogs Intro
94 Blogs Contentful Setup
95 Posts Query
96 Posts Query Arguments
97 BlogList Component
98 Blog Card Component
99 Setup Blog Pages
100 Single Blog Query
101 Blog Template Setup
102 Rich Text Setup
103 Render Images in Rich Text Field
104 Render Another Post in Rich Text Field
105 Pagination Setup
106 Blogs Template Setup
107 Create Pages
108 Blog List Template
109 Numbering
110 Prev and Next Links
111 SEO Setup
112 SEO Options
113 Basic SEO
114 Query siteMetadata
115 Twitter Cards
116 Facebook Cards
117 Adding SEO To All Pages
118 sitemap and robots.txt
119 Shared Hosting

Gatsby MDX Blog Project
120 Intro
121 Setup Files
122 Bootstrap Application
123 Folder Structure
124 Layout Component
125 Mdx Install
126 Create First MDX
127 Style Code Block
128 Add Counter
129 Getting Images
130 Setting Up Posts
131 FrontMatter
132 Plugins
133 allMdx Query
134 Arguments
135 Component Setup
136 Page Query
137 Post List
138 Post Card
139 Image Height CSS
140 Post Template Structure
141 Slug Query
142 Create Pages for Posts
143 Single Post Query
144 Post Template Complete
145 Inline Images

Coffee Shop Project
146 Intro
147 Workspace Setup
148 Setup Files and Future Resources
149 Spring Cleaning
150 Project Coffee Cup Icon
151 Adding Bootstrap
152 Adding React Icons
153 Netlify – Github – Pipeline Setup
154 Netlify – Github – Pipeline Completed
155 Navbar Component
156 Basic CSS
157 Netlify-Github Pipeline Revisited
158 Background Image Component
159 Info Section and Title Component
160 Footer Component
161 About Page
162 Contentful Intro
163 Contentful Setup
164 Content Model Setup
165 Add Content Items
166 Connect Gatsby Application to Contentful
167 Creating Build Variables on Netlify
168 Resources Folder Details
169 Coffe Item GraphQL Query
170 Menu Component Initial Setup
171 Display Coffee Items
172 Filter Categories
173 Adding Product Content Model and Extra Category
174 Testing Product Query
175 Rendering Products
176 Contact Section
177 Add Formspree Service
178 Snipcart Intro
179 Connect Gatsby to Snipcart
180 Snipcart Setup
181 Testing Snipcart
182 Webhooks
183 Finished Project Source Code

Restaurant Project
184 Intro
185 Workspace Setup
186 Setup Video
187 Install Gatsby
188 Gatsby Folder Structure
189 Deploy On Netlify
190 Project Spring Cleaning
191 Use CSS in Gatsby
192 Use Bootsrap in Gatsby
193 Use SASS in Gatsby
194 Use Styled-Components in Gatsby
195 Use React-Icons in Gatsby
196 Navbar Component
197 Navbar Component State and Methods
198 Navbar Header Component
199 Styled-Components Setup
200 Navbar Links Component
201 Navbar Links CSS
202 Navbar Links Screen Size
203 Navbar Icons Component
204 Pages Setup
205 Push To Github/Deploy on Netlify
206 Home Header Component
207 Page Header Component
208 Styled Components Extension
209 Banner Component
210 Banner Button
211 Quick Info Section
212 Section Title Component
213 Section Button
214 Quick Info Section Completed
215 Footer Component
216 Footer Component Bug Fix
217 Gatsby Starter Project
218 Gatsby Image Plugin
219 Gallery Section Basics
220 Gallery Section StaticQuery
221 Gallery Section Request Multiple Images
222 Gallery Section CSS Grid
223 Gallery Section Request Multiple Images in one Query
224 Gallery Section Modified
225 Contenful Service Setup
226 Access Data
227 Environment Variables
228 Menu Component
229 Product Component and Netlify/Contentful Hooks

Gatsby Tutorial Only
230 Introduction
231 What is Gatsby?
232 What is Contentful?
233 What is Netlify?
234 Install Gatsby
235 Folder Structure Basics
236 Folder Structure Source Folder
237 Inline CSS – Global CSS
238 Add SASS
239 Adding Bootstrap
240 Adding Styled Components
241 Styled Components – Global Styles
242 Icons – React Icons
243 Create Pages
244 Links
245 Creating Components
246 GraphQL Intro
247 Gatsby Data Layer in a Nutshell
248 GraphiQL Interface
249 First Query – Get Site MetaData
250 Second Query – Get all Images
251 Query Arguments
252 StaticQuery
253 Layout Component
254 PageQuery
255 Basic Image
256 Gatsby image-plugin
257 Fixed Images
258 Fluid Images
259 Image File
260 Contentful Intro
261 Create Products in Contentful
262 Connecting To Contentful
263 Environment Variables
264 GraphiQL Contentful
265 Display Contentful Products
266 Create Product Template
267 Create Pages Intro
268 Create Pages
269 GraphQL Query Variables
270 Complete Product Template
271 Deploy On Netlify
272 Site Changes/ Hooks
273 Finished Project Code