Gatsby is a website generator. It is a free and open source framework based on React that helps developers build fast websites and apps.
We just published a 9-hour Gatsby course on the freeCodeCamp.org YouTube channel that will teach you how to use the newest version of the framework.
![giphy](https://www.freecodecamp.org/news/content/images/2021/09/giphy.gif)
During this course, you will learn how to create and deploy an interactive recipe website.
The course contains the following sections:
- Gatsby Info
- Course Structure
- Course Requirements
- Vs Code
- Module Intro
- Install Gatsby-Cli
- Setup New Gatsby Project
- Folder Structure
- First Page
- Error Page
- Nested Structure
- Links
- Navbar
- Layout Component
- CSS Module Intro
- Inline CSS
- Global CSS
- CSS Naming Issues
- CSS Modules
- Styled-Components
- House Cleaning
- Styles
- Footer
- Error Page
- Contact Page
- Assets And Icons
- Navbar Setup
- Navbar Logic
- Gatsby Image Info
- Sandbox Setup
- Install Plugin
- Static Image Setup
- Shared Props And Options
- Options Example
- All Layouts
- Height
- About Page
- Hero Page
- Gatsby And GraphQL Intro
- Gatsby DataLayer In A Nutshell
- GraphiQL Interface
- SiteMetadata
- First Query
- Explorer
- Static Query Vs Page Query
- UseStaticQuery Hook - Code Exporter
- UseStaticQuery, GraphQL - From Scratch
- Field Alias
- Query Keyword, Name And Gatsby Clean
- Page Query
- Install SOURCE-FILESYSTEM Plugin
- AllFile Field
- Query Arguments
- Static Path Fix
- File - Field
- SourceInstanceName - Argument
- Gallery Setup
- GatsbyImageData - Field
- Render Gallery
- GetImage - Helper Function
- Local VS External Data
- Headless CMS
- Contentful
- Setup Contentful Account
- Content-Type
- Content
- Connect Gatsby - Contentful
- ENV Variables
- AllContentfulRecipe - Field
- AllRecipes Component
- RecipesList Component
- Featured Recipes
- Utils Setup
- Helper Function
- TagsList
- Tags Page
- Recipe Template Page Setup
- Recipe Template Page Walkthrough
- Slugify
- Query Variables
- Recipe Template Query
- Recipe Template Return
- GATSBY-NODE.JS Setup
- Create Tag Pages Programmatically
- Tag Template Return
- Possible Bug Fix
- Fonts
- Contact Form
- FAVICON
- SEO Setup
- SEO - Props
- SEO - Complete
- Netlify Info
- Netlify - Drag And Drop
- Continuous Deployment
- Webhooks
Watch the full course below or on the freeCodeCamp.org YouTube channel (9-hour watch).