2020-06-02 02:04:20
Gatsby Tutorial and Projects Course
8,384 students enrolled
Gatsby Tutorial and Projects Course
Create Blazingly Fast Websites with Gatsby
Bestseller
8,385 students enrolled
Created by
John Smilga
Last updated 6/2020
English
English [Auto-generated],
French [Auto-generated]
Current price: $13.99
Original price: $19.99
Discount:
30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
- 48 hours on-demand video
- 21 articles
- 104 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Training 5 or more people?
Get your team access to 4,000+ top Udemy courses anytime, anywhere.
Try Udemy for Business
What you'll learn
- Create Blazingly Fast Websites/Projects with Gatsby
Requirements
- Basic Knowledge of React
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.
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.
Who this course is for:
- Everyone Interested in Building Blazingly Fast Static Websites With Gatsby
Featured review
Brett Bell
(
63 courses,
7 reviews
)
a year ago
A straightforward and to the point tutorial of how to build sites with Gatsby. Includes two projects to see how it works in the real world.
Glad he used services like Nelify and Contentful to show how you can get up and running quickly.
You will want to be familiar with React before taking this course, as John assumes you have that background.
Course content
Expand all
433 lectures
47:55:21
+
–
Course Info
6 lectures
08:56
Preview
02:02
Course Info
00:35
Course Requirements
01:31
Video Blur Fix
01:37
Course Review
00:32
VS STUDIO CODE SETUP
02:39
+
–
Gatsby Tutorial
66 lectures
05:21:56
Tutorial Info
00:22
Install
05:46
Folder Structure
08:10
Create Pages
08:07
Link Component
06:21
Navbar
04:19
Layout Component
10:10
CSS Intro
01:13
Inline CSS
00:56
Global CSS
03:44
Naming Issue
02:43
CSS Modules
07:41
Styled Components
09:43
Gatsby and GraphQL Intro
03:39
Gatsby DataLayer in a Nutshell
01:41
GraphiQL Interface
06:15
siteMetadata
04:21
First Query
06:05
Explorer Example
01:37
Render Intro
00:51
Examples Setup
01:24
Code Exporter - useStaticQuery
04:13
useStaticQuery and graphql
10:18
Field Alias
02:47
Query Keyword and Name
01:32
StaticQuery Component
05:42
PageQuery
06:12
Images Setup
02:20
gatsby-source-filesystem Plugin Install
05:51
allFile field
06:41
Query Arguments
09:09
file field
03:34
sourceInstanceName
04:19
Install gatsby-image
02:32
gatsby-image Overview
05:30
gatsby-image Query
05:26
Render gatsby-image setup
08:09
Render gatsby-image
10:50
Gatsby Image Optimizations
07:55
maxWidth parameter
05:13
Data Intro
02:14
Local Data VS External Data
01:48
Headless CMS Info
02:04
Contentful Info
01:10
Contentful Interface
03:41
Content-Type
04:36
Content
06:29
Connect To Contentful
05:55
Products Query
06:11
Products Page
11:41
Products Page CSS
06:13
Nested Pages
05:05
Product Template
02:17
Slug Query
01:58
Gatsby-Node
15:13
Slug Info
02:22
Single Product Query
02:03
Query Variables
03:12
Product Template Complete
07:21
Product Template CSS
01:22
Docs
01:29
ENV VARIABLES
06:33
gatsby build
02:51
Drag and Drop
03:08
Continuous Deployment
07:42
Webhooks
03:57
+
–
Portfolio Project
55 lectures
05:14:56
Starter Project
00:07
Dev Setup
02:32
Setup Info
13:12
Navbar
07:07
Hero Image Query
04:18
Hero
09:26
Services and Title
08:30
Strapi Info
02:01
Strapi Setup
04:49
First Content-Type
10:25
First Content
08:06
Connect Gatsby-Strapi
05:08
Project Backend
04:11
Jobs Query
04:54
Jobs Component
18:15
Projects Content-Type
08:06
Projects Content
04:31
Projects Query
05:30
Projects Setup
06:10
Project List
07:30
Project Component
07:41
Projects Page
03:57
Blog Content-Type
05:33
Blog Content
07:14
Blog Query
05:46
Blog List
04:17
Blog Component
04:40
Blog Page
05:07
Create Blog Pages Programmatically
06:45
Blog Template
05:48
Image in Markdown
02:40
Strapi-Claudinary
08:23
Prop-Types
18:52
Footer
03:07
Sidebar
05:23
Sidebar Toggle
05:55
Sidebar Animation
02:16
Error Page
02:56
About Page Intro
02:39
About Page Content-Type and Data
05:00
About Page
09:03
Contact Page
04:40
Formspree
04:56
gatsby-browser.js
02:43
Google Fonts
02:52
Netlify Deploy
05:07
SEO Intro
03:41
SEO Alternatives
01:24
SEO Basic Setup
06:29
SEO Query
07:26
SEO - All Pages
06:23
sitemap Plugin
02:12
Twitter Cards
06:36
Finished Project
00:05
+
–
MDX Blog
55 lectures
05:55:59
Preview
00:07
Starter Project
02:52
Setup Overview
04:27
Navbar
10:59
Sidebar
03:43
Sidebar Toggle
03:35
Hero
09:06
Footer
02:08
Error Page
02:20
Newsletter Page Setup
04:51
Collect Form Values in Netlify
09:27
MDX Intro
04:57
Basic Markdown
05:26
Basic Styling
05:37
First React Component
04:01
Nice Text
04:34
Complete Components Info
05:52
Counter and Like Button
04:35
Posts Intro
05:49
Single Post Setup
05:00
Frontmatter
06:21
Home Page Query
09:45
Posts Component
07:34
Single Post Component
09:13
Posts Page
03:18
Create Post Pages Programmatically
09:00
Single Post Query
06:58
Single Post Page JSX
08:06
Categories Setup
13:04
Categories Query
06:50
Categories JSX
06:15
Banner About
09:35
Banner Instagram
07:54
Banner Recent
07:31
Banner Categories
08:01
Navbar Categories
03:02
MDX - Inline Images
14:00
Video - Regular/Local
10:47
Video - Iframe
07:42
MDX Wrapper Intro
06:26
Root MDX
09:13
First MDX Example
06:29
MDX - props / children
05:38
MDX - Component Example
05:54
MDX - H2
06:09
MDX - H4
02:36
MDX - Inline Code
05:42
MDX - Blockquote
09:53
Prism Setup
09:20
Prism Config
10:15
My Example
04:09
Favicon
02:07
Gatsby SEO
11:55
Finished Project
00:09
+
–
Backroads Tutorial Project
117 lectures
15:03:20
OLD PROJECT!!!
00:05
Section Intro
01:25
Project Intro
09:24
Setup Files
02:53
Bootstrap Gatsby Application
15:08
Project Resources
00:04
Folder Structure
11:44
Creating Pages
10:37
Gatsby Link Component
06:00
Layout Component
16:23
Styling Intro
03:47
Inline CSS
01:43
Global CSS
07:21
Component CSS
03:31
CSS Module
09:57
Bootstrap
04:48
Gatsby Config and SASS
15:13
Project Global CSS
10:39
React-Icons and Constants
14:19
Navbar
22:31
Footer
07:27
Simple Hero
07:30
Banner
07:46
Error Page
03:59
CSS Fix
05:36
Styled Components Intro
04:29
Styled Components Basics
09:43
Props With Styled Components
07:10
Title Component
13:56
Alternate Syntax
02:50
About Section
07:34
Services Section
08:24
Hosting Intro
00:46
Drag and Drop
05:43
Continuous Deployment
08:04
Gatsby and GraphQL Intro
03:40
Gatsby DataLayer in a Nutshell
01:42
GraphiQL Interface
07:18
siteMetadata
05:23
First Query
11:08
Render Intro
00:45
useStaticQuery Hook
08:44
External Variables
00:59
Query Keyword
00:57
StaticQuery
10:00
PageQuery
05:56
gatsby-source-filesystem
07:48
allFile field
06:24
Arguments
07:15
file field
05:28
gatsby-image plugin setup
03:20
gatsby-image Overview
06:29
Query Images with gatsby-image
07:31
Gatsby-Image Example
25:06
Gatsby-Image Fluid Details
09:06
About Image Fix
08:38
Background-Image-Plugin
14:58
Setup Home Page Background
08:18
StyledHero Component Details
05:29
Adding Background Images To All Pages
06:09
Transition Link Plugin
10:32
Contact Page
08:53
Adding Labels
01:08
FormSpree Service
04:17
Additional Headless CMS Info
00:16
External Data Intro
01:51
Headless CMS Intro
01:49
Contentful Intro
01:33
Contentful Interface
06:55
Content Model
07:04
Content
10:40
Connect To Contentful
09:15
env variables
13:26
Project Resources
00:11
Prima's GraphQL Playground Intro
05:05
Install Prisma's GraphQL Playground
02:44
Setup Tours Queries
11:53
Featured Tours Component
20:25
Featured Tours Fixes
01:28
Tour Component
12:53
Tours Component
17:27
Simple Default Props
13:10
Image Default Props
16:58
Creating Template
04:42
gatsby-node
22:09
Query Variables
10:06
Single Tour Query
06:02
Template Setup
14:58
Single Tour Page
20:39
Single Day Component
10:25
Blogs Intro
01:59
Blogs Contentful Setup
09:58
Posts Query
04:28
Posts Query Arguments
05:36
BlogList Component
07:39
Blog Card Component
06:01
Setup Blog Pages
08:03
Single Blog Query
06:02
Blog Template Setup
06:58
Rich Text Setup
03:10
Render Images in Rich Text Field
08:24
Render Another Post in Rich Text Field
08:38
Pagination Setup
09:23
Blogs Template Setup
05:33
Create Pages
14:52
Blog List Template
06:37
Numbering
09:21
Prev and Next Links
09:44
SEO Setup
05:14
SEO Options
00:49
Basic SEO
08:13
Query siteMetadata
08:37
Twitter Cards
09:23
Facebook Cards
05:47
Adding SEO To All Pages
06:17
sitemap and robots.txt
03:56
Shared Hosting
06:43
+
–
Gatsby MDX Blog Project
32 lectures
02:14:21
OLD PROJECT!!!
00:05
Intro
02:07
Setup Files
00:13
Bootstrap Application
03:54
Folder Structure
03:12
Layout Component
05:25
gatsby-plugin-mdx
00:10
Mdx Install
02:35
Create First MDX
05:58
gatsby-plugin-mdx
00:10
Style Code Block
04:07
Add Counter
06:21
Getting Images
01:41
Setting Up Posts
04:29
FrontMatter
06:11
Plugins
05:47
allMdx Query
05:46
Arguments
01:34
Component Setup
03:37
Page Query
04:09
Post List
04:55
Post Card
08:08
Image Height CSS
03:43
gatsby-plugin-mdx
00:06
Post Template Structure
05:08
Slug Query
01:16
Create Pages for Posts
12:05
gatsby-plugin-mdx
00:11
Single Post Query
09:22
gatsby-plugin-mdx
00:04
Post Template Complete
11:53
Inline Images
09:59
+
–
Personal Site Project - Using Strapi
16 lectures
01:31:57
OLD PROJECT!!!
00:05
Project Intro
02:33
Project Starter
00:04
Setup Front-End
02:38
Starter Project Overview - OPTIONAL!!!!!
09:05
Setup Strapi(Back-End)
07:23
Content-Type Setup
06:22
Add Content
05:34
Connect to Strapi
02:46
GraphQl query
07:14
Courses
14:05
Single Course Component
08:49
Home Page
05:17
Deploy Gotchas
03:47
Single Project Setup
09:29
Additional Scripts
06:46
+
–
Coffee Shop Project
39 lectures
04:47:58
OLD PROJECT!!!
00:05
Intro
04:48
Setup Files and Future Resources
00:32
Bootstrap New Gatsby Application
02:05
Spring Cleaning
04:58
Project Coffee Cup Icon
01:11
Adding Bootstrap
02:20
Adding React Icons
02:28
Netlify - Github - Pipeline Setup
02:15
Netlify - Github - Pipeline Completed
08:17
Navbar Component
28:47
Basic CSS
05:09
Netlify-Github Pipeline Revisited
05:25
Background Image Component
29:00
Info Section and Title Component
14:30
Footer Component
04:19
About Page
07:19
Contentful Intro
00:52
Contentful Setup
05:11
Content Model Setup
04:33
Add Content Items
07:37
Connect Gatsby Application to Contentful
09:57
Creating Build Variables on Netlify
04:05
Resources Folder Details
01:25
Coffe Item GraphQL Query
05:37
Menu Component Initial Setup
16:59
Display Coffee Items
12:06
Filter Categories
22:10
Adding Product Content Model and Extra Category
07:12
Testing Product Query
03:11
Rendering Products
18:48
Contact Section
09:13
Add Formspree Service
04:49
Snipcart Intro
02:11
Connect Gatsby to Snipcart
04:59
Snipcart Setup
12:18
Testing Snipcart
04:18
Webhooks
06:52
Finished Project Source Code
00:07
+
–
Restaurant Project
47 lectures
07:35:56
OLD PROJECT!!!
00:05
Intro
03:48
Setup Video
06:26
Installation Details
00:05
Install Gatsby
05:28
Gatsby Folder Structure
15:15
Deploy On Netlify
09:31
Project Spring Cleaning
07:16
Use CSS in Gatsby
07:46
Use Bootsrap in Gatsby
04:08
Use SASS in Gatsby
05:33
Use Styled-Components in Gatsby
14:54
Use React-Icons in Gatsby
03:58
Navbar Component
07:48
Navbar Component State and Methods
05:57
Navbar Header Component
11:51
Styled-Components Setup
14:36
Navbar Links Component
09:27
Navbar Links CSS
14:53
Navbar Links Screen Size
11:20
Navbar Icons Component
15:42
Pages Setup
03:55
Push To Github/Deploy on Netlify
03:59
Home Header Component
20:38
Page Header Component
11:39
Styled Components Extension
02:13
Banner Component
18:02
Banner Button
11:41
Quick Info Section
02:18
Section Title Component
18:41
Section Button
05:55
Quick Info Section Completed
08:52
Footer Component
17:19
Footer Component Bug Fix
00:33
Gatsby Starter Project
05:41
Gatsby Image Plugin
01:45
Gallery Section Basics
14:13
Gallery Section StaticQuery
13:17
Gallery Section Request Multiple Images
07:21
Gallery Section CSS Grid
16:05
Gallery Section Request Multiple Images in one Query
06:58
Gallery Section Modified
12:01
Contenful Service Setup
14:09
Access Data
09:30
Environment Variables
12:19
Menu Component
18:39
Product Component and Netlify/Contentful Hooks
22:26