Learn how to use Gatsby (Version 3) in this full course for beginners. Gatsby is a static site generator that makes it quick to develop websites. You will learn how to create a recipes site. 💻 Code: https://github.com/john-smilga/gatsby-v3-tutorial-recipes ✏️ Course from John Smilga of Coding Addict. Check out his channel: https://www.youtube.com/channel/UCMZFwxv5l-XtKi693qMJptA ⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro ⌨️ (0:00:56) Gatsby Info ⌨️ (0:02:46) Course Structure ⌨️ (0:03:28) Course Requirements ⌨️ (0:05:09) Vs Code ⌨️ (0:06:02) Module Intro ⌨️ (0:07:29) Install Gatsby-Cli ⌨️ (0:09:29) Setup New Gatsby Project ⌨️ (0:15:07) Folder Structure ⌨️ (0:29:42) First Page ⌨️ (0:38:26) Error Page ⌨️ (0:41:01) Nested Structure ⌨️ (0:44:41) Links ⌨️ (0:51:21) Navbar ⌨️ (0:56:26) Layout Component ⌨️ (1:05:44) CSS Module Intro
⌨️ (1:06:47) Inline CSS
⌨️ (1:08:27) Global CSS
⌨️ (1:14:01) CSS Naming Issues
⌨️ (1:17:50) CSS Modules
⌨️ (1:28:04) Styled-Components
⌨️ (1:40:51) House Cleaning
⌨️ (1:48:33) Styles
⌨️ (1:53:05) Footer
⌨️ (1:56:31) Error Page
⌨️ (1:57:38) Contact Page
⌨️ (2:03:45) Assets And Icons
⌨️ (2:10:56) Navbar Setup
⌨️ (2:20:11) Navbar Logic
⌨️ (2:24:51) Gatsby Image Info
⌨️ (2:28:30) Sandbox Setup
⌨️ (2:34:36) Install Plugin
⌨️ (2:38:15) Static Image Setup
⌨️ (2:45:41) Shared Props And Options
⌨️ (2:50:20) Options Example
⌨️ (2:58:10) All Layouts
⌨️ (3:04:29) Height
⌨️ (3:09:04) About Page
⌨️ (3:18:56) Hero Page
⌨️ (3:25:19) Gatsby And GraphQL Intro
⌨️ (3:28:39) Gatsby DataLayer In A Nutshell
⌨️ (3:30:20) GraphiQL Interface
⌨️ (3:36:35) SiteMetadata
⌨️ (3:42:14) First Query
⌨️ (3:51:27) Explorer
⌨️ (3:53:52) Static Query Vs Page Query
⌨️ (3:55:18) UseStaticQuery Hook – Code Exporter
⌨️ (4:01:34) UseStaticQuery, GraphQL – From Scratch
⌨️ (4:12:05) Field Alias
⌨️ (4:15:06) Query Keyword, Name And Gatsby Clean
⌨️ (4:18:19) Page Query
⌨️ (4:25:20) Install SOURCE-FILESYSTEM Plugin
⌨️ (4:35:33) AllFile Field
⌨️ (4:41:50) Query Arguments
⌨️ (4:50:03) Static Path Fix
⌨️ (4:51:26) File – Field
⌨️ (4:54:48) SourceInstanceName – Argument
⌨️ (4:56:56) Gallery Setup
⌨️ (5:00:47) GatsbyImageData – Field
⌨️ (5:08:56) Render Gallery
⌨️ (5:20:41) GetImage – Helper Function
⌨️ (5:25:23) Local VS External Data
⌨️ (5:26:50) Headless CMS
⌨️ (5:28:49) Contentful
⌨️ (5:29:37) Setup Contentful Account
⌨️ (5:33:14) Content-Type
⌨️ (5:40:07) Content
⌨️ (5:47:36) Connect Gatsby – Contentful
⌨️ (5:52:36) ENV Variables
⌨️ (5:58:48) AllContentfulRecipe – Field
⌨️ (6:05:57) AllRecipes Component
⌨️ (6:15:00) RecipesList Component
⌨️ (6:26:59) Featured Recipes
⌨️ (6:37:50) Utils Setup
⌨️ (6:42:47) Helper Function
⌨️ (6:50:27) TagsList
⌨️ (6:54:14) Tags Page
⌨️ (7:00:22) Recipe Template Page Setup
⌨️ (7:04:57) Recipe Template Page Walkthrough
⌨️ (7:14:00) Slugify
⌨️ (7:18:15) Query Variables
⌨️ (7:27:05) Recipe Template Query
⌨️ (7:34:27) Recipe Template Return
⌨️ (7:46:45) GATSBY-NODE.JS Setup
⌨️ (7:50:43) Create Tag Pages Programmatically
⌨️ (8:08:36) Tag Template Return
⌨️ (8:20:07) Possible Bug Fix
⌨️ (8:26:53) Fonts
⌨️ (8:32:40) Contact Form
⌨️ (8:37:16) FAVICON
⌨️ (8:39:23) SEO Setup
⌨️ (8:45:40) SEO – Props
⌨️ (8:51:34) SEO – Complete
⌨️ (9:01:05) Netlify Info
⌨️ (9:01:58) Netlify – Drag And Drop
⌨️ (9:05:32) Continuous Deployment
⌨️ (9:14:44) Webhooks 🎉 Thanks to our Champion and Sponsor supporters:
👾 Wong Voon jinq
👾 hexploitation
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 Treehouse
👾 AppWrite — Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp