GatsbyGuides.com
HomeAbout
Log in
Sign up

Build blazing fast web applications with Gatsby 101

Sign up free and get instant access to over 10 hours of learning material.

Start learning now

Gatsby, the web application generator for React, has the kind of power and flexibility that gets web developers excited. Gatsby provides a modern front-end framework for turning content into feature-rich, super fast, visually engaging apps and websites.

What you'll learn:

With our kickoff course on Gatsby, upgrade your developer experience, get immediate visual feedback, and iterate faster!

  • Learn what Gatsby is and when to use it.
  • Dynamically generate super fast static pages from any data source.
  • Integrate Gatsby with your CMS of choice and generate pages from its content.
  • Implement speedy, optimized responsive images with advanced image loading.
  • Use OAuth to allow users to sign in to your Gatsby application.
  • Build dynamic web applications with React & Gatsby.

Sign up for free and get instant access to Gatsby 101, over 10 hours of written tutorials.

Start learning now

What you'll build:

  • A full stack application that uses Gatsby on the front end to display recipes from a food magazine, and Drupal on the back end for editorial control and user account management.
  • Source data from a Content Management System (Drupal in this case, but the knowledge applies to any CMS Gatsby supports), and transform it into blazing fast static pages using React, GraphQL, and modern JavaScript.
  • Code that allows users to sign in and view protected content in our application.
  • Learn how Gatsby can be used to create dynamic web applications - not just static pages.

Tutorials

The course contains approximately 10 hours of written content, code samples, and exercises, including:

  1. What Is Gatsby?
  2. Hello World!
  3. An Introduction to Drupal for Gatsby Developers
  4. Install and Configure Drupal
  5. Get Data Out of Drupal and Into Gatsby
  6. Add Material UI
  7. Dynamically Creating Pages
  8. Creating Lists of Content
  9. Dealing with Images from Drupal
  10. Deploying Your Application
  11. Building Applications with Gatsby
  12. Authenticate Users with OAuth
  13. Create Hybrid Pages
  14. Create Client-Only Routes

Sign up for free, get instant access, and start learning Gatsby.

Sign up today and start learning!

Who is this for?

Developers who want to expand their knowledge of Gatsby, and use it to create web applications that combine content and data from anywhere, while improving their React and GraphQL skills in the process.

Front-end developers learning how to provide a first-class experience for content creators and editors based on tried and tested open-source tools.

Drupal developers who want to learn React, GraphQL, or who are building decoupled front ends for their existing Drupal sites.

What you should know:

You should already be familiar with React basics (components, state, props, etc.). If you've previously built anything with React, you should be fine. Although we’ll be using it, this course needs no existing knowledge of GraphQL. We also provide opportunities to jump off and explore further.

You should be familiar enough with Drupal/PHP applications that you can get it running (either locally or on a hosting provider) and do some basic configuration. This course doesn't go into detail about how to use or customize Drupal beyond what is needed to get it working with Gatsby and to serve as an OAuth authentication provider. For more on using Drupal, check out Drupalize.Me.

About Osio Labs:

Previously Lullabot Education, we’re now Osio Labs - Open Source Inside and Out. We’re on a mission to empower anyone to build websites using open source tools. We teach the technology and support the open source projects and communities that make it all possible. For over 10 years, we’ve been publishing tutorials, conducting workshops, supporting events, contributing code and documentation, and working in a variety of open source community leadership roles. Our site Drupalize.Me is the leading provider of Drupal training services.