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.
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).