Call : (+91) 968636 4243
Mail : info@EncartaLabs.com
EncartaLabs

Gatsby

( Duration: 3 Days )

The Developing Websites with Gatsby training course is designed to explain a new approach to the delivery of web-based solutions moving from a single monolithic CMS toward a content mesh with an infrastructure layer to decouple websites. This course provides skills to understand Gatsby, connect it to a variety of data sources via plugins and render data as needed.

By attending Gatsby workshop, delegates will learn to:

  • Create a highly performant web app using Gatsby, React and GraphQL.
  • Deliver web-based solutions using a "content mesh".
  • Source and render data from a variety of data sources.
  • Install and configure plugins to utilize functionality required.
  • Understand Gatsby's Architecture and Boot Process.

  • JavaScript development experience.
  • This Gatsby class is intended for Developers and developer teams looking to incorporate Gatsby into their toolkit.

COURSE AGENDA

1

Introducing Gatsby

  • What and Why
  • The JAM Stack
  • Headless CMSes
  • Gatsby’s value proposition
  • The Gatsby Ecosystem
2

Getting Started

  • Installaing Gatsby
  • Creating a Project with Gatsby CLI
  • Using a Starter
3

Creating Static Pages

  • Creating a Page
  • Using Static Assets
  • Creating Components using React
4

Layouts and Styling

  • Adding Global CSS Styles
  • Using CSS Modules
  • Using a CSS-in-JS Library
  • Linking between Pages using
  • Adding a Layout Component
5

Gatsby Architecture

  • Data Sources, Nodes and GraphQL
  • Source Plugins and Transformer Plugins
  • Understanding Gatsby’s Build Process
6

Querying Data with GraphQL

  • Understanding GraphQL
  • Making GraphQL Queries from Pages
  • Rendering the Data Received
  • Dealing with Errors and Delays
  • Static Queries vs Page Queries
  • Issuing Queries from Components using StaticQuery
  • Using the useStaticQuery Hook
7

Querying Further Data Sources

  • Querying Data from the Filesystem
  • Understanding the nodes Namespace and Storage Model
  • Querying Image Data
  • Connecting to a Headless CMS
8

Working with Images

  • Responsive Design Considerations for Images
  • Bandwidth and Load Time Considerations
  • Querying for Images using GraphQL
  • Performing Image Transformations
  • Image Rendering
9

Working with Markdown

  • Building a Blog
  • Transforming Markdown to HTML
  • Introducing MDX
  • Using MDX
10

Programmatically Creating Pages

  • Gatsby’s Bootstrap Phase
  • Understanding gatsby-node and Gatsby’s APIs
  • Creating “Slugs” for Generated Pages
  • Generating the Pages
11

Paginating Through Lists

  • Pagination in GraphQL
  • Querying a List
  • Rendering a Paginated List
12

Moving to Production

  • Creating a Production Build
  • Serving the Production Build
  • Hosting the Site
  • Deploying to Netlify
13

Improving Progressive Web App (PWA) Support

  • Explaining PWAs
  • Explaining PWAs
  • Running a Lighthouse Audit
  • Adding a Manifest
  • Adding Offline Support with a Service Worker

Encarta Labs Advantage

  • One Stop Corporate Training Solution Providers for over 6,000 various courses on a variety of subjects
  • All courses are delivered by Industry Veterans
  • Get jumpstarted from newbie to production ready in a matter of few days
  • Trained more than 50,000 Corporate executives across the Globe
  • All our trainings are conducted in workshop mode with more focus on hands-on sessions

View our other course offerings by visiting https://www.encartalabs.com/course-catalogue-all.php

Contact us for delivering this course as a public/open-house workshop/online training for a group of 10+ candidates.

Top
Notice
X