Learn Gatsby JS and GraphQL to increase your knowledge of modern web development.
This course includes:
- 5 hours of on-demand video
- 15 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of completion
Share
Gift this course Apply Coupon
4.2
(242 ratings)
Created by Tech Vista
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
Course content
7 sections • 52 lectures • 4h 46m total lengthCollapse all sections
Introduction2 lectures • 5min
- IntroductionPreview01:09
- What is Gatsby?Preview03:23
Setup5 lectures • 28min
- Gatsby CLIPreview03:38
- Folder StructurePreview06:00
- Installing Dependencies05:09
- Setting up Plugins and Config file06:01
- Absolute Imports07:39
Tech – Optional6 lectures • 15min
- What is Markdown?04:17
- Creating Markdown files and front matter for our project04:45
- What is GraphQL?01:15
- GraphQL Query types in Gatsby00:47
- GraphQL Editor02:08
- Styled Components02:00
Global Styles2 lectures • 20min
- Colors and themes07:44
- Adding CSS for our website11:54
Layout4 lectures • 22min
- Layout Explained02:17
- Project Cleanup05:47
- Index05:39
- Create custom hook useMetaDataQueryHook08:02
Header20 lectures • 2hr 7min
- create custom hook useSiteConfigQueryHook09:41
- Create Header Component05:27
- Styling Header Component04:34
- Create Menu Component06:15
- Styling Menu Component05:52
- Create Hamburger Component02:34
- Styling Hamburger Component08:55
- Header – Mobile Menu – Index03:54
- Header – Mobile Menu – Styles10:05
- Creating Home Page07:13
- Creating Page Query11:51
- Image Query07:02
- Home Banner Index02:07
- creating a custom hook for banner image08:20
- Creating Index for Background Image02:01
- Styling Background Image07:22
- Styling Home Banner Component07:05
- Creating Index for Blog Post Card Component05:25
- Styling Blog Post Card06:15
- Finishing Home Page05:24
Setting Light and Dark Mode13 lectures • 1hr 10min
- ModeProvider and Context04:50
- Gatsby Browser APi01:59
- Theme Button Index and Styles04:34
- Implementing Theme Switch Button06:47
- Creating Slugs for Posts and Pages04:10
- Pages and Posts Graphql query04:39
- Creating Page and Post templates12:04
- Dynamically create pages and posts08:35
- Creating Pagination in Node05:46
- Home page template04:54
- Creating Page Navigation Component04:31
- Styling Page Navigation06:37
- Resources00:08
Requirements
- Basic knowledge about React, Javascript, and Web Development before enrolling in this course
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 an excellent developer experience. Gatsby is far more than a 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 quickly and straight down to the point?
Would you like to Improve your insight, and 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
Show less
