Categories

There are currently no items in your shopping cart.

User Panel

Forgot your password?.

Gatsby Tutorial and Projects Course

Video Introducing this tutorial


Tutorial :
Introduction
What is Gatsby?
What is Contentful?
What is Netlify?
Course Requirements
Workspace Setup
Install Gatsby
Start Dev Server
Folder Structure - Cache, Node Modules, Public
Folder Structure - SRC Folder
Folder Structure - .gitignore and prettier
Folder Structure - gatsby-browser and gatsby-ssr
Folder Structure - gatsby-config,gatsby-node, package.json
Adding Regular CSS
Adding SASS
Adding Bootstrap
Adding Styled Components
Styled Components - Global Styles
Icons - React Icons
Create Pages
Links
Creating Components
GraphQL Intro
Gatsby Data Layer in a Nutshell
GraphiQL Interface
First Query - Get Site MetaData
Second Query - Get all Images
Query Arguments
StaticQuery
Layout Component
PageQuery
Basic Image
Gatsby image-plugin
Fixed Images
Fluid Images
Image File
Contentful Intro
Create Products in Contentful
Connecting To Contentful
Environment Variables
GraphiQL Contentful
Display Contentful Products
Create Product Template
Create Pages Intro
Create Pages
GraphQL Query Variables
Complete Product Template
Deploy On Netlify
Site Changes/ Hooks
Finished Project Code

Coffee Shop Project :
Intro
Workspace Setup
Setup Files and Future Resources
Spring Cleaning
Project Coffee Cup Icon
Adding Bootstrap
Adding React Icons
Netlify - Github - Pipeline Setup
Netlify - Github - Pipeline Completed
Navbar Component
Basic CSS
Netlify-Github Pipeline Revisited
Background Image Component
Info Section and Title Component
Footer Component
About Page
Contentful Intro
Contentful Setup
Content Model Setup
Add Content Items
Connect Gatsby Application to Contentful
Creating Build Variables on Netlify
Resources Folder Details
Coffe Item GraphQL Query
Menu Component Initial Setup
Display Coffee Items
Filter Categories
Adding Product Content Model and Extra Category
Testing Product Query
Rendering Products
Contact Section
Add Formspree Service
Snipcart Intro
Connect Gatsby to Snipcart
Snipcart Setup
Testing Snipcart
Webhooks
Finished Project Source Code

Restaurant Project :
Intro
Workspace Setup
Setup Video
Install Gatsby
Gatsby Folder Structure
Deploy On Netlify
Project Spring Cleaning
Use CSS in Gatsby
Use Bootsrap in Gatsby
Use SASS in Gatsby
Use Styled-Components in Gatsby
Use React-Icons in Gatsby
Navbar Component
Navbar Component State and Methods
Navbar Header Component
Styled-Components Setup
Navbar Links Component
Navbar Links CSS
Navbar Links Screen Size
Navbar Icons Component
Pages Setup
Push To Github/Deploy on Netlify
Home Header Component
Page Header Component
Styled Components Extension
Banner Component
Banner Button
Quick Info Section
Section Title Component
Section Button
Quick Info Section Completed
Footer Component
Footer Component Bug Fix
Gatsby Starter Project
Gatsby Image Plugin
Gallery Section Basics
Gallery Section StaticQuery
Gallery Section Request Multiple Images
Gallery Section CSS Grid
Gallery Section Request Multiple Images in one Query
Gallery Section Modified
Contenful Service Setup
Access Data
Environment Variables
Menu Component
Product Component and Netlify/Contentful Hooks