English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 37 Hours | 20.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 Source Code
71 Layout Component
72 CSS Intro
73 Inline CSS
Portfolio Project
74 Intro
75 Strapi Setup
76 First Content-Type
77 First Content
78 Connect Gatsby-Strapi
79 Project Backend
80 Jobs Query
81 Jobs Component
82 Projects Content-Type
83 Projects Content
84 Projects Query
85 Starter Project
86 Projects Setup
87 Project List
88 Project Component
89 Projects Page
90 Blog Content-Type
91 Blog Content
92 Blog Query
93 Blog List
94 Blog Component
95 Blog Page
96 Dev Setup
97 Create Blog Pages Programmatically
98 Blog Template
99 Image in Markdown
100 Important Update!!!!
101 Strapi-Claudinary
102 Prop-Types
103 Footer
104 Sidebar
105 Sidebar Toggle
106 Sidebar Animation
107 Setup Info
108 Error Page
109 About Page Intro
110 About Page Content-Type and Data
111 About Page
112 Contact Page
113 Formspree
114 gatsby-browser.js
115 Google Fonts
116 Netlify Deploy
117 SEO Intro
118 Navbar
119 SEO Alternatives
120 SEO Basic Setup
121 SEO Query
122 SEO – All Pages
123 sitemap Plugin
124 Twitter Cards
125 Finished Project
126 Hero Image Query
127 Hero
128 Services and Title
129 Strapi Info
MDX Blog
130 Intro
131 Error Page
132 Newsletter Page Setup
133 Collect Form Values in Netlify
134 MDX Intro
135 Basic Markdown
136 Basic Styling
137 First React Component
138 Nice Text
139 Complete Components Info
140 Counter and Like Button
141 Starter Project
142 Posts Intro
143 Single Post Setup
144 Frontmatter
145 Home Page Query
146 Posts Component
147 Single Post Component
148 Posts Page
149 Create Post Pages Programmatically
150 Single Post Query
151 Single Post Page JSX
152 Starter Project
153 Categories Setup
154 Categories Query
155 Categories JSX
156 Banner About
157 Banner Instagram
158 Banner Recent
159 Banner Categories
160 Navbar Categories
161 MDX – Inline Images
162 Video – RegularLocal
163 Setup Overview
164 Video – Iframe
165 MDX Wrapper Intro
166 Root MDX
167 First MDX Example
168 MDX – props children
169 MDX – Component Example
170 MDX – H2
171 MDX – H4
172 MDX – Inline Code
173 MDX – Blockquote
174 Navbar
175 Prism Setup
176 Prism Config
177 My Example
178 Favicon
179 Gatsby SEO
180 Finished Project
181 Sidebar
182 Sidebar Toggle
183 Hero
184 Footer
Design Project with Airtable
185 Intro
186 About Project
187 Starter Project
188 Get Starter Project
189 Setup Info
190 Global Styles with Styled-Components
191 Root Wrapper
192 Hero Setup
193 Background Image Query
194 Background Image Setup
195 Background Image Bug Fix
196 Navbar Component
197 About and Title Components
198 Airtable Info
199 Airtable Setup
200 First Table
201 API Docs and Keys
202 API KEYS
203 Connect Airtable – Gatsby
204 Latest Projects Query
205 Projects Component
206 Customers – Table
207 Customers – Query
208 Customers – Slider Setup
209 Customers – Slider Complete
210 OPTIONAL!!!!
211 Hero – Slider Setup
212 Hero – Slider Complete
213 Hero – Slider Dots
214 Survey Setup
215 Survey – Fetch Items
216 Survey – Display Items
217 Survey – Update Values
218 Search Buttons – Setup
219 Search Buttons – Complete
220 Algolia Intro
221 Algolia ENV VARIABLES
222 Algolia – Account Setup
223 Algolia – Plugin Setup
224 Algolia – Query Setup
225 Algolia – Basic Front End Setup
226 Algolia – SearBox Component
227 Algolia – New Hits Component
228 Context API
229 Nested Links Info (sublinks)
230 Sidebar
231 Payments Page
232 Toggle Sidebar
233 Navbar – Sublinks
234 Tile Layout
Backroads Tutorial Project
235 OLD PROJECT!!!
236 Section Intro
237 Project Intro
238 Setup Files
239 Bootstrap Gatsby Application
240 Project Resources
241 Folder Structure
242 Creating Pages
243 Gatsby Link Component
244 Layout Component
245 Styling Intro
246 Inline CSS
247 Global CSS
248 Component CSS
249 CSS Module
250 Bootstrap
251 Gatsby Config and SASS
252 Project Global CSS
253 React-Icons and Constants
254 Navbar
255 Footer
256 Simple Hero
257 Banner
258 Error Page
259 CSS Fix
260 Styled Components Intro
261 Styled Components Basics
262 Props With Styled Components
263 Title Component
264 Alternate Syntax
265 About Section
266 Services Section
267 Hosting Intro
268 Drag and Drop
269 Continuous Deployment
270 Gatsby and GraphQL Intro
271 Gatsby DataLayer in a Nutshell
272 GraphiQL Interface
273 siteMetadata
274 First Query
275 Render Intro
276 useStaticQuery Hook
277 External Variables
278 Query Keyword
279 StaticQuery
280 PageQuery
281 gatsby-source-filesystem
282 allFile field
283 Arguments
284 file field
285 gatsby-image plugin setup
286 gatsby-image Overview
287 Query Images with gatsby-image
288 Gatsby-Image Example
289 Gatsby-Image Fluid Details
290 About Image Fix
291 Background-Image-Plugin
292 Setup Home Page Background
293 StyledHero Component Details
294 Adding Background Images To All Pages
295 Transition Link Plugin
296 Contact Page
297 Adding Labels
298 FormSpree Service
299 Additional Headless CMS Info
300 External Data Intro
301 Headless CMS Intro
302 Contentful Intro
303 Contentful Interface
304 Content Model
305 Content
306 Connect To Contentful
307 env variables
308 Project Resources
309 Prima’s GraphQL Playground Intro
310 Install Prisma’s GraphQL Playground
311 Setup Tours Queries
312 Featured Tours Component
313 Featured Tours Fixes
314 Tour Component
315 Tours Component
316 Simple Default Props
317 Image Default Props
318 Creating Template
319 gatsby-node
320 Query Variables
321 Single Tour Query
322 Template Setup
323 Single Tour Page
324 Single Day Component
325 Blogs Intro
326 Blogs Contentful Setup
327 Posts Query
328 Posts Query Arguments
329 BlogList Component
330 Blog Card Component
331 Setup Blog Pages
332 Single Blog Query
333 Blog Template Setup
334 Rich Text Setup
335 Render Images in Rich Text Field
336 Render Another Post in Rich Text Field
337 Pagination Setup
338 Blogs Template Setup
339 Create Pages
340 Blog List Template
341 Numbering
342 Prev and Next Links
343 SEO Setup
344 SEO Options
345 Basic SEO
346 Query siteMetadata
347 Twitter Cards
348 Facebook Cards
349 Adding SEO To All Pages
350 sitemap and robots
351 Shared Hosting
Resolve the captcha to access the links!