Learn Gatsby JS and React with Projects Experience

Learn Gatsby JS and React with Projects Experience, available at $49.99, has an average rating of 4.25, with 172 lectures, based on 24 reviews, and has 136 subscribers.

You will learn about Improve your overall skills as a Frontend web developer by diving into the JAMSTACK Learn ReactJS from scratch, which is a fundamental building block for GatsbyJS Learn to build blazingly fast websites with GatsbyJS and GraphQL Learn how to use GraphQL, GraphiQL and Playground to query data from multiple sources Learn to manage your site content using a headless CMS such as Contentful Automatically deploy your GatsbyJS website and continuously deliver new content using Netlify, Vercel or Gatsby Cloud Build several exciting projects This course is ideal for individuals who are Anyone who wants to improve their skills as a frontend developer and get some projects experience or Anyone who wants to learn how to build blazingly fast websites using Gatsby and React from scratch It is particularly useful for Anyone who wants to improve their skills as a frontend developer and get some projects experience or Anyone who wants to learn how to build blazingly fast websites using Gatsby and React from scratch.

Enroll now: Learn Gatsby JS and React with Projects Experience

Summary

Title: Learn Gatsby JS and React with Projects Experience

Price: $49.99

Average Rating: 4.25

Number of Lectures: 172

Number of Published Lectures: 172

Number of Curriculum Items: 172

Number of Published Curriculum Objects: 172

Original Price: $29.99

Quality Status: approved

Status: Live

What You Will Learn

Improve your overall skills as a Frontend web developer by diving into the JAMSTACK

Learn ReactJS from scratch, which is a fundamental building block for GatsbyJS

Learn to build blazingly fast websites with GatsbyJS and GraphQL

Learn how to use GraphQL, GraphiQL and Playground to query data from multiple sources

Learn to manage your site content using a headless CMS such as Contentful

Automatically deploy your GatsbyJS website and continuously deliver new content using Netlify, Vercel or Gatsby Cloud

Build several exciting projects

Who Should Attend

Anyone who wants to improve their skills as a frontend developer and get some projects experience

Anyone who wants to learn how to build blazingly fast websites using Gatsby and React from scratch

Target Audiences

Anyone who wants to improve their skills as a frontend developer and get some projects experience

Anyone who wants to learn how to build blazingly fast websites using Gatsby and React from scratch

Gatsby JS is a React-based framework and static site generator powered by Graphql. By offering you performance, SEO, security, integrations and accessibility out of the box, Gatsby makes the hardest parts of building an amazing digital experience simple.

In this course, you’ll learn how to build blazingly fast, dynamic websites using Gatsby and React.

Because Gatsby is built on React, you’ll first learn some key React concepts that will help you to build a solid foundation of how React works.You’ll learn things like

Package managers, NPM and Yarn

JSX, Components and props

Events and state

Lists and conditional rendering

Routing and many other useful concepts.

We’ll build some exciting projects where we put all these core React concepts into action to gain some real hands-on experience.

AND WE’RE ONLY GETTING STARTED!

Then, we’ll dive into Gatsby itself. See how to

create new static sites with Gatsby

query and pull in data from multiple sources using Graphql

connect our site to a Contentful Content Management System (CMS) that manages our content

build dynamic web apps using data from third party APIs

use Gatsby’s large, useful ecosystem of plugins to make things like Search Engine Optimization (SEO) and lazy loading images a breeze

deploy your finished projects to the cloud

If you’re excited about building blazingly fast, highly performant and dynamic websites with Gatsby, a React framework that opens doors to all the cool stuff that the JAMStack offers you, then this course is for you.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction to the course

Lecture 2: How to get help

Lecture 3: What is Gatsby JS

Lecture 4: Gatsby compared to CRA and Next (part 1)

Lecture 5: Gatsby compared to CRA and Next (part 2)

Lecture 6: Prerequisites

Chapter 2: ReactJS Bootcamp

Lecture 1: Welcome to the bootcamp

Lecture 2: Introduction to ReactJS

Lecture 3: Setting up

Lecture 4: React installation

Lecture 5: Getting comfy with the environment

Lecture 6: JSX

Lecture 7: Introduction to React components

Lecture 8: Function component

Lecture 9: Class component

Lecture 10: Side note on components

Lecture 11: Props (in function component)

Lecture 12: Props (in class component)

Lecture 13: React state and events

Lecture 14: State (in class component)

Lecture 15: State (in function component using the useState hook)

Lecture 16: Render list of items in React

Lecture 17: Side note on rendering list of items

Lecture 18: Conditional rendering

Lecture 19: PROJECT: Favybooks – introduction

Lecture 20: PROJECT: Favybooks – basic setup

Lecture 21: PROJECT: Favybooks – display list of favy books

Lecture 22: PROJECT: Favybooks – add new books

Lecture 23: PROJECT: Favybooks – delete books

Lecture 24: Styling in React

Lecture 25: Displaying images in React

Lecture 26: Introduction to routing

Lecture 27: React router

Lecture 28: Installing react-router-dom

Lecture 29: Setting up routing project

Lecture 30: Setting up routes

Lecture 31: The exact prop

Lecture 32: Adding navigation

Lecture 33: URL parameters

Lecture 34: PROJECT: DevPortfolio – Introduction

Lecture 35: PROJECT: DevPortfolio – create project using CRA

Lecture 36: PROJECT: DevPortfolio – setup project structure

Lecture 37: PROJECT: DevPortfolio – create component and page skeletons

Lecture 38: PROJECT: DevPortfolio – set up routing

Lecture 39: PROJECT: DevPortfolio – installing bootstrap and icons

Lecture 40: PROJECT: DevPortfolio – creating the navbar

Lecture 41: PROJECT: DevPortfolio – creating the hero

Lecture 42: PROJECT: DevPortfolio – creating services

Lecture 43: PROJECT: DevPortfolio – creating projects 1

Lecture 44: PROJECT: DevPortfolio – creating projects 2

Lecture 45: PROJECT: DevPortfolio – creating contact 1

Lecture 46: PROJECT: DevPortfolio – creating contact 2

Lecture 47: PROJECT: DevPortfolio – creating contact 3 (adding state)

Lecture 48: PROJECT: DevPortfolio – creating contact 4 (installing emailJS)

Lecture 49: PROJECT: DevPortfolio – creating contact 5 (send email using emailJS)

Lecture 50: PROJECT: DevPortfolio – creating contact 6 (test email)

Lecture 51: PROJECT: DevPortfolio – creating the footer

Lecture 52: PROJECT: DevPortfolio – creating the portfolio 1

Lecture 53: PROJECT: DevPortfolio – creating the portfolio 2 (convert projects to array)

Lecture 54: PROJECT: DevPortfolio – adding the portfolio 3 (rendering list of projects)

Lecture 55: PROJECT: DevPortfolio – adding custom font

Lecture 56: PROJECT: DevPortfolio – pushing project to Github

Lecture 57: PROJECT: DevPortfolio – deploying to Vercel 1

Lecture 58: PROJECT: DevPortfolio – deploying to Vercel 2

Chapter 3: Setting up Gatsby

Lecture 1: Installing Node

Lecture 2: Installing NPM / Yarn

Lecture 3: Installing Git

Lecture 4: Installing the Gatsby CLI globally

Lecture 5: Gatsby –help

Lecture 6: How to fix permission issues during installation

Chapter 4: Creating your first Gatsby site

Lecture 1: Intro to the project (ZakySports)

Lecture 2: Creating new site using Gatsby CLI

Lecture 3: Running project in dev mode

Chapter 5: Getting comfy with the Gatsby environment

Lecture 1: Installing Prettier for syntax highlighting

Lecture 2: Getting familiar with the Gatsby environment

Lecture 3: Config files eg. package.json, gatsby-node.js, etc

Lecture 4: The public folder

Lecture 5: The main project directory (src)

Lecture 6: Making changes to the UI

Chapter 6: Pages and sub components

Lecture 1: Creating new pages (news, sports)

Lecture 2: Creating subcomponent (header)

Lecture 3: Creating subcomponent (footer)

Chapter 7: Linking between pages

Lecture 1: Using Link in header

Lecture 2: Navigating between pages using header

Lecture 3: 404 page (attempting to go to a page that does not yet exist)

Chapter 8: Layouts

Lecture 1: Creating Layout component (using header and footer)

Lecture 2: Using your Layout in pages

Chapter 9: Styling your Gatsby application

Lecture 1: CSS Modules – creating a css module (module.css)

Lecture 2: CSS Modules – using css module in a component

Lecture 3: CSS Modules – styling header component using css module

Lecture 4: Styled Components – setting up styled components in Gatsby

Instructors

Mohammed Zakari
Software Engineer, loves to teach!

Rating Distribution

1 stars: 0 votes

2 stars: 1 votes

3 stars: 4 votes

4 stars: 9 votes

5 stars: 10 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!