Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2021-03-30 19:14:22
30-Day Money-Back Guarantee
IT & Software Other IT & Software Gatsby.js

Gatsby V3 Tutorial and Projects Course

Create Blazingly Fast Websites with latest version of Gatsby
Bestseller
Rating: 4.7 out of 54.7 (1,204 ratings)
11,132 students
Created by John Smilga
Last updated 4/2021
English
English [Auto], French [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Create Blazingly Fast Websites/Projects with Gatsby V 3.0
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.

With the new Gatsby 3.0, create blazing fast web experiences that integrate your favorite services and content. Build e-commerce sites, landing pages, blogs and more in minutes.

Go from idea to production in literal minutes with a 10x developer experience. Gatsby is built on popular, proven tech like React and GraphQL, has loads of tutorials and starter templates, and over 2500 plugins that can help integrate all of your favorite web services.

Gatsby loads only critical 1 parts of the page, exactly when the visitor needs it, and not a second sooner. Once loaded, Gatsby prefetches resources 2 for other pages so that clicking on the site feels buttery smooth and responsive. Everything is statically generated at runtime - so your site loads as fast as possible.

Who this course is for:

  • Everyone Interested in Building Blazingly Fast Static Websites With Gatsby

Featured review

Lauralee Forbush Flores
Lauralee Forbush Flores
58 courses
3 reviews
Rating: 5.0 out of 59 months ago
I've taken a number of gatsby courses and this is by far the best. At the beginning of the course each concept is clearly explained and I understand and am more confident now. It also makes it really easy to jump back and review one topic at a time instead of hunting around for that specific part. Really good course not only in content but also in structure.

Course content

8 sections • 252 lectures • 25h 10m total length

  • Preview01:50
  • Preview00:42
  • Course Requirements
    01:41

  • Video Blur Fix
    01:37
  • Course Review
    00:32
  • Visual Studio Code
    00:53
  • Intro
    01:27
  • Install gatsby-cli
    02:00

  • Setup New Project
    05:38
  • Project Structure
    14:35
  • First Page
    08:44
  • Error Page
    02:35
  • Nested Pages
    03:40
  • Links
    06:40
  • Navbar
    05:05
  • Layout Component
    09:18
  • CSS Info
    01:10
  • Inline CSS
    01:40
  • Global CSS
    05:34
  • CSS Naming Issues
    03:49
  • CSS Modules
    10:14
  • Styled-Components
    12:47
  • House Cleaning
    07:42
  • Styles
    04:32
  • Footer
    03:26
  • Error Page
    01:07
  • Contact Page
    06:07
  • Assets and Icons
    07:11
  • Navbar Setup
    08:55
  • Navbar Functionality
    04:40
  • Gatsby Image Info
    03:39
  • Sandbox Setup
    06:06
  • Install Plugin
    03:39
  • Static Image Setup
    07:26
  • Shared Props and Options
    04:39
  • Options Example
    07:50
  • All Layouts
    06:19
  • Height
    04:35
  • About Page
    09:52
  • Hero Page
    06:17
  • Gatsby and GraphQL Intro
    03:20
  • Gatsby DataLayer in a Nutshell
    01:41
  • GraphiQL Interface
    06:15
  • siteMetadata
    05:39
  • First Query
    09:13
  • Explorer
    02:05
  • Static Query vs Page Query
    01:26
  • useStaticQuery Hook - Code Exporter
    06:16
  • useStaticQuery, graphql - From Scratch
    10:31
  • Field Alias
    03:01
  • Query Keyword, Name and Gatsby Clean
    03:13
  • Page Query
    07:01
  • Install SOURCE-FILESYSTEM Plugin
    10:13
  • allFile - Field
    06:17
  • Query Arguments
    08:13
  • Static Path Fix
    01:23
  • file - Field
    03:22
  • sourceInstanceName - Argument
    02:08
  • Gallery Setup
    03:51
  • gatsbyImageData - Field
    08:09
  • Render Gallery
    11:45
  • getImage - Helper Function
    04:33
  • Local vs External Data
    01:27
  • Headless CMS
    01:59
  • Contentful Info
    00:48
  • Setup Contentful Account
    03:37
  • Content-Type
    06:53
  • Content
    07:29
  • Connect Gatsby - Contentful
    05:00
  • ENV Variables
    06:12
  • allContentfulRecipe - Field
    07:09
  • AllRecipes Component
    09:03
  • RecipesList Component
    11:59
  • Featured Recipes
    10:51
  • Utils Setup
    04:57
  • Helper Function
    07:40
  • TagsList
    03:47
  • Tags Page
    06:08
  • Recipe Template Page Setup
    04:35
  • Recipe Template Page Walkthrough
    09:03
  • Slugify
    04:07
  • Query Variables
    08:50
  • Recipe Template Query
    07:22
  • Recipe Template Return
    12:18
  • GATSBY-NODE.JS Setup
    03:58
  • Create Tag Template Pages Programmatically
    17:53
  • Tag Template Return
    11:31
  • Possible Bug Fix
    06:46
  • Fonts
    05:47
  • Contact Form
    04:36
  • FAVICON
    02:07
  • SEO - Setup
    06:17
  • SEO - Props
    05:54
  • SEO - Complete
    09:31
  • Netlify Info
    00:53
  • Netlify - Drag and Drop
    03:34
  • Netlify - Continuous Deployment
    09:12
  • Webhooks
    04:29
  • Preview00:57
  • Starter Files
    00:08

  • Install Starter
    01:56
  • Project Overview
    07:48
  • GATSBY-BROWSER
    08:50
  • Navbar
    08:31
  • Hero
    15:23
  • Services
    06:12
  • Setup Strapi
    06:05
  • Content-Type
    05:39
  • Content
    05:00
  • Connect Strapi - Gatsby
    04:39
  • Jobs Query
    03:15
  • Single Job
    08:10
  • Jobs Logic
    05:17
  • Sort Jobs
    02:29
  • Project Content-Type
    04:54
  • Project Content
    03:36
  • Project Query
    03:46
  • Projects Component
    07:41
  • Single Project Component
    07:04
  • Projects Page
    02:19
  • Setup Project Pages Programmatically
    04:59
  • Project Template
    06:10
  • About Page - Setup
    04:53
  • About Page - Complete
    06:13
  • Error Page and Footer
    04:35
  • Contact Page
    03:14
  • Sidebar Setup
    07:53
  • Sidebar Logic
    05:27
  • Initial Deploy
    02:47
  • siteMetadata
    05:56
  • SEO Component
    15:33
  • Complete Project
    08:27
  • Source Code
    00:02

  • Preview05:42
  • Preview00:07
  • Starter Project
    02:52
  • Setup Overview
    04:27
  • Navbar
    10:59
  • Sidebar
    03:43
  • Sidebar Toggle
    03:33
  • 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
  • Course Update!!!
    00:07
  • 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

  • Old Content
    00:03

  • Images Setup
    02:20
  • source-filesystem Plugin
    05:51
  • allFile Field
    06:41
  • Arguments
    09:09
  • File Field
    03:34
  • sourceInstanceName
    04:19
  • Gatsby Image Install
    02:32
  • Gatsby Image Overview
    05:30
  • Gatsby Image Query
    05:26
  • Images Example Setup
    08:09
  • Images Example Complete
    10:50
  • Images Example Showcase
    07:55
  • max-width
    05:13

Instructor

John Smilga
Instructor
John Smilga
  • 4.7 Instructor Rating
  • 7,485 Reviews
  • 57,408 Students
  • 7 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.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.