Gatsby JS | Build a personal blog using gatsbyJS

Gatsby JS | Build a personal blog using gatsbyJS

Gatsby JS | Build a personal blog using gatsbyJS

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

Language: english

Note: 4.2/5 (218 notes) 75,134 students

Instructor(s): Tech Vista

Last update: 2021-01-22

What you’ll 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



  • Basic knowledge about React, Javascript and Web Development before enrolling this course



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!


Who this course is for

  • Front End Developers
  • Anyone who wants to learn GatsbyJS


Course 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
    • Resources


Gatsby JS | Build a personal blog using gatsbyJS

Google Project Management [Coursera with Google]

Time remaining or 875 enrolls left


Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate