Resources for Learning Gatsby and Modern Web Development

Sam Bhagwat
February 5th, 2022

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.

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. 

Share on TwitterShare on LinkedInShare on FacebookShare on PinterestShare via Email

Gatsby cofounder & chief strategy officer. Programmer, analyst, writer

Follow Sam Bhagwat on Twitter

Tagged with Agencies, CMS, component-libraries, Developer Experience, graphql, typescriptView all Tags

Talk to our team of Gatsby Experts to supercharge your website performance.

Contact Gatsby Now
© 2022 Gatsby, Inc.