Gatsby.js 3 Tutorial and Projects Course

Provide a brief course review to share what you like or dislike, in one or two sentences, to help improve future Gatsby.js 3 tutorial and projects course.

Explore Visual Studio Code for Gatsby.js development, including default settings, font size and zoom tweaks, feature extensions, and the setup repo with extensions and a settings.json file by John Bashmilah.

Kick off the Gatsby.js 3 tutorial with your first project, a recipe site, and access the source code and live project page from the course site, with Gatsby documentation references.

Install the Gatsby CLI to quickly generate a Gatsby project; verify the installation with gatsby -v, and consult the Gatsby docs for dev environment setup, including Node and Git.

Set up a new Gatsby project with the hello world starter, run gatsby develop to bootstrap the dev server, and view the site at localhost:1000.

Explore the Gatsby.js 3 project structure, including the cache folder, public folder, source directory with pages, and static assets, plus essential commands for developing, building, serving, and cleaning.

Create nested pages in Gatsby by organizing folders that map to URLs like /company/history. Use the Link component to navigate between pages and understand index routes.

Learn to navigate between pages in Gatsby using the Link component imported from Gatsby, avoiding full page reloads for internal routes while using regular links for external resources.

Create a reusable navbar component in Gatsby.js 3, place it under source/components, import it into pages, and use Gatsby's Link to navigate between home and about pages.

Adopt a wrapper layout component to centralize global components like the footer, wrap pages, and render page content via the children prop.

Explore Gatsby.js 3 styling options, focusing on major choices and my favorites; discover how bootstrap, tailwind, and emotion integrate quickly via a starter library search.

Learn to style Gatsby.js 3 apps with inline styles using the style attribute, delivering a JavaScript object with camelCase properties and quoted values such as color and textTransform.

Learn how to set up global CSS in Gatsby v3, import a layout, and apply consistent styles across pages, while noting inline styles can override global rules in development.

Discover how to prevent css naming collisions in Gatsby.js by organizing class names and avoiding name collisions as the project grows, using the home and about pages.

Explore css modules in Gatsby 3 by creating module files, importing specific classes, and applying styles to home and about pages, while noting styled components as an alternative.

Explore styled components in a Gatsby project, learn to add plugins and configure the Gatsby setup, and apply modular, template-literal styling for unique, component-scoped visuals.

Perform house cleaning on the Gatsby.js 3 project by removing unused folders and components, standardizing pages (home, about, contact, recipes, tags), and ensuring clean navigation and exports as you iterate.

Learn to set up and apply styles in Gatsby.js 3 by copying the final project styles, organizing assets, and introducing normalize CSS to ensure cross-browser consistency.

Build the footer component for a Gatsby.js 3 project, styling it with a global class, dynamic year, and an external link to the Gatsby site.

Navigate the project to build a custom 404 error page by restructuring the layout, replacing the main tag with an error-page section, saving, and testing in the browser.

Set up a contact page with text beside a reusable form, fetch data from Atlas teams, and reuse the same component across recipes and tags with name, email, and message.

Create a responsive Gatsby navbar with a logo, home and other page links, and an active link state using Gatsby's Link component; implement a toggle for small screens.

Gatsby's image handling uses the image plugin to serve responsive images and preserve image space with placeholders, reducing layout shifts for faster loading.

Set up a sandbox to demonstrate the Gatsby image plugin, create an images component with styled-components, and compare on-page rendering and network loading of large images.

Install the Gatsby image plugin for version 3, using gatsby-plugin-image along with gatsby-plugin-sharp, gatsby-transformer-sharp, and gatsby-source-filesystem, then configure gatsby-config.js and run the dev server.

Explore using Gatsby image static image for static pictures, import the static image component, and supply a local or external path, with path and props staying in the same file.

Explore shared props for the Gatsby.js image component, including alt text, loading, wrapper and image classes, and object fit. Discover how layout choices—fixed, full width, and constrained—control resizing.

Explore implementing a constrained image layout in Gatsby.js using static images, height and width options, placeholders, and dominant color, then compare with a full-width layout.

Understand height behavior for constrained versus fixed image layouts in Gatsby.js 3, and apply a responsive css class with media queries to control height for both constrained and full-width images.

Create an about page in Gatsby.js 3 by adding a static image alongside text in a two-column layout, with linking to the contact page and responsive image styling.

Build a Gatsby.js hero page with a full-width static image and centered overlay text, using a hero container and responsive height for stable layouts.

Learn how Gatsby's data layer loads data directly into components with GraphQL, moving beyond rest APIs. Practice writing and testing GraphQL queries in the Gatsby sandbox to render data effectively.

Explore how the Gatsby data layer uses graphical queries to manage components and data sources. Test queries in the sandbox and render data with static or page queries, with variables.

Master the GraphiQL interface in the Gatsby.js 3 course by learning to build and run specific queries, use the explorer to generate code, and troubleshoot with formatting and history features.

Add site metadata in the Gatsby config to store your site's title, description, and author for universal access and SEO, and restart the dev server using the exact property name.

Restart the server and browser after changes to access updated site metadata in Gatsby, and learn to query title, description, author, and nested subfields using the Explorer.

Use the explorer to recreate queries quickly by selecting site metadata, built time, and fields like author, description, and title in Gatsby.js 3.

Understand static query versus page query and how to set up both. Use the static query hook for static queries in regular components, and page queries for page components.

Practice pulling data with the useStaticQuery hook using the code explorer, then render a screen that maps over complex data to display names and ages.

Learn how to implement useStaticQuery with graphql in a Gatsby.js 3 project, including proper hook usage, component naming, and data extraction from the query results.

Learn how to use field aliases in queries to simplify data access by renaming long properties like site metadata to info, adjusting the response accordingly.

Learn how to use query keyword, query name, and ensure unique query names in Gatsby, including cache management with Gatsby clean and dev workflows.

Demonstrate creating a Gatsby page with a page query, exporting a default component, and accessing the resulting data in props through a query and a tag template.

Learn to integrate the Gatsby source filesystem plugin, configure it as an object, and create named instances to load images from an assets folder, enabling file-based queries.

Fix a path warning for the static image component by updating the assets path to assets/images/recipes/recipe1.jpeg or relocating image to images folder. Restart the server to confirm no terminal warnings.

Learn how to work with a single file node, use arguments to filter by relative path, and retrieve specific images such as a logo or recipe image in Gatsby.js 3.

Explore creating a simple image gallery with the Gatsby image component by querying all images and rendering them dynamically, contrasting with static images, while integrating layout and page queries.

Explore how to fetch and structure Gatsby image data using the Gatsby image plugin, including fixed and fluid layouts, blurred placeholders, and transform options.

Render a dynamic image gallery by querying Gatsby image data, iterating file nodes, and feeding child image sharp data into the Gatsby image component, with styled components for layout.

Learn how the getImage helper provides a safe path to Gatsby image assets, preventing runtime errors when image objects are missing during list iteration.

Compare local data storage with external headless CMS data in Gatsby.js 3, using markdown or MDX, then query and render data in a page component or a React component.

Learn how headless cms decouples data from your project and lets you manage data via a gui for any frontend, with open source and hosted options.

Explore Contentful basics for Gatsby projects, as the instructor explains choosing a service they use, offering a quick setup, a free tier, data hosting, and a straightforward sign-up experience.

Sign up for a free Contentful account, confirm your email, and initiate a free trial space. Learn to build a content model, manage a space, and start from scratch.

Define a recipe content model with fields like title, description, prep time, cook time, servings, image, and a json content field for stacks, instructions, ingredients, and tools.

Define a content type and add recipe entries with required titles and images using JSON data and validations; publish assets and mark featured items for home and about displays.

Connect Gatsby to Contentful by configuring gatsby-source-contentful with space ID and delivery API key, fetch recipe data and images, and safeguard keys with environment variables.

Learn how to hide API keys in Gatsby by configuring development and production env files, accessing them via process.env, and safely building for deployment.

Explore querying all Contentful recipe entries in Gatsby.js 3, enabling fields via a plugin, and selecting id, title, prep time, tags, and image data for display.

Build a dynamic recipes list in Gatsby.js by rendering recipe cards with images and links to detail pages, including prep and cook times.

Learn how to filter featured recipes in Gatsby.js 3 by using page queries, reuse the recipes list component across pages, and manage data updates with publish and dev server steps.

Create a utils folder with a tags extraction module to pull and display tags from recipes. Export a setupTags function and import it to verify results via the console.

Extracts unique tags from all recipes, counts their occurrences, converts them to an array of [tag, count], sorts alphabetically, and prepares tag links for a Gatsby.js 3 project.

Iterate over tags and render clickable tag links using Gatsby's Link, preparing dynamic tag pages and a tag list in a Gatsby.js 3 project.

discover how to generate tag and recipe pages in Gatsby.js 3 programmatically, using the filesystem API and the gatsby note approach to auto-create templates and pages.

Gatsby generates a page per recipe using the title as a slug to create friendly URLs. The recipe template runs a dynamic, title-based query to fetch data for that recipe.

Slugify recipe titles to create URL-friendly, hyphenated paths and enable navigation from recipe cards. Install liquify, generate a lowercase slug, and use it in queries to fetch the targeted recipe.

Learn to make Gatsby queries dynamic by declaring a title variable, passing it into the query, and fetching a single recipe using page context.

Explore how to craft a recipe template query in Gatsby.js 3, access variables, and pull ingredients, instructions, tags, tools, description, prep time, and image data for recipe pages.

Explore building pages with Gatsby's node API and the filesystem approach, including tag pages and templates, using gatsby-node.js and createPages, with setup and server restarts during development.

Access the Gatsby node API to create tag pages programmatically by querying all content, iterating over tags, and calling createPage with a tag-driven path, template, and context.

Learn to build Gatsby tag pages with a tag template by using page context and a GraphQL query to render a sorted recipes list by title for a specific tag.

fix two possible bugs by correcting tag and recipe slugs, updating Gatsby node, and aligning the tags list, tags page, and single recipe page to prevent duplicates.

Preload fonts with the web fonts plugin to avoid delays and boost Gatsby project performance, configuring Google fonts with chosen families and variants.

Implement a Gatsby 3 contact form using a third party service, with a simple setup and visible submissions for name, email, and message.

Learn how to replace Gatsby.js 3's default favicon by downloading a new icon, swapping it in the static folder, and clearing cache or restarting to apply changes.

Learn to build a reusable SEO component in Gatsby by passing title and description as props, rendering them in meta tags via site metadata, and configuring language with a plugin.

Pull and apply site metadata for Gatsby.js SEO by querying site title and description, building dynamic titles, and defaulting descriptions when not provided.

Host your Gatsby project online by choosing between a local Gatsby build or continuous deployment. Netlify offers straightforward setup, and you’ll learn how to create an account at netlify.com.

Explore Netlify continuous deployment to automatically rebuild a Gatsby site when you push changes to GitHub, using environment variables and build settings.

Explore setting up webhooks and build hooks to auto trigger deployments on content changes in Gatsby projects, including configuring post URLs and observing automatic rebuilds.

Access the complete Gatsby.js 3 strappy portfolio project and related open source resources, and learn where to find it online to explore the portfolio site.

Download, rename, and set up the starter, install dependencies with npm install, spin up the server, and preview the Gatsby project at localhost:8000 while reviewing the project structure.

Wrap all pages automatically with a shared layout via the Gatsby browser API and a layout component, and explore Gatsby SSR for browser and server-side rendering.

Build a responsive Gatsby navbar with a logo and toggle for a small-screen sidebar, and render page links from a single array using Gatsby Link.

Develop a Gatsby.js 3 hero section with a text-and-image layout, social icons, and a contact link, using data-driven social links, SEO setup, and responsive static or SVG image handling.

Install strapi version 3.5.4 with npm create-strapi-app portfolio back end --quickstart, then access localhost:1337 to set up the admin and content types. Open admin and server links to continue development.

connect strapi with gatsby by installing and configuring the gatsby-source-strapi plugin, set the api url and content types, start the server, and fetch data for your graph queries.

connect your front end to a local sandbox server, fetch job data with a Gatsby page query, and render a jobs component mapping nodes to position, company, date, and description.

In the Gatsby.js 3 tutorial, render a single job from a data object, displaying position, company, date, and description, then add interactive buttons to switch between jobs.

Sort jobs by created date in the Gatsby.js 3 project by updating the GraphQL query to descending order, so the latest job appears first.

Set up a project content type in strapper and connect to Gatsby to render featured on the homepage and all projects on the projects page via a repeatable stack component.

Explore configuring Gatsby v3 to pull project data with two queries—featured projects for the home page and all projects for the project page—using Gatsby image sharp and content types.

Discover how to build a reusable project component in Gatsby.js by wiring props, data, and links, rendering the component across pages with conditional shoaling links and a map over projects.

Build a single project component in Gatsby.js 3 with image handling, slug-based links to project pages, and render title, description, stack, icons, and numbered project links.

Set up a query to fetch all projects and render the project component. Render all non-featured projects by passing the project data and notes.

Programmatically create project pages by adding a project folder and dynamic file, align slug with the project title in page context, and render each project's page.

Create a project template by wiring a title, description, and image to a dynamic GraphQL query, then render the data in a hero area and prepare for Twitter cards.

Set up the about page in strapi for a Gatsby.js 3 project by creating an about content type with a title, info, and a required image, then configure single types.

Learn to build a Gatsby about page by querying data for title, info, stack, and image, using public urls or Gatsby image, and integrating styling and components.

Build and style the error page and footer, including social links and copyright. Wire navigation, dynamic year, and content of the page, about, and contact sections.

Build the contact page skeleton in a Gatsby.js 3 project, including get in touch heading and a form group with name, email, and a message textarea plus a submit button.

Create a sidebar component with layout-based toggle, using a hardcoded open state for now, and add animated class changes. Render page and social links with icons.

Implement a responsive sidebar by managing open state in the layout with useState, and pass isOpen and toggleSidebar to the navbar and sidebar to close on navigation.

Configure Gatsby siteMetadata with title, description, and a title template via React Helmet. Set up a social sharing image and URL from a static folder for Twitter cards and SEO.

Learn to implement a Gatsby seo component using site metadata, default props, and React Helmet, generating open graph and Twitter meta tags for social sharing.

Add the CEO component to all pages and configure per project social cards by passing title, description, image, and public URL, then validate with the card validator and publish.

Explore the MDX block project in the Gatsby.js 3 course, and learn where to view the Gadsby MDX blog course project via the provided URL.

Install and run a Gatsby.js 3 project by using npm install and npm start, then open localhost:8000 and verify the index page shows the Gadsby MDX blog star heading.

Explore a Gatsby.js 3 project overview with boilerplate setup, styling with style components, and a real-world blog layout using reusable layout, nav bar, sidebar, and hero components.

Learn to configure Gatsby.js 3 with essential plugins (image, sharp transformer, MDX), set up the file system and assets, and apply global styles using main.css across browser and server rendering.

Create a responsive navbar for a Gatsby.js 3 project, featuring a logo, navigation links, and social links; render on the homepage using a layout, with a toggle for mobile screens.

In this Gatsby.js 3 tutorial, build a 404 page with a layout featuring Nevada sidebar and footer, showing the page you tried cannot be found and a back home link.

Learn to build a newsletter page with a form and a success page, using layout, a section, and a submit button to capture name and email.

Collect form values in a Gatsby.js 3 project with Netlify by configuring inputs, a post method, and a success page to capture and view form submissions.

Set up MDX in Gatsby.js 3 by installing the MDX plugin, configuring it, and rendering full React components in MDX posts located in the pages directory.

Learn basic markdown syntax—headings, bold, italic, blockquotes, links, inline and fenced code blocks, and how to edit MDX posts for styling and syntax correctness.

Explore basic styling techniques in Gatsby by wrapping code in a div, applying a class, and adjusting line breaks to render mdx code blocks with background and color.

Learn how to import and use Gatsby's link component in an MDX page, adding a styled Link to navigate to the all posts page with a class name.

Set up premade React components in the Gatsby project using a complete folder and a single import entry, and style them with styled components while keeping the logic separate.

Learn to set up a posts folder, configure Gatsby to source MDX files, and organize each post with images, a post MDX, and front matter for imports.

Set up your first Gatsby.js 3 post by creating a post folder with a post mdx, add images, place the post as the last entry, and prepare the front matter.

Explore how front matter powers post metadata in Gatsby.js with MDX, defining title, image, category, date, and read time using YAML-like syntax.

Fetch MDX nodes and render home cards from front matter data including author, category, read time. Limit home to three latest posts; render all posts on the post page.

