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.
Gatsby Tutorial and Projects Course
21h 48m 56s
English
Paid
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.
Requirements:
- Basic Knowledge of React
What you'll learn:
- Create Blazingly Fast Websites/Projects with Gatsby
Who this course is for:
- Everyone Interested in Building Blazingly Fast Static Websites With Gatsby
About the Author: Udemy
Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.
Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.
Watch Online 223 lessons
0:00
/ #1: Gatsby Intro
All Course Lessons (223)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Gatsby Intro Demo | 01:36 | |
| 2 | Course Info | 00:31 | |
| 3 | Course Requirements | 00:54 | |
| 4 | Video Blur Fix | 01:51 | |
| 5 | Course Review | 00:43 | |
| 6 | Visual Studio Code | 01:42 | |
| 7 | Intro | 01:28 | |
| 8 | Install gatsby-cli | 02:01 | |
| 9 | Setup New Project | 05:39 | |
| 10 | Project Structure | 14:36 | |
| 11 | First Page | 08:45 | |
| 12 | Error Page | 02:36 | |
| 13 | Nested Pages | 03:41 | |
| 14 | Links | 06:41 | |
| 15 | Navbar | 05:06 | |
| 16 | Layout Component | 09:19 | |
| 17 | CSS Info | 01:11 | |
| 18 | Inline CSS | 01:41 | |
| 19 | Global CSS | 05:35 | |
| 20 | CSS Naming Issues | 03:50 | |
| 21 | CSS Modules | 10:15 | |
| 22 | Styled-Components | 12:48 | |
| 23 | House Cleaning | 07:43 | |
| 24 | Styles | 04:33 | |
| 25 | Footer | 03:27 | |
| 26 | Error Page | 01:08 | |
| 27 | Contact Page | 06:08 | |
| 28 | Assets and Icons | 07:12 | |
| 29 | Navbar Setup | 08:56 | |
| 30 | Navbar Functionality | 04:41 | |
| 31 | Gatsby Image Info | 03:40 | |
| 32 | Sandbox Setup | 06:07 | |
| 33 | Install Plugin | 03:40 | |
| 34 | Static Image Setup | 07:27 | |
| 35 | Shared Props and Options | 04:40 | |
| 36 | Options Example | 07:51 | |
| 37 | All Layouts | 06:20 | |
| 38 | Height | 04:36 | |
| 39 | About Page | 09:53 | |
| 40 | Hero Page | 06:18 | |
| 41 | Gatsby and GraphQL Intro | 03:21 | |
| 42 | Gatsby DataLayer in a Nutshell | 01:42 | |
| 43 | GraphiQL Interface | 06:16 | |
| 44 | siteMetadata | 05:40 | |
| 45 | First Query | 09:14 | |
| 46 | Explorer | 02:06 | |
| 47 | Static Query vs Page Query | 01:27 | |
| 48 | useStaticQuery Hook - Code Exporter | 06:17 | |
| 49 | useStaticQuery, graphql - From Scratch | 10:32 | |
| 50 | Field Alias | 03:02 | |
| 51 | Query Keyword, Name and Gatsby Clean | 03:14 | |
| 52 | Page Query | 07:02 | |
| 53 | Install SOURCE-FILESYSTEM Plugin | 10:14 | |
| 54 | allFile - Field | 06:18 | |
| 55 | Query Arguments | 08:14 | |
| 56 | Static Path Fix | 01:24 | |
| 57 | file - Field | 03:23 | |
| 58 | sourceInstanceName - Argument | 02:09 | |
| 59 | Gallery Setup | 03:52 | |
| 60 | gatsbyImageData - Field | 08:10 | |
| 61 | Render Gallery | 11:46 | |
| 62 | getImage - Helper Function | 04:34 | |
| 63 | Local vs External Data | 01:28 | |
| 64 | Headless CMS | 02:00 | |
| 65 | Contentful Info | 00:49 | |
| 66 | Setup Contentful Account | 03:38 | |
| 67 | Content-Type | 06:54 | |
| 68 | Content | 07:30 | |
| 69 | Connect Gatsby - Contentful | 05:01 | |
| 70 | ENV Variables | 06:13 | |
| 71 | allContentfulRecipe - Field | 07:10 | |
| 72 | AllRecipes Component | 09:04 | |
| 73 | RecipesList Component | 12:00 | |
| 74 | Featured Recipes | 10:52 | |
| 75 | Utils Setup | 04:58 | |
| 76 | Helper Function | 07:41 | |
| 77 | TagsList | 03:48 | |
| 78 | Tags Page | 06:09 | |
| 79 | Recipe Template Page Setup | 04:36 | |
| 80 | Recipe Template Page Walkthrough | 09:04 | |
| 81 | Slugify | 04:08 | |
| 82 | Query Variables | 08:51 | |
| 83 | Recipe Template Query | 07:23 | |
| 84 | Recipe Template Return | 12:19 | |
| 85 | GATSBY-NODE.JS Setup | 03:59 | |
| 86 | Create Tag Template Pages Programmatically | 17:54 | |
| 87 | Tag Template Return | 11:32 | |
| 88 | Possible Bug Fix | 06:47 | |
| 89 | Fonts | 05:48 | |
| 90 | Contact Form | 04:37 | |
| 91 | FAVICON | 02:08 | |
| 92 | SEO - Setup | 06:18 | |
| 93 | SEO - Props | 05:55 | |
| 94 | SEO - Complete | 09:32 | |
| 95 | Netlify Info | 00:54 | |
| 96 | Netlify - Drag and Drop | 03:35 | |
| 97 | Netlify - Continuous Deployment | 09:13 | |
| 98 | Webhooks | 04:30 | |
| 99 | Intro | 00:58 | |
| 100 | Install Starter | 01:57 | |
| 101 | Project Overview | 07:49 | |
| 102 | GATSBY-BROWSER | 08:51 | |
| 103 | Navbar | 08:32 | |
| 104 | Hero | 15:24 | |
| 105 | Services | 06:13 | |
| 106 | Setup Strapi | 06:06 | |
| 107 | Content-Type | 05:40 | |
| 108 | Content | 05:01 | |
| 109 | Connect Strapi - Gatsby | 04:40 | |
| 110 | Jobs Query | 03:16 | |
| 111 | Single Job | 08:11 | |
| 112 | Jobs Logic | 05:18 | |
| 113 | Sort Jobs | 02:30 | |
| 114 | Project Content-Type | 04:55 | |
| 115 | Project Content | 03:37 | |
| 116 | Project Query | 03:47 | |
| 117 | Projects Component | 07:42 | |
| 118 | Single Project Component | 07:05 | |
| 119 | Projects Page | 02:20 | |
| 120 | Setup Project Pages Programmatically | 05:00 | |
| 121 | Project Template | 06:11 | |
| 122 | About Page - Setup | 04:54 | |
| 123 | About Page - Complete | 06:14 | |
| 124 | Error Page and Footer | 04:36 | |
| 125 | Contact Page | 03:15 | |
| 126 | Sidebar Setup | 07:54 | |
| 127 | Sidebar Logic | 05:28 | |
| 128 | Initial Deploy | 02:48 | |
| 129 | siteMetadata | 05:57 | |
| 130 | SEO Component | 15:34 | |
| 131 | Complete Project | 08:28 | |
| 132 | Intro | 00:30 | |
| 133 | Install | 01:48 | |
| 134 | Project Overview | 02:44 | |
| 135 | Plugins and main.css | 02:59 | |
| 136 | Navbar | 07:17 | |
| 137 | Sidebar | 03:44 | |
| 138 | Sidebar Toggle | 03:34 | |
| 139 | Hero | 03:36 | |
| 140 | Footer | 02:09 | |
| 141 | Error Page | 02:21 | |
| 142 | Newsletter Info | 04:52 | |
| 143 | Collect Form Values in Netlify | 09:28 | |
| 144 | MDX Setup | 04:50 | |
| 145 | Basic Markdown | 05:27 | |
| 146 | Basic Styling | 05:38 | |
| 147 | First React Component | 04:02 | |
| 148 | Nice Text | 04:35 | |
| 149 | Complete Components Info | 05:53 | |
| 150 | Counter and Like Button | 04:36 | |
| 151 | Posts Intro | 05:50 | |
| 152 | Single Post Setup | 05:01 | |
| 153 | Frontmatter | 06:22 | |
| 154 | Home Query | 08:30 | |
| 155 | Posts Component | 05:11 | |
| 156 | Single Post Component | 05:47 | |
| 157 | Posts Page | 02:12 | |
| 158 | Create Post Pages Programmatically | 09:01 | |
| 159 | Single Post Query | 04:33 | |
| 160 | Post Template Complete | 05:16 | |
| 161 | Categories Setup | 13:05 | |
| 162 | Categories Query | 04:06 | |
| 163 | Categories JSX | 02:29 | |
| 164 | Banner About | 04:44 | |
| 165 | Banner Recent | 06:55 | |
| 166 | Banner Categories | 08:02 | |
| 167 | Navbar Categories | 03:03 | |
| 168 | Inline Images with Remark Images Plugin | 14:01 | |
| 169 | Inline Images with GatsbyImage | 09:51 | |
| 170 | Regular Video | 10:48 | |
| 171 | External Video | 07:43 | |
| 172 | MDX Wrapper Intro | 06:27 | |
| 173 | Root MDX | 09:14 | |
| 174 | First MDX Example | 06:30 | |
| 175 | MDX - props / children | 05:39 | |
| 176 | MDX - Component Example | 05:55 | |
| 177 | MDX - H2 | 06:10 | |
| 178 | MDX - H4 | 02:37 | |
| 179 | Inline Code | 05:43 | |
| 180 | MDX - Blockquote | 09:54 | |
| 181 | Prism Setup | 09:21 | |
| 182 | Prism Config | 10:16 | |
| 183 | My Example | 04:10 | |
| 184 | Intro | 00:38 | |
| 185 | Bootstrap Starter | 01:52 | |
| 186 | Starter Info | 01:48 | |
| 187 | Global Styles with Styled-Components | 06:55 | |
| 188 | Root Wrapper | 03:39 | |
| 189 | Hero | 05:34 | |
| 190 | Navbar | 04:54 | |
| 191 | About and Title Components | 06:16 | |
| 192 | Airtable Info | 04:40 | |
| 193 | Airtable Setup | 02:17 | |
| 194 | First Table | 12:07 | |
| 195 | API Docs and Keys | 03:11 | |
| 196 | Connect Airtable and Gatsby | 09:04 | |
| 197 | Latest Project Query | 04:07 | |
| 198 | Projects Component | 09:29 | |
| 199 | Customers Table | 04:58 | |
| 200 | Customers Query | 06:19 | |
| 201 | Customers Slider Info | 01:02 | |
| 202 | Survey Setup | 09:46 | |
| 203 | Survey Fetch Items | 08:27 | |
| 204 | Survey - Display Items | 05:43 | |
| 205 | Survey - Update Items | 07:57 | |
| 206 | Alternative Loading Setup | 03:01 | |
| 207 | All Projects Query | 03:25 | |
| 208 | Search Buttons - Setup | 04:11 | |
| 209 | Search Buttons - Complete | 09:40 | |
| 210 | Algolia - Intro | 03:21 | |
| 211 | Algolia - Account Setup | 06:16 | |
| 212 | Algolia - Plugin Setup | 04:31 | |
| 213 | Algolia - Query Setup | 11:17 | |
| 214 | Algolia - Basic Front-End | 08:15 | |
| 215 | Algolia - SearchBox Component | 03:07 | |
| 216 | Algolia - New Hits | 07:04 | |
| 217 | Context API | 11:29 | |
| 218 | Nested Links Info (sublinks) | 10:25 | |
| 219 | Sidebar | 11:38 | |
| 220 | Payments Page | 03:58 | |
| 221 | Toggle Sidebar | 04:36 | |
| 222 | Navbar - Sublinks | 12:20 | |
| 223 | Tile Layout | 07:55 |
Unlock unlimited learning
Get instant access to all 222 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 3y agoMaster Gatsby (Master Package)
By: Wes BosBuilding modern websites is tough. Preloading, routing, compression, critical CSS, caching, scaling and bundlers all make for blazing fast websites.11h 57m
Frequently asked questions
What prerequisites are necessary before taking the Gatsby course?
Before enrolling in the Gatsby course, students should have a foundational understanding of JavaScript and React. Familiarity with GraphQL is beneficial but not mandatory, as the course covers GraphiQL Interface and running queries with GraphQL. Basic knowledge of frontend development tools like Visual Studio Code will also be helpful.
What kind of projects will I build during the course?
Throughout the course, students will work on various projects including setting up a new Gatsby project, creating nested pages, and implementing a contact page. They will also build a gallery using the gatsbyImageData field, and explore the use of plugins such as SOURCE-FILESYSTEM to handle data efficiently.
Who is the target audience for this course?
The course is designed for frontend developers who want to enhance their skills in static site generation using Gatsby. It is suitable for those who are familiar with React and wish to explore its integration with GraphQL and other modern frontend tools. Developers aiming to optimize site performance and developer experience will find this course particularly useful.
What specific tools and platforms will be covered in the course?
The course covers a range of tools and platforms including Gatsby CLI for project setup, Visual Studio Code for development, and GraphiQL for interfacing with GraphQL. Students will also gain experience with CSS methodologies, styled-components, and various Gatsby plugins such as SOURCE-FILESYSTEM.
How does the depth and scope of this course compare to other Gatsby courses?
This course offers a comprehensive exploration of Gatsby, encompassing 223 lessons that cover topics from basic project setup to advanced data handling with GraphQL. Unlike some introductory courses, it delves into specific features like the useStaticQuery hook, static and page queries, and gatsbyImageData field, providing a thorough understanding of Gatsby's capabilities.
What topics are not covered in this course?
The course does not cover server-side rendering or deploying Gatsby sites to production environments. While it provides a solid foundation in static site generation and frontend development, it does not focus on backend development or integration with external APIs beyond basic GraphQL queries.
What is the expected time commitment for completing the course?
Given the extensive range of 223 lessons, students should anticipate dedicating a significant amount of time to complete the course. While the total runtime is unspecified, learners should plan for a commitment that allows for both watching the lessons and engaging in hands-on projects to fully grasp the concepts taught.