Autoplay
Autocomplete
Speed
Previous Lecture
Complete and Continue
Gatsby JS | Beginner Gatsby - Learn to create a beautiful personal blog [2020]
Before you begin
Important information
Starter Files
Introduction
Welcome (1:00)
What is Gatsby? (5:11)
The project (2:08)
Starter Files (3:30)
Setup
Gatsby CLI (4:33)
Folder Structure (5:48)
Dependencies (5:28)
Copy from Starter Files (2:59)
Plugins and Config (7:34)
Absolute Imports (7:11)
Tech - OPTIONAL
Markdown (3:59)
Markdown files in project (4:26)
GraphQL (2:52)
GraphQL Query types in Gatsby (3:25)
GraphiQL Editor (2:49)
Styled Components (3:27)
Styled Components - Some Alternatives (2:05)
Global Styles
Colors and themes (7:36)
CSS (11:16)
Layout
Layout Explained (2:47)
Index (4:43)
Cleanup Project (6:09)
useMetaDataQuery Hook (7:43)
Header
useSiteConfigQuery Hook (7:12)
Index (4:38)
Styling (5:01)
Header - Menu - Index (6:22)
Header - Menu - Styles (6:26)
Header - Hamburger - Index (4:20)
Header - Hamburger - Styles (9:10)
Header - Mobile Menu - Index (3:51)
Header - Mobile Menu - Styles (11:21)
Home Page
Index (7:34)
Page Query (9:00)
Image Query (6:17)
Hero - Index (3:52)
Hero - useHeroQuery Hook (8:05)
BGImage - Index (3:34)
BGImage - Styles (7:22)
Hero - Styles (8:16)
BlogPostCard - Index (5:46)
BlogPostCard - Styles (7:01)
Home Page - Finished for now (8:28)
Light And Dark Mode
ModeProvider and Context (6:44)
Gatsby Browser API (2:00)
Mode Button - Index and Styles (5:27)
Implementing Mode Button (6:24)
Pages and Posts
Slugs (7:32)
Page and Posts GraphQL Query (7:02)
Page and Post Templates (11:09)
Dynamically create Pages and Posts (8:53)
Archive and Pagination
Archive and Pagination in Node (6:53)
Index Page Template (6:25)
Page Navigation - Index (7:23)
Page Navigation - Styles (6:21)
Deploy
Netlify (3:27)
Gatsby Cloud (3:16)
What is Gatsby?
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock