Gatsby JS Prismic- Build RAPID Gatsby sites [Gatsby.js v4]

Gatsby JS & Prismic: Build RAPID Gatsby sites [Gatsby.js v4], available at $59.99, has an average rating of 4.3, with 26 lectures, based on 110 reviews, and has 613 subscribers.

You will learn about Increase your value and improve your knowledge as a front-end / React JS developer Learn Gatsby Create a static, server-compiled, content-driven website using Gatsby JS (with React JS & GraphQL) Learn how to use GraphQL and GraphiQL in Gatsby to query data stored in Prismic CMS Deploy your Gatsby JS static website and rebuild whenever our Prismic content changes using Netlify Use Netlify forms from within Gatsby to capture users email address and personal details This course is ideal for individuals who are React developers who want to increase their value and skillset or React developers who want to get ahead of the game and learn more than the average developer or Developers who want to generate and create rapid websites and landing pages for their clients It is particularly useful for React developers who want to increase their value and skillset or React developers who want to get ahead of the game and learn more than the average developer or Developers who want to generate and create rapid websites and landing pages for their clients.

Enroll now: Gatsby JS & Prismic: Build RAPID Gatsby sites [Gatsby.js v4]

Summary

Title: Gatsby JS & Prismic: Build RAPID Gatsby sites [Gatsby.js v4]

Price: $59.99

Average Rating: 4.3

Number of Lectures: 26

Number of Published Lectures: 26

Number of Curriculum Items: 26

Number of Published Curriculum Objects: 26

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will Learn

Increase your value and improve your knowledge as a front-end / React JS developer

Learn Gatsby

Create a static, server-compiled, content-driven website using Gatsby JS (with React JS & GraphQL)

Learn how to use GraphQL and GraphiQL in Gatsby to query data stored in Prismic CMS

Deploy your Gatsby JS static website and rebuild whenever our Prismic content changes using Netlify

Use Netlify forms from within Gatsby to capture users email address and personal details

Who Should Attend

React developers who want to increase their value and skillset

React developers who want to get ahead of the game and learn more than the average developer

Developers who want to generate and create rapid websites and landing pages for their clients

Target Audiences

React developers who want to increase their value and skillset

React developers who want to get ahead of the game and learn more than the average developer

Developers who want to generate and create rapid websites and landing pages for their clients

Do you want to improve your React JS skills and increase your value as a front-end developer?

– “Gatsby lets you build blazing fast sites with your data, whatever the source. Liberate your sites from legacy CMSs and fly into the future.”

In this course we’ll be building a Gatsby site from a Prismic CMS data source!

Level-up your React skillset by learning Gatsby.js with a Prismic CMS backend! Gatsby JS uses React JS and GraphQL to generate and build static pages from a given dataset. This course will look at setting up Prismic as a headless CMS while using GatsbyJS to generate a blazing-fast server-rendered React website from Prismic data, such as pages, menus, media, (and more!) using GraphQL to query that data.

We’ll be creating a landing page website in this course, looking at initial setup and development of Gatsby JS and Prismic locally, creating React components in Gatsby based on Prismic data, and querying Prismic data with GraphQL to automatically generate our static pages.

No landing page is complete without a contact form so we’ll be creating a dynamic contact page in Gatsby where we can update our form fields within Prismic and use formspree to capture our user’s email address and various other details.

We’ll look at how we can query Prismic data with GraphQLusing the GraphiQL browser tool. Once we’re familiar and comfortable developing with GatsbyJS and Prismic, we’ll progress onto setting up and deploying a live website using Gatsby cloud that re-builds our static web pages every time we update content in our Prismic backend.

It’s recommended you have rudimentary knowledge of React. We’ll be covering everything else from Gatsby.js, Prismic, GraphQL, and styled-components!

Speed past the competition with Gatsby!

Gatsby.js builds the fastest possible website. Instead of waiting to generate pages when requested, Gatsby pre-builds pages and lifts them into a global cloud of servers (we’ll be using Gatsby cloud for this) – ready to be delivered instantly to your users wherever they are.

Some advantages of using Gatsby include:

No waiting for API responses

No waiting to render components based on requested data

No loading spinners!

No waiting for a server to compile a page to serve to the browser – these pages are already pre-compiled with Gatsby and ready to serve instantly to your users!

We certainly cover a lot in this Gatsby course!

Course Curriculum

Chapter 1: Introduction & Setup

Lecture 1: Important: Before you begin this course

Lecture 2: Introduction – overview of the Gatsby JS + Prismic course

Lecture 3: Udemy reviews and ratings

Lecture 4: Gatsby overview and project setup

Lecture 5: Prismic setup and overview

Lecture 6: Linking Gatsby to Prismic

Chapter 2: Page generation and rich text

Lecture 1: Querying Prismic data using the GraphiQL tool

Lecture 2: Generating pages from Prismic data in Gatsby

Lecture 3: Rendering the Title field using the RichText component

Lecture 4: Rendering the rich text field using the RichText component

Chapter 3: Navigation

Lecture 1: Create and query for the navigation

Lecture 2: Rendering and styling the navigation

Chapter 4: Prismic slices

Lecture 1: Create the homepage and hero slice

Lecture 2: Rendering the homepage and hero slice

Lecture 3: Finishing the hero component

Lecture 4: Create the call to action slice

Lecture 5: Finish the call to action component

Lecture 6: Create the price options slice

Lecture 7: Finsihing the price options component

Chapter 5: Contact page and form

Lecture 1: Create the contact page and contact form slice

Lecture 2: Finishing the contact form

Chapter 6: Finishing touches

Lecture 1: Search Engine Optimisation (SEO)

Lecture 2: Rich text slice and component

Lecture 3: Handling internal links in Rich Text

Chapter 7: Deploy Gatsby site to production / live site

Lecture 1: Deploy to Gatsby Cloud & auto rebuild site whenever prismic data changes

Lecture 2: BONUS

Instructors

Tom Phillips
Fast-paced information-dense courses for busy web developers

WebDevEducation (Tom Phillips)
Fast-paced information-dense courses for busy web developers

Rating Distribution

1 stars: 4 votes

2 stars: 2 votes

3 stars: 4 votes

4 stars: 43 votes

5 stars: 57 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!