Build Gatsby site with React and WordPress as a headless CMS

Focused View

Tech Vista

4:07:22

203 View

1. Introduction and Setup

1. Introduction.mp4

02:17

2. Setup WP Site using Local by FlyWheel.mp4

06:22

3. WP site and needed WP Plugins.mp4

07:08

4. Short about tooling.mp4

01:22

5. Create a new Gatsby Project with Gatsby CLI.mp4

03:47

6. Install Dependencies.mp4

02:41

7. Copy from Starter Files and cleanup.mp4

11:05

8. Setup Gatsby plugins.mp4

06:37

2. Layout Component

1. Layout - Creating Component.mp4

02:32

2. Layout - Hamburger.mp4

05:38

3. Layout - GraphQL Query and custom hook.mp4

07:22

4. Layout - Header.mp4

06:09

5. Layout - Navigation.mp4

14:22

6. Layout - Footer.mp4

02:41

7. Layout - OverlayMenu.mp4

09:26

3. Index Page

1. Index - HeroImage - GraphQL query.mp4

05:15

2. Index - HeroImage.mp4

08:20

3. Index - CtaArea - GraphQL query.mp4

06:49

4. Index - CtaArea.mp4

03:24

5. Index - Cta.mp4

08:20

6. Index - Latest Blog Post - GrqphQL query.mp4

02:32

7. Index - Latest Blog Post.mp4

06:05

8. Index - Quote - GraphQL query.mp4

02:27

9. Index - Quote.mp4

04:30

10. Index - About - GraphQL query.mp4

02:37

11. Index - About.mp4

06:02

4. Page Template

1. Page - Create pages with the Route API.mp4

03:45

2. Page - Structuring.mp4

03:49

3. Page - Page query.mp4

07:11

4. Page - PageHero.mp4

06:05

5. Page - BreadCrumb.mp4

05:50

6. Page - Sidebar and content.mp4

16:07

5. Archive Template (Blog)

1. Archive - Gatsby-node - GraphQL query.mp4

06:05

2. Archive - Template Structure.mp4

02:23

3. Archive - gatsby-node - Create Pages.mp4

10:09

4. Archive - Template - Page Query.mp4

04:03

5. Archive - Template - Hero Image and BreadCrumb.mp4

02:41

6. Archive - Template - Sidebar.mp4

08:02

7. Archive - Template - Content.mp4

04:17

8. Archive - Template - Pagination.mp4

06:14

6. Post Template

1. Posts - Create post pages with the Route API.mp4

01:49

2. Posts - Scaffolding.mp4

04:16

3. Posts - Page query.mp4

02:50

4. Posts - Sidebar and content.mp4

05:56

Description

Create a REAL WORLD Front End with Gatsby.js, React and WordPress as a Headless CMS!!

What You'll Learn?

Setup a project from scratch with Gatsby CLI
GraphQL
Integrate WordPress as a headless CMS to Gatsby
Create website using Gatsby and WordPress(Headless CMS)
React Wordpress

Who is this for?

Students who wants to create projects on Gatsby and Wordpress

What You Need to Know?

Basic knowledge of Javascript

More details

Description
Gatsby with WordPress as a headless use React and the static site generator Gatsby to build a front end for a WordPress site
Create a REAL WORLD CLIENT Front End with Gatsby.js and WordPress as a Headless CMS!!
This course will NOT teach you how to build a WordPress site. The actual WordPress backend is pre built and I will not show how to build that. The sole purpose of this course is to teach Gatsby and how you can use Gatsby to create a Front End from a WordPress CMS. The purpose is NOT to show how the complete site is built with WordPress.
Are you a developer that like â€œcode alongâ€ style learning? Do you want to learn Gatsby.js fundamentals in a real world project oriented course? Do you like quick learning and straight down to the point? Then this is the course for you!
In this course weâ€™re building a real world website in Gatsby.js
My teaching style and belief is that you learn more by creating many smaller projects than one overwhelming 25 + hours course that tries to show you everything and donâ€™t focus on the fundamentals that much. So this is a shorter, project oriented, course where Youâ€™ll learn how to create a real world client site from scratch with Gatsby.js. Gatsy uses GraphQL by default so this is an awesome way to start with some GraphQL.

What this course is!
This is an intermediate course. I assume that you know some Javascript and React
This is a quite fast paced project oriented course to learn the fundamentals of Gatsby.js
This is a course were you will learn GraphQL basics.
This is a â€œcode alongâ€ style of course.
This is a course were you will learn how to connect an existing WordPress site to Gatsby.js and use it as a Headless CMS.
This is a course were you will use React. It will not teach basics of React but it should be good for an intermediate React developer.
This is a course that uses a lot of ES6 Syntax.
What this course IS NOT!
This course is not a beginner React course
This course will not deeply explain React syntax.
This course will not teach GraphQL in detail. (We will use it though and should be a great overview/start to learn GraphQL)
This course will not teach WordPress and how the actual WordPress backend is built. Weâ€™re not building anything in WordPress. The course is focused to learn Gatsby.js and how to connect an existing WordPress site to Gatsby.
My main goal with this course is to mix fun with teaching. Thereâ€™s many tutorials and courses out there that are great but too complex and focus on a lot at the same time. Hope you enjoy it too!
Please make sure to download the STARTER FILES from the resources!
Who this course is for:
Students who wants to create projects on Gatsby and Wordpress

User Reviews

Rating

average 0

Total votes0

Focused display

At Tech Vista, technology is all we teach. If you're interested in IT, programming, development or design - we have it covered.We aim to teach technology the way it is used in industry and professional world.Tech Academy has engaged in various types of projects for companies and understands what is required to prepare students with the relevant skills they need.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.