Pass Dora and the title as props to a reusable posts component, map the posts from the data object, and render a banner alongside each post.

Create a single post component in Gatsby.js that interfaces with front matter fields (title, image, slug, date, category, excerpt) and renders with Gatsby image and a post link.

Set up a post page that displays all posts by removing the limit from the GraphQL query. Pass the data to the post component within the layout and hero components.

Create post pages programmatically in Gatsby.js by querying unique slugs, using a post template, and generating pages in createPages with slug passed to the template.

Set up a single post query using the slug variable to fetch the MDX body, title, and image in a Gatsby.js 3 post template, validating with the MDX renderer.

Create a complete post template in Gatsby.js 3 by wiring front matter (title, category, date, image) with the MDX body and render it via MDXRenderer, with layout, hero, and banner.

Learn how to generate category pages in Gatsby programmatically by querying distinct categories from MDX front matter, then creating category templates and dynamic routes.

Create a category-based query in Gatsby.js by passing a category variable, filtering posts that match the current page’s category via the category template, front matter, and page context.

Learn to render category filtered posts in Gatsby.js 3 by querying MDX nodes, accessing category from page context, and passing post data through props to a dynamic category page.

Set up and render the banner with about, banner categories, and recent components as reusable blocks; configure the title and static image from assets via the image plug in.

Render the recent component in the banner by querying mdx data, limiting to five, sorting by front matter date, and displaying each post’s image, title, date, and slug.

Learn to build a reusable categories component in Gatsby.js 3, fetch distinct categories via MDX queries, and programmatically generate category pages linked from banners.

Place the categories component in the sidebar and render it after the post using the layout's children, so you can control where categories appear.

Discover rendering inline images in MDX posts with the Gatsby remark images plugin and Gatsby image transformations, including config changes and server restart.

Learn to render multiple images with the Gatsby image component using the v3 plugin, embedded images array in front matter, and mdx templates for styling.

Learn how to add videos to a Gatsby site using a regular video component and an iframe, including MDX posts, importing from complete, and styling with a positioned container.

Wrap your entire Gatsby application in the MDX provider to intercept MDX elements, render components via props, and apply themed blockquotes using both browser and SSR APIs.

Wrap the Gatsby app with the MDX provider to enable MDX rendering, configuring a shared components object for both SSR and browser.

Wrap the Gatsby app in the MDX provider to enable custom elements and components in posts, test headings and spans, and explore the MDX reference and Gatsby documentation.

Explore how to use MDX with props and children in Gatsby.js 3, accessing and displaying heading text via props, spreading remaining props, and debugging with console logs.

Import and use heading components in MDX for a Gatsby.js 3 project, import headings as a module, and render title and children content with styled components.

Explore building an MDX heading4 component in a separate file, passing children as props, and returning flexible elements such as inline code, spans, or images using heading4.

Explore implementing inline code in Gatsby.js 3 by creating an inline code component, wiring it into MDX content, and ensuring proper syntax and styling within paragraphs.

Explore creating flexible MDX blockquotes with a display prop to render multiple variants, including default, info, warning, and additional options, with icons and reusable styling.

Install and configure Prism React to highlight code blocks in a Gatsby.js 3 project, choose themes, and build a step-by-step example component with multi-language code blocks and MDX support.

Explore configuring Prism in MDX by debugging code blocks, adjusting language-specific rendering, and applying themes like Visual Studio Dark to customize syntax highlighting.

Explore a Prism setup for a code block in Gatsby, wrapping code in a container, applying a Visual Studio dark theme, and configuring language, theme, and styling through styled components.

Explore a new project design for the table design project, and cover service context, api dynamic, components, and global styles with style components.

Clone the bootstrap starter from the Gatsby.js project, install dependencies, start the local server, and preview the home page on localhost:8000 with side-by-side editing.

Utilize a prebuilt starter with ready folders and imports, set up global styling with styled components, and reuse existing components via a central barrel for global exports.

Learn how to implement a root wrapper to centralize global styles for Gatsby.js 3, ensuring consistent styling in both server-side rendering and Gatsby browser.

Build a responsive navbar with a logo, toggle button, and temporary link buttons. Review implementing header, links, and a media query to switch between small screen toggles and larger-screen links.

Build an about section by iterating a services array to render a reusable title and service components with react icons, reusable in other sections, including mission and vision.

Explore Airtable for easy setup and table-based data management with a free tier and tiered plans like $10 and $20, plus API key security and permissions.

Create an Airtable account, confirm your email, then set up your first workspace, database, and table to kick off your project.

Create a workspace and base, set up grid view, and build a project table with image attachments, a single select type, and date field for querying with the Gadsby plugin.

Explore the api docs to generate your base id and api key from your account. Choose between the Gatsby plugin and the React sdk, using the sdk for simplicity.

Connect Airtable to a Gatsby app using the gatsby-source editable plugin, configure the gatsby config with API key, concurrency, and table mappings, and run Gatsby develop to access Airtable data.

Set up a latest project query on the home page to display newest projects and render list on the project page, with date sorting and image data, limited to three.

Create and populate a customers table with name, image, quote, and title fields, customize field types, configure Gatsby queries, and display a single customer before adding a slider.

Configure Gatsby.js 3 projects for multiple tables, filter for customers, and set up image data with fixed layout to power a customer slider.

Explore the ready-made customers slider component in the Gatsby.js 3 course and how to pass in customer data, with scope-change notes and a pointer to the React slider walkthrough.

Focus on the client-side survey component that updates votes dynamically in a table with react, and shares live results across users via Gatsby's runtime setup.

Runs once on render via useEffect, fetches survey table records using base, and builds items with id and fields while toggling a loading state until data arrives.

Fetch and render a state-backed item list, show loading states via conditional rendering, display each item’s name and votes, and provide a vote button for dynamic updates.

Update item votes dynamically in a Gatsby.js 3 survey app by a vote function that updates the matching item's votes, shows a loading state, and refreshes the table.

Implement an optional alternative loading setup by disabling vote buttons during loading, replacing a brief loading indicator, and signaling disabled state with color change and a not-allowed cursor.

Render the project page by querying all projects with no limit, pass the data to the project component, and preview the results before enabling search filters.

Set up search buttons with conditional rendering in a Gatsby.js 3 project, wiring the page prop to show the search component and pass data and reset functions to search buttons.

Learn to implement search buttons in a Gatsby.js 3 project, generating unique type buttons (kitchen, bathroom, bedroom) from project data, and filter projects by type with an all option.

Set up Algolia search in a Gatsby.js 3 project, connect it to the app, and enable input-based search while evaluating costs and data size for necessity.

Set up a free Algolia account, create an index, and gather the application search key and admin key to connect Gatsby.js 3 projects for development and production builds.

Learn to connect a Gatsby app to Algolia by configuring the algolia plugin with keys, index names, and queries in gatsby-config, then restart the dev server to fetch data.

Learn to integrate Algolia in a Gatsby.js project by moving query logic to a separate file, wiring a transformer, and building to index data and images for frontend search.

Set up a basic Algolia front-end in Gatsby.js 3 by integrating react instant search, adding a search box and hits display, and wiring app ID and index name.

Explore customizing the Algolia search box in a Gatsby.js 3 project by styling with provided classes, and enhancing hits via the Gatsby image, guided by the instant search API reference.

Build a custom Algolia hits UI by using the connect function to wrap a new component, map over the hits, and render each item's image and name.

Set up a global context API in Gatsby.js 3 using createContext and a provider. Access data across components with useContext, wrapping the app in a Gatsby provider for global state.

Create and navigate nested links (sublinks) in Gatsby by wiring sibling pages through a shared product structure, using folder-based pages and a global context to drive dynamic links.

Design a toggleable sidebar in a Gatsby.js 3 project by using context and state to manage visibility and render linked items with icons and labels.

Learn how to build a Gatsby payments page with dynamic routing, displaying the current path, and nesting pages under products and payments with layout and back navigation.

Toggle the Gatsby.js 3 sidebar by implementing show and hide functions via a Gatsby context to track isSidebarOpen and update on link clicks.

Learn to implement nested links in Gatsby navbar by listing unique parent pages, then reveal corresponding sublinks on hover using a two-step data-driven approach with context.

Explore building a tile layout in Gatsby by creating a project tile component, mapping four items in a grid, fixing image height, and linking to all projects.