Learn Gatsby JS and GraphQL to increase your knowledge in modern web development.
☑ Gatsby Fundamentals
☑ React Hooks API with functional components
☑ GraphQL and the built in GraphQL editor
☑ Components, props and state
☑ JSX syntax and expressions
☑ Markdown
☑ Styled Components
Learn to build blazing fast apps and websites with React using Gatsby, a static PWA (Progressive Web App) generator! Starting from scratch, you’ll learn to build a full blog app
Gatsby is a React-based, GraphQL powered static site generator. It combines together the best parts of React, webpack, react-router, GraphQL, and other front end tools to provide excellent developer experience. Gatsby is far more than typical static site generator though. You can think of it more like a modern front-end framework.
Find out how to work with Gatsby pages, assets, and components, and style your sites using styled components.
Use GraphQL in Gatsby for storing and retrieving data, create pages and posts with Markdown, optimize your images automatically with the gatsby-image.
Learn Gatsby JS and be a top contender for modern Front End developer jobs!
Want to learn one of the hottest things in Web Development in 2021?
Do you already know some React and want to push forward from there?
Do you enjoy project oriented and fast paced courses?
Do you want to learn quick and straight down to the point?
Would you like to Improve your insight, esteem and be a top competitor in enlistment measures?
Then this is the course for you!
English
Language
Introduction
Introduction
What is Gatsby?
Setup
Gatsby CLI
Folder Structure
Installing Dependencies
Setting up Plugins and Config file
Absolute Imports
Tech – Optional
What is Markdown?
Creating Markdown files and front matter for our project
What is GraphQL?
GraphQL Query types in Gatsby
GraphQL Editor
Styled Components
Global Styles
Colors and themes
Adding CSS for our website
Layout
Layout Explained
Project Cleanup
Index
Create custom hook useMetaDataQueryHook
Header
create custom hook useSiteConfigQueryHook
Create Header Component
Styling Header Component
Create Menu Component
Styling Menu Component
Create Hamburger Component
Styling Hamburger Component
Header – Mobile Menu – Index
Header – Mobile Menu – Styles
Creating Home Page
Creating Page Query
Image Query
Home Banner Index
creating custom hook for banner image
Creating Index for Background Image
Styling Background Image
Styling Home Banner Component
Creating Index for Blog Post Card Component
Styling Blog Post Card
Finishing Home Page
Setting Light and Dark Mode
ModeProvider and Context
Gatsby Browser APi
Theme Button Index and Styles
Implementing Theme Switch Button
Creating Slugs for Posts and Pages
Pages and Posts Graphql query
Creating Page and Post templates
Dynamically create pages and posts
Creating Pagination in Node
Home page template
Creating Page Navigation Component
Styling Page Navigation