Gatsby Tutorial and Projects Course

Name: Gatsby Tutorial and Projects Course
Brand: Udemy
SKU: course:2176554
Rating: 4.7 (1054 reviews)

Create Blazingly Fast Websites with Gatsby

Bestseller

(1,054 ratings)

10,357 students

Created by John Smilga

Last updated 1/2021

English

English [Auto], French [Auto]

30-Day Money-Back Guarantee

What you'll learn

Create Blazingly Fast Websites/Projects with Gatsby

Curated for the Udemy for Business collection

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

66 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.

5 sections • 236 lectures • 22h 12m total length

Preview02:02
Course Info
00:35
Course Requirements
01:31
Video Blur Fix
01:37
Course Review
00:32
VS STUDIO CODE SETUP
02:39

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
Source Code
00:22

Preview02:32
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
Important Update!!!!
00:08
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
Important Update!!!!
00:30
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
Important Update!!!
00:10
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

Preview05:42
Preview00: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

Preview03:17
About Project
03:36
Starter Project
00:09
Get Starter Project
02:16
Setup Info
02:54
Global Styles with Styled-Components
06:54
Root Wrapper
03:38
Hero Setup
05:03
Background Image Query
06:58
Background Image Setup
12:05
Background Image Bug Fix
00:41
Navbar Component
04:53
About and Title Components
06:15
Airtable Info
04:39
Airtable Setup
02:16
First Table
12:06
API Docs and Keys
03:10
API KEYS
00:20
Connect Airtable - Gatsby
09:03
Latest Projects Query
07:29
Projects Component
13:37
Customers - Table
04:57
Customers - Query
05:38
Customers - Slider Setup
14:42
Customers - Slider Complete
10:44
OPTIONAL!!!!
00:04
Hero - Slider Setup
06:46
Hero - Slider Complete
03:38
Hero - Slider Dots
02:58
Survey Setup
09:49
Survey - Fetch Items
08:26
Survey - Display Items
05:42
Survey - Update Values
07:56
Search Buttons - Setup
07:30
Search Buttons - Complete
09:39
Algolia Intro
03:20
Algolia ENV VARIABLES
00:06
Algolia - Account Setup
06:15
Algolia - Plugin Setup
04:30
Algolia - Query Setup
17:24
Algolia - Basic Front End Setup
08:14
Algolia - SearBox Component
03:06
Algolia - New Hits Component
06:52
Context API
11:28
Nested Links Info (sublinks)
10:24
Sidebar
11:37
Payments Page
03:57
Toggle Sidebar
04:35
Navbar - Sublinks
12:19
Tile Layout
15:47

John Smilga

Instructor

4.7 Instructor Rating
6,209 Reviews
53,581 Students
6 Courses

Hello, I am John Smilga and I am a web developer. I live and work in Los Angeles, CA. I spend most of my day, experimenting with HTML, CSS and Javascript (and it's endless list of frameworks). I enjoy coding and the challenge of learning something new everyday. You can also find me at youtube channel Coding Addict.

This course includes:

Gatsby Tutorial and Projects Course

What you'll learn

Requirements

Description

Who this course is for:

Featured review

Course content

Instructor

This course includes:

Gatsby Tutorial and Projects Course

What you'll learn

Requirements

Description

Who this course is for:

Featured review

Course content

Course Info6 lectures • 9min

Gatsby Tutorial67 lectures • 5hr 22min

Portfolio Project58 lectures • 5hr 16min

MDX Blog55 lectures • 5hr 56min

Design Project with Airtable50 lectures • 5hr 30min

Instructor