Up and Running with Gatsby
- Buy now
- Learn more
Course Intro

About this Course
Course Welcome
Gatsby Core Concepts
Course Philosophy
Course Repo Walkthrough
First Steps with Gatsby

Install Gatsby CLI
Clone Hello World Project
Basic Project Structure
Gatsby Development Server
Adding Pages
Assignment: Create Hotel Site
Hotel Site Solution
Gatsby Link
Assignment: Links
Links Solution
Chapter Recap
Basic Layouts

Chapter Intro
Basic Layout Component
Assignment: Add Layout to About
Adding a header component
Controlling Layouts with Props
Assignment: Nav Bar
NavBar Solution
Layouts Wrapup
Styling in Gatsby

Styling Intro
Inline CSS
Global styles
Global Styles in gatsby-browser
Assignment: Change Fonts
Solution: Change Fonts
CSS Modules
Assignment: CSS Modules
Solution: CSS Modules
Intro to CSS in JS
Installing Styled Components
Using Styled Components
Assignment: Styled Components
Solution: Styled Components
Styling Recap
Data in Gatsby

Overview of Data in Gatsby
Add Site Metadata
GraphiQL Explorer
Use Site Data in Static Query
Page Queries
Assignment: Queries
Solution: Page Query
Solution: Static Query
Chapter Recap
Working with Markdown

Chapter Intro
Adding MDX
Adding a Custom Layout
Extracting a Default Layout
Assignment: Create Events Page
Solution: Events Page
Add files as sources
Looking at Files with GraphiQL
Creating Slugs
Creating Pages
Correction Event Page Layout
Event Page Query
Finishing the Event Layout
Assignment: Date and Frontmatter
Solution: Date and Frontmatter
Events Index Query
Events Index Code
Chapter Recap
Working with Images

Chapter Intro
Importing Images
The Static Folder
Gatsby Image and Sharp
Adding Image Plugins to Config
Building an Image Query
Using the Image Query
Assignment: Add Image to About
Solution: About Image
Updating Events Query
Add Images to Frontmatter
Extract Image Component
Inline Images in Markdown
Assignment: Add Images to Markdown
Solution: Add Images to Markdown
Chapter Recap
Taking Gatsby to Production

Chapter Intro
Fixing the Build: Part 1
Fixing the Build: Part 2
Install React Helmet
Use React Helmet in Layout
Assignment: SEO Component
Solution: SEO Component
Deploy to Netlify
Chapter Recap
Thank You and Where to Go From Here

Styling in Gatsby

15 Lessons