This course teaches learners how to use Gatsby (Version 3) to develop websites efficiently, focusing on creating a recipes site. By the end of the course, students will be able to install Gatsby, set up a new project, work with folder structures, create different pages, implement navigation, manage styling using CSS modules and styled-components, handle assets and icons, utilize GraphQL for data management, connect to Contentful for content management, and dynamically generate pages. The course employs a hands-on approach with practical coding examples and walkthroughs. It is designed for beginners interested in learning how to build static sites using Gatsby.
Overview
Syllabus
) Intro .
) 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.
Taught by
freeCodeCamp.org
