Course Summary
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 will enable students to understand Gatsby, connect it to a variety of data sources via plugins and render data as needed.
The course begins with an introduction to Gatsby including installation, creating a project with Gatsby CLI creating static pages, and layouts and styling. Next, students will learn about Gatsby architecture, querying data with GraphQL, and working with images and markdowns. The course concludes with students learning how to move to production and how to improve Progressive Web App (PWA) support.
Attendees must have JavaScript development experience. Experience using React will be of benefit but not required.
Purpose
Learn to deliver web-based solutions using Gatsby.
Audience
Developers and developer teams looking to incorporate Gatsby into their toolkit.
Skill Level
Style
Duration
2 Days
Related Technologies
- JavaScript - Gatsby - GraphQL - React
Download
- Productivity Objectives:
- 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.
- Demonstrate Gatsby's Architecture and Boot Process.
Get Quote
If you are not completely satisfied with your training class, we'll give you your money back.
about our training
Real-World Content
Project-focused demos and labs using your tool stack and environment, not some canned "training room" lab.
Expert Practitioners
Industry experts with 15+ years of industry experience that bring their battle scars into the classroom.
Experiential Learning
More coding than lecture, coupled with architectural and design discussions.
Fully Customized
One-size-fits-all doesn't apply to training teams. That's where we come in!
What You'll Learn
In the Working with Gatsby training course, you'll learn:
- Introducing Gatsby
- What and Why
- The JAM Stack
- Headless CMSes
- Gatsby’s value proposition
- The Gatsby Ecosystem
- Getting Started
- Installaing Gatsby
- Creating a Project with Gatsby CLI
- Using a Starter
- Creating Static Pages
- Creating a Page
- Using Static Assets
- Creating Components using React
- Layouts and Styling
- Adding Global CSS Styles
- Using CSS Modules
- Using a CSS-in-JS Library
- Linking between Pages using <Link>
- Adding a Layout Component
- Gatsby Architecture
- Data Sources, Nodes and GraphQL
- Source Plugins and Transformer Plugins
- Understanding Gatsby’s Build Process
- 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
- Querying Further Data Sources
- Querying Data from the Filesystem
- Understanding the nodes Namespace and Storage Model
- Querying Image Data
- Connecting to a Headless CMS
- Working with Images
- Responsive Design Considerations for Images
- Bandwidth and Load Time Considerations
- Querying for Images using GraphQL
- Performing Image Transformations
- Image Rendering
- Working with Markdown
- Building a Blog
- Transforming Markdown to HTML
- Introducing MDX
- Using MDX
- Programmatically Creating Pages
- Gatsby’s Bootstrap Phase
- Understanding gatsby-node and Gatsby’s APIs
- Creating “Slugs” for Generated Pages
- Generating the Pages
- Paginating Through Lists
- Pagination in GraphQL
- Querying a List
- Rendering a Paginated List
- Moving to Production
- Creating a Production Build
- Serving the Production Build
- Hosting the Site
- Deploying to Netlify
- Improving Progressive Web App (PWA) Support
- Explaining PWAs
- Explaining PWAs
- Running a Lighthouse Audit
- Adding a Manifest
- Adding Offline Support with a Service Worker
Real-world content
Project-focused demos and labs using your tool stack and environment, not some canned "training room" lab.
Expert Practitioners
Industry experts that bring their battle scars into the classroom.
Experiential Learning
More coding than lecture, coupled with architectural and design discussions.
Fully Customized
One-size-fits-all doesn't apply to training teams. That's where we come in!
Elite Instructor Program
We recently launched our internal Elite Instructor Program. The community driven instructor program is designed to support instructors in transforming students’ lives by consistently showing a world-class level of engagement, ability, and teaching prowess. Reach out today to learn more about our instructors.
Customized Technical Learning Solutions to Help Attract and Retain Talented Developers
Get Quote
Get your team upskilled or reskilled today. Chat with one of our experts to create a custom training proposal. Fully customized at no additional cost. 100% guaranteed.
DevelopIntelligence leads technical and software development learning programs for Fortune 5000 companies. We provide learning solutions for hundreds of thousands of engineers for over 250 global brands.
“I appreciated the instructor’s technique of writing live code examples rather than using fixed slide decks to present the material.” – VMware
View More
Thank you for everyone who joined us this past year to hear about our proven methods of attracting and retaining tech talent.
