When website teams are transitioning toward Gatsby, one common challenge we hear is that working in the modern web ecosystem means you have to know a lot of different technologies.
In addition to Gatsby and React, tools like GraphQL, TypeScript, and Node.js frequently come up. Other technologies like Storybook and component libraries, and headless CMSs like Contentful, are not strictly necessary – but are very helpful in building high-quality Gatsby websites.
- Register Today! Join us for GatsbyConf on March 2nd and 3rd, 2022
What we’ve seen is that while there’s a lot of blog posts out there, knowing where to find high-quality written and video resources can help developers level up on the technology landscape faster.
To help, we’ve curated a list of our favorite resources (free and paid) below:
Gatsby
- Official Gatsby Tutorial. We created an 8-part tutorial where readers build and deploy a blog site. Along the way you’ll learn about how to use Gatsby plugins, the GraphQL data layer, MDX and other technologies.
- Official Gatsby Documentation. Our official docs have over 150 articles with how-to guides, reference materials, and conceptual overviews of the different workflows using Gatsby.
- Learning Gatsby, LinkedIn Learning (free for 1 month, then $30 / month). Prominent web educator Morten Rand-Hendricksen recorded a 3-hour course walking end-to-end through the concerns of setting up a Gatsby site – creating pages, adding styling, adding content in markdown, optimizing images, and deploying a Gatsby site. Because Rand-Hendricksen builds an example website from scratch, this course is a good option if you’re doing dedicated training. There’s also an additional course on using Gatsby with headless WordPress. The content is free for a month, so if budget is a concern this is a good option.
- Egghead.io Gatsby Courses & Lessons (requires Egghead subscription, $25/month). Egghead has several video courses by current and former Gatsby employees like Laurie Barth, Khaled Garbaya, and Kyle Gill. Courses range from 20 to 45 minutes, and are broken up into 2-3 minute chunks. Because the material is shorter-form, it’s a great option if you want to consume small chunks of content frequently. In addition, Egghead has many, many other courses on other topics in the broader JavaScript ecosystem, so it’s a good option if you have a budget for one subscription and want to level up on the whole ecosystem.
- Frontend Masters Introduction to Gatsby v2 (requires subscription, $39/month). A 4-hour video course walking through introductory workflows by Jason Lengstorf. Lengstorf also has a 3-hour intermediate Gatsby course. Taken together, these courses are the longest end-to-end material on Gatsby.
React
- Official React Documentation and official React Tutorial. The React core team has put a tremendous amount of effort into making the documentation both simple and comprehensive. The tutorial covers concepts like props, the React DevTools extension, state, function components, and immutability. The docs are comprehensive and cover all the key concepts: rendering, components, state, lifecycle, lists, forms, and so on. Advanced guides cover concepts like code-splitting, context, error boundaries, fragments, and so on.
- The Beginner’s Guide to React (free) by prominent React developer Kent Dodds is the best free video tutorial we’ve seen. Some learners find toggling back and forth between an official doc on a topic and Dodds’ video content a good learning method.
- Epic React (one-time, $120 to $600). An expansion of Dodds’ egghead videos, covering more material and going significantly deeper. The $120 package has 4 hours of video; the $600 package has 19 hours. If you’re not sure if you want to pay the list price on this course, we recommend starting with the Egghead material first.
The broader frontend / web ecosystem
A number of workshops and guides cover some of the topics used to build Gatsby sites in detail. These courses typically go deeper in these technologies than you need to use Gatsby, so early-career engineers may want to focus on courses in the previous sections. At the same time, the level of depth can be helpful for senior developers who want to deeply understand the concepts and technologies they’re working with day-to-day with Gatsby.
- GraphQL Workshop (free, email address required). A six-part guide to building an app with GraphQL, created by O’Reilly author and educator Eve Porcello.
- Node.js for Beginners (requires Egghead subscription, $25 / month). Covers Node processes, the Node.js shell, namespaces, modules, npm, package.json, and other basics.
- Up and Running With TypeScript (requires Egghead subscription, $25 / month). Covers the ins-and-outs of how to use TypeScript in a project. Note that you get some of this out of the box with Gatsby!
- CSS for JavaScript Developers (one-time, $150 to $400). This is one of the most creatively designed courses in the frontend ecosystem. It’s also a rare, systematic approach to a topic that a lot of developers learn in a one-off, fragmented way.
- Testing JavaScript (one-time, $70 to $350). This is pretty much what you’d expect – an introduction to unit, static, integration, and end-to-end testing and the libraries to use for them in the JavaScript world. It’s especially useful for earlier-career developers learning to write higher-quality code, as well as developers who are newer to testing. If you’re not sure whether you want a full course on JavaScript testing, a good free resource is the Gatsby docs section on testing.
- Design Systems With React, TypeScript, and Storybook (free). Like other React applications, a common pattern for professional Gatsby sites is to use a component library tool like Storybook. This helps developers document components as they are built, to prevent duplication of effort and ensure a consistent look and feel throughout the site.
- Build Content-Rich Progressive Web Apps With Gatsby And Contentful (requires Egghead subscription, $25 / month). This is probably the best video tutorial on using Contentful and Gatsby together, by Contentful/Gatsby engineer Khaled Garbaya. In addition, Contentful has a section of training videos for content editors that may also be useful for reference for developers.