Gatsby JS | Build a personal blog using gatsbyJS

by


Learn Gatsby JS and GraphQL to increase your knowledge in modern web development.

What you will learn

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

Description

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!


Get Instant Notification of New Courses on our Telegram channel.

Noteβž› Make sure your π”ππžπ¦π² cart has only this course you're going to enroll it now, Remove all other courses from the π”ππžπ¦π² cart before Enrolling!


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

Content

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
Enroll for Free