Gatsby JS | Build a personal blog using gatsbyJS

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

4.15 (207 reviews)
Udemy
platform
English
language
Web Development
category
instructor
Gatsby JS | Build a personal blog using gatsbyJS
72,938
students
5 hours
content
Jan 2021
last update
$19.99
regular price

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!

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!

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

Reviews

Enzo
April 19, 2022
Very well structured - much stronger overview than your typical intro course. This workable project can easily be modified or improved on.
Sai
September 20, 2021
Initially I felt it was an uphill task as I don't have basics of ReactJs and nor the confidence. But now It became much easier to understand and Thanks a lot for such an wonderful explanation.
Gavin
August 8, 2021
boring, not very engaging, he's clearly reading off a script and not really explaining why some steps are done. He just reads straight off the gatsby docs site which anyone can do, needs to explain the concepts better. feels like some things are included for the sake of being included - eg how does adding in graphql help us? why do we need to access the metadata? etc they might be useful, but just doesnt seem clear what the point of it all is.
Shahil
April 30, 2021
I am very pleased with this course. The instructor is extremely thorough and thoughtful in his teaching, and this course is preparing me to start my own portfolio website with Gatsby.
Kamil
April 16, 2021
After this course I feel ready to create my own Gatsby blog website. This is a very good course & definitely deserves those high ratings.
Needal
February 8, 2021
Very good so far. Well explained and the course project looks fully functioning and professionally done, which really differentiates this course from some others. Love the instructor teaching style!

Charts

Price

Gatsby JS | Build a personal blog using gatsbyJS - Price chart

Rating

Gatsby JS | Build a personal blog using gatsbyJS - Ratings chart

Enrollment distribution

Gatsby JS | Build a personal blog using gatsbyJS - Distribution chart

Coupons

DateDiscountStatus
6/1/2021100% OFF
expired
6/8/2021100% OFF
expired
6/15/2021100% OFF
expired
7/2/2021100% OFF
expired
7/10/2021100% OFF
expired
7/12/2021100% OFF
expired
7/14/2021100% OFF
expired
8/1/2021100% OFF
expired
8/6/2021100% OFF
expired
9/4/2021100% OFF
expired
9/9/2021100% OFF
expired
9/25/2021100% OFF
expired
10/3/2021100% OFF
expired
10/9/2021100% OFF
expired
10/17/2021100% OFF
expired
11/2/2021100% OFF
expired
11/8/2021100% OFF
expired
11/9/2021100% OFF
expired
12/3/2021100% OFF
expired
12/9/2021100% OFF
expired
12/10/2021100% OFF
expired
1/2/2022100% OFF
expired
1/5/2022100% OFF
expired
1/10/2022100% OFF
expired
2/11/2022100% OFF
expired
2/15/2022100% OFF
expired
2/20/2022100% OFF
expired
3/3/2022100% OFF
expired
3/9/2022100% OFF
expired
3/12/2022100% OFF
expired
4/3/2022100% OFF
expired
4/9/2022100% OFF
expired
4/17/2022100% OFF
expired
6/15/2022100% OFF
expired
6/17/2022100% OFF
expired
6/19/2022100% OFF
expired
7/15/2022100% OFF
expired
7/18/2022100% OFF
expired
7/20/2022100% OFF
expired
8/5/2022100% OFF
expired
8/11/2022100% OFF
working

Related Topics

3694744
udemy ID
12/10/2020
course created date
1/20/2021
course indexed date
Bot
course submited by