Learning Gatsby

Description

In this course, you will :

• learn how to use this adaptable JavaScript framework to create performance-focused websites.
• Learn how to set up Gatsby and use the starter projects to quickly build out your sites.
• Learn how to work with Gatsby pages, assets, and components, as well as how to style your sites using a variety of CSS approaches, including standard static style sheets, inline styles, CSS modules, styled components, and more.
• Learn how to extend Gatsby with plugins, connect to data sources using GraphQL queries, dynamically create pages with transformer plugins and Node.js scripts, and get your Gatsby site ready for production.

Syllabus :

1. Setting Up Gatsby for the First Time

• Gatsby: A static site generator
• Initial setup
• Install a Gatsby starter

 

2. Breaking Down a Gatsby Site

• Start from scratch
• Explore the project
• Core Gatsby principles

 

3. Pages, Components, and Styles

• Static pages
• Static assets
• Components and how to use them
• The layout component
• CSS in Gatsby: Multiple approaches
• Example: CSS modules and modern CSS

 

4. Plugins and Transformations

• Extend Gatsby with plugins
• Plugin options
• Transformation plugins

 

5. Data

• Gatsby and GraphQL
• Two types of GraphQL queries

 

6. Create Pages Dynamically

• Transform data into pages
• Make data available through transformers
• Process transformed data
• Generate pages from markdown files
• Create paginated index pages

 

7. Going Live

• Build the production site
• Add PWA and offline functionality

Show more