Gatsby Tutorial V2

GATSBY V3 Tutorial and Recipes Site Project

Source Code

Products I Use:

Books I Recommend:

Disclosure: This video is not sponsored. Some links above are affiliate links, and l may earn a small commission from any purchases at no additional cost to you. Thank you for supporting my channel!

Info And Setup 0:00
Install Gatsby CLI 8:10
Folder Structure 13:56
Create Pages 22:06
Link Component 30:13
Navbar 36:34
Layout Component 40:53
CSS Intro 51:03
Inline CSS 52:16
Global CSS 53:12
Naming Issue 56:56
CSS Modules 59:39
Styled Components 1:07:20
Graphql Intro 1:17:03
Graphql Data Layer 1:20:42
Graphql Interface 1:22:23
SiteMetadata 1:28:38
First Query 1:32:59
Explorer Example 1:39:04
Render Intro 1:40:41
Examples Setup 1:41:32
Code Exporter Example 1:42:56
UseStaticQuery 1:47:09
Alias 1:57:27
Query Names 2:00:14
Static Query 2:01:46
Page Query 2:07:28
Images Setup 2:13:40
Source-Filesystem-Plugin 2:16:00
All File Query 2:21:51
Query Arguments 2:28:39
File Field 2:37:48
SourceInstanceName 2:41:22
Install Gatsby-Image 2:45:41
Gatsby-Image Overview 2:48:13
Gatsby-Image Query 2:53:43
Images Example Setup 2:59:09
Images Example Complete 3:07:18
Gatsby-Image Showcase 3:18:08
MaxWidth Parameter 3:26:03
Data Intro 3:31:16
Local Data Vs External Data 3:33:30
Headless Cms Intro 3:35:18
Contentful Intro 3:37:22
Contentful Interface 3:38:32
Content Type 3:42:13
Content 3:46:49
Connect To Contentful 3:53:18
Products Query 3:59:13
Products Page 4:05:24
Products CSS 4:17:05
Nested Pages 4:23:18
Product Template 4:28:23
Product Slug Query 4:30:40
Gatsby-Node 4:32:38
Slug Info 4:47:51
Single Product Query 4:50:13
Query Variables 4:52:16
Product Template 4:55:28
Product Template CSS 5:02:49
Docs 5:04:11
ENV Variables 5:05:40
Gatsby Build 5:12:13
Drag And Drop 5:15:04
Continuous Deployment 5:18:12
Webhooks 5:25:54

[noelpastrana]

greatest free course of gatsby in the history of mankind

[hammadumar]

Best Tutorial Of Gatsby in the history of mankind. Sir John Smilga you are such a great Instructor. Your courses includes real world projects.

[deejayche]

Best tutor on youtube 100%. Best content for beginners keep them coming

[ramnareshram]

It is definitely the best Gatsby free course on YouTube, Thank You

[blackdev]

By far the best Gatsby tutorial I have found. Sums up a lot, goes in depth and makes understanding and remembering what you've learned a lot easier than other tutorials. Epic breakdown.

[siemen_subbaiah]

Saw this comment couple of times and could not stop my self by commenting the same :

"Greatest free course of gatsby in the history of mankind 🔥"

[amvgroup]

Hi John i've never had the chance to thank you, i really appreciate your work and your tips thank you so much. you're a blessing.

[jessebenjamin]

This is an incredible tutorial! I started knowing HTML, CSS, JS, and some React fundamentals and ended up being able to publish a lightning fast JAMStack site, and I'm so stoked! I followed closely until sourcing data, where I used docs and a few other tutorials to substitute NetlifyCMS for Contentful. I managed to get it all working, and even integrated Netlify's forms.
Thank you for presenting such valuable information in a way that's easy follow and understand. I feel like I've bravely stepped into the world of JAMStack thanks to you 💃

[ahmetsakrak]

There are many valuable insights in this tutorial. The best gatsby guide I have ever seen. Thank you for your effort!

[nikita]

This is the most underrated gatsby tutorial on youtube. Your video is awesome!

[deepakness]

All the tutorials, I watched before this, were total trash.

This is the one I wanted. Awesome. 😍

[ms]

You are a hero. Best teacher by far. Thanks for such amazing content.

[compilezero]

So far, I am 30 minutes into the tutorial, and this is one of the best vidoes that explains the folder structure of GatsbyJS... Thanks John!:)

[allan-glasier]

Dude! Awesome course! I love that you thoroughly explained everything. I've watched a good number of tutorials and I can safely say this is one of the only ones where I actually still remember what I learned when finishing. Now I'm on to your Strapi project!

[farhanfarooq]

brilliant tutorial on gatsby / contentful / netlify, some of my unclear concepts regarding gatsby are now cleared. Thank you

[cindy]

the most comprehensive and up to date Gatsby tutorial for FREE! Couldn't thank you enough for this amazing tutorial! :)

[hamzahahmad]

The way you explained everything in such detail is on par with paid courses. Thank you for sharing this for free. You deserve more views

[starlite]

Hey John very happy to see a new video. Hope you and your family safe in these tough times. Thank you for the awesome courses.

[jaimearriola]

Too good to be true!!
I spend 4 beatiful days learning Gatsby with this amazing tutorial.
Thanks for sharing John, your explanations are really clear and for me it was really easy to follow this tutorial.
By the way, I suggest to add a side note related to Contentful because I was worried thinking "How could I restart the server afted I added new content?", ... but at the end you solved it with Webhooks ... XD.
Just in case anyone realizes that you need some setup to see your new content or your updated content, It would be great to add that side note.

[essazouga]

You are an amazing teacher. You explain things to the tee!