Learn Gatsby and build website

Name: Learn Gatsby and build website
Rating: 4.3 (44 reviews)

Build your own blazing fast blog website with Gatsby and add Jam Stack to you toolkit

Created byAshutosh Bhardwaj

Last updated 3/2020

English

What you'll learn

How to building blazing fast website using Gatsby
How to add styles using tailwindcss
How to build and use reuseable components like Layout
How to use markdown files to generate data for blog
How to deploy Gatsby website to Netlify

Course content

5 sections • 15 lectures • 1h 21m total length

Introduction1:05
Hello and welcome
In this lecture, we are going to cover the introduction of the course
How Gatsby works?2:00
Hello and welcome
In this lecture, we are going to quickly cover How Gatsby works. We'll get an overview of the various steps of building a Gatsby project.
Setup development environment3:48
Hello and welcome
In this lecture, we are going to learn How to set up the development environment so that you guys can follow along.

We need to have NodeJs and Git pre-installed in the computer
I'm going to add the How to links in Resources section

Getting familiar with project sturcture8:46
Hello and welcome
In this lecture, we are going to get familiar with the file structure of a gatsby project.
We are going to see what folder and files get created when you run gatsby new project-name command
Styling in Gatsby0:55
Hello and welcome
In this lecture, we are going to learn How to add styles in gatsby project and what are the options
Adding tailwindcss for styling6:07
Hello and welcome
In this lecture, we are going to learn How to add tailwindcss to a gatsby project and use it to write styles for React components

Creating Layout in Gatsby9:48
Hello and welcome
In this lecture, we are going to learn How to create Layout component for our gatsby website
Add Data in Gatsby1:28
Hello and welcome
In this lecture, we are going to learn How to add data in a gatsby project
Write first GraphQL query in Gatsby4:34
Hello and welcome
In this lecture, we are going to learn How to write your first GraphQL query in gatsby
Optimise image using Gatsby Image2:50
Hello and welcome
In this lecture, we are going to learn How to optimize and use images in a gatsby project using plugin gatsby-image

How to add data for blog in Gatsby7:10
Hello and welcome
In this lecture, we are going to learn How to add data for blog post
Dynamically creating blog pages10:30
Hello and welcome
In this lecture, we are going to learn How to create pages dynamically using data available in gatsby
Add Image and style to blog post7:16
Hello and welcome
In this lecture, we are going to add styles and image to the blog posts to make them look pretty
Build blogs page for blog listing7:44
Hello and welcome
In this lecture, we are going to learn How to create all blogs page where we list all the blogs in our website

Requirements

Working knowledge of React

Description

Learn Gatsby and build a website

In this course, you will be learning the fundamentals of Gatsby so that you can build your own blazing fast blog website with Gatsby
Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps

We will start with an introduction to Gatsby, then set up the development environment so that you can follow along.
After getting familiar with the file structure of the project we will cover the fundamentals like adding styles to the page. How to add data in Gatsby using GraphQL and then with the knowledge we gain. We will build our own travel blog website.

At last, we deploy our blazing-fast website online with the help of Netlify

Who this course is for:

Beginner React developers want to create blazing fast PWA, SEO optimized, static websites with Gatsby
Web developers curious to build blazing fast websites

Learn Gatsby and build website

What you'll learn

Explore related topics

Course content

Introduction to Gatsby3 lectures • 7min

Get started with Gatsby3 lectures • 16min

Gatsby building blocks4 lectures • 19min

Let's build blog website4 lectures • 33min

Deploy Gatsby PWA to Netlify1 lecture • 8min

Requirements

Description

Who this course is for: