Learning Gatsby

Course details

Gatsby offers React and WordPress developers a more comprehensive approach to web application development, complete with thorough concerns for accessibility support. Gatsby's GraphQL foundations let it extract information from a variety of data sources. In this course, instructor Morten Rand-Hendriksen shows you how Gatsby can help you build performance-focused websites. Morten steps through setting up Gatsby and breaking down a Gatsby site. He explains how to use static pages, static assets, components, and CSS in Gatsby, then dives into plugin options and adding images to a page. Morten goes over data in Gatsby, including making a page query, building an advanced GraphQL query, and adding dynamic images. After walking you through the process of creating pages dynamically, he shows you how to build the production site and add PWA and offline functionality. With each chapter featuring practical challenges and solutions, this course sets you on your way to mastering Gatsby.

Concepts

0. Introduction

01 - Modernize the web with Gatsby
02 - Prerequisites for this course

1. Setting Up Gatsby for the First Time

03 - Gatsby - A static site generator
04 - Initial setup
05 - Configure helper tools
06 - Install a Gatsby starter
07 - Start and stop your local Gatsby site

2. Breaking Down a Gatsby Site

08 - Starting from scratch with exercise files
09 - Explore the project
10 - Challenge - Change the site title and other content
11 - Solution - Change the site title and other content

3. Pages, Components, and Styles

12 - Static pages
13 - Static assets
14 - Components and how to use them
15 - The layout component
16 - CSS in Gatsby - Multiple approaches
17 - Example - CSS modules and modern CSS
18 - Challenge - Create a navigation component
19 - Solution - Create a navigation component

4. Plugins and Images

20 - Extend Gatsby with plugins
21 - Plugin options
22 - Example - Images in Gatsby
23 - Custom image features
24 - Challenge - Add two new images to a page
25 - Solution - Add two new images to a page

5. Data

26 - Gatsby and GraphQL
27 - Make a page query
28 - Building an advanced GraphQL query
29 - Adding dynamic images
30 - Challenge - Make a dynamic navigation menu
31 - Solution - Make a dynamic navigation menu

6. Create Pages Dynamically

32 - Transform data into pages
33 - Make data available through transformers
34 - Extend transformed data with new data
35 - Process transformed data
36 - Import Markdown files with a transformer
37 - Generate pages from Markdown files
38 - Create paginated index pages
39 - Challenge - Add paginated tag indexes
40 - Solution - Add paginated tag indexes

7. Going Live

41 - Build the production site
42 - Add PWA and offline functionality

Conclusion

43 - Further information