Master Gatsby (Master Package)

11h 57m 6s
English
Paid

Course description

Building modern websites is tough. Preloading, routing, compression, critical CSS, caching, scaling and bundlers all make for blazing fast websites, but extra development and tooling get in the way. Gatsby is a React.js framework that does it all for you. This course will teach you how to build your websites and let Gatsby take care of all the Hard Stuff.

Read more about the course

What Will You Build?

Together we build a website for a local pizza joint called Slick's Slices. The site includes everything you'd run into in building a website today and is meant to be a nice copy/paste reference for the sites you build.

Some of the topics we touch upon are:

  • Multiple Data Types
  • Custom Fields
  • Progressive Images
  • Relational Data
  • Scoped CSS
  •  Sourcing Data from a REST API
  • Sourcing Data from a CMS 
  • Tags + Filtering
  • Reusable Components
  • Dynamically Generated pages
  • Pagination
  •  Dynamic Order Form
  •  Client side Fetching
  •  Cross Page State Management
  •  SEO + Meta Tags
  •  Emailing of Order
  •  Building
  •  Deployment & Hosting

In this course we also write all the CSS to style the website.

We will learn fun things like CSS Variables, Layouts with Grid (and sub-grid!), Flexbox, clamp(), @supports queries, transforms, scoping CSS, responsive design and so much more!

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 52 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Master Gatsby (Master Package)

0:00
/
#1: Welcome

All Course Lessons (52)

#Lesson TitleDurationAccess
1
Welcome Demo
01:03
2
Tooling and Starter File Setup
13:18
3
What is Gatsby? Why is it so awesome?
09:04
4
Pages in Gatsby
11:18
5
Routing and Navigation in Gatsby
10:57
6
Creating Layouts in Gatsby
17:35
7
Global Styles
14:32
8
Typography
03:16
9
Styling the Nav and Logo
17:15
10
Styling our Layout
12:04
11
Setting up our Headless CMS
15:34
12
Creating the Toppings Content Type and custom previews
11:05
13
Creating Data Relationships
16:03
14
Creating our Person Data Type
04:17
15
Custom CMS Inputs in Sanity
17:38
16
An intro to gatsby-config and sourcing data
08:32
17
Sourcing Sanity Data and GraphQL Introduction
19:33
18
Learning Gatsby Queries
24:08
19
Gatsby Images
13:03
20
Loading in Sample Data
04:57
21
Styling our Pizza Grid with CSS subgrid
08:05
22
Static Queries and Building the Toppings Filter
26:07
23
Dynamically creating pages with gatsby-node
22:42
24
Templating and Styling our Single Pizza Page
04:45
25
Dynamically Creating Toppings Pages
22:38
26
Sourcing Data from an external API
14:32
27
Querying, Displaying and Styling the Beers Page
12:00
28
Querying and Displaying Pagination
13:07
29
Paginating Data in Gatsby
16:22
30
Filtering the data based on Pagination
03:53
31
Creating a reusable Pagination Component
20:25
32
Single Slicemaster Pages
08:33
33
Gatsby SEO and Head Tags
26:21
34
Creating the Order page with Custom Hooks
28:37
35
Styling our Order Form
09:58
36
Custom Hook for our Order Form
18:56
37
Calculating our Order Total
06:16
38
Moving our Order State to React Context with a custom Provider
13:54
39
An Intro to Serverless Functions
16:26
40
Modifying our Custom Hook to send the order data
20:44
41
Coding our Serverless Function
12:45
42
Setting Error, Loading and Success States
08:40
43
Creating a Honey Pot to defend against bots
06:57
44
Creating a one-off Store Settings Page
14:28
45
Custom Hook for Client Side Data Fetching
24:47
46
Creating a Skeleton Screen while Loading Items
18:22
47
Displaying the Home Page Data
20:33
48
Building and Deploying our Headless Sanity CMS
03:27
49
Building our Gatsby Site
03:29
50
Deploying to Netlify
17:19
51
Hosting the Gatsby Website on your own server
04:13
52
Making the Website Responsive
22:33

Unlock unlimited learning

Get instant access to all 51 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Gatsby Tutorial and Projects Course

Gatsby Tutorial and Projects Course

Sources: udemy
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 provid...
21 hours 48 minutes 56 seconds