Beginner Gatsby JS Full course 2020 - Over 5 hours! - Gatsby for beginners and intermediate
This course was recorded in 2020. It still has a lot of valuable learnings. Learn how to create a personal blog with light and dark modes. Gatsby JS is based on React JS and GraphQL and I'll show how to build the project from scratch.
Starter files: https://github.com/weibenfalk/beginne...
0:00 - Intro
01:09 - What is Gatsby?
06:21 - Introduction to the project
08:29 - Starter files
12:00 - Setup - Gatsby CLI
16:34 - Setup - Folder Structure
22:22 - Setup - Dependencies
27:51 - Setup - Copy from Starter files
30:51 - Setup - Plugins and config
38:26 - Setup - Absolute imports45:37 - Tech - OPTIONAL - Markdown
49:36 - Tech - OPTIONAL - Markdown files in project
54:02 - Tech - OPTIONAL - GraphQL
56:55 - Tech - OPTIONAL - GraphQL Query types in Gatsby
1:00:21 - Tech - OPTIONAL - GrqphiQL Editor
1:03:10 - Tech - OPTIONAL - Styled Components
1:06:37 - Tech - OPTIONAL - Styled Components - Some alternatives
1:08:43 - Global Styles - Colors and themes
1:16:20 - Global Styles - CSS
1:27:37 - Layout - Explained
1:30:24 - Layout - Cleanup project
1:36:33 - Layout - Index
1:41:16 - Layout - useMetaDataQuery hook
1:48:59 - Header - useSiteConfigQuery hook
1:56:11 - Header - Index
2:00:50 - Header - Styling
2:05:51 - Header - Menu - Index
2:12:14 - Header - Menu - Styles
2:18:41 - Header - Hamburger - Index
2:23:01 - Header - Hamburger - Styles
2:32:12 - Header - Mobile menu - Index
2:36:03 - Header - Mobile menu - CSS
2:47:25 - Home Page - Index
2:54:59 - Home Page - Page query
3:04:00 - Home Page - Image query
3:10:44 - Home Page - Hero - Index
3:14:37 - Home Page - Hero - useHeroQuery hook
3:22:42 - Home Page - BGImage - Index3:26:17 - Home Page - BGImage - CSS
3:33:40 - Home Page - Hero - CSS3:41:56 - Home Page - BlogPostCard - Index
3:47:42 - Home Page - BlogPostCard - CSS
3:54:43 - Home Page - Finished for now
4:03:12 - Light and Dark mode - ModeProvider and Context
4:09:56 - Light and Dark mode - Gatsby Browser API
4:11:57 - Light and Dark mode - Mode button
4:17:25 - Light and Dark mode - Implementing Mode button
4:23:49 - Pages and Posts - slugs
4:31:22 - Pages and Posts - GraphQL query4:38:25 - Pages and Posts - templates
4:49:34 - Pages and Posts - Dynamically create pages
4:58:28 - Archive and Pagination - Node
5:05:21 - Archive and Pagination - Index template
5:11:46 - Archive and Pagination - Page Navigation - Index
5:19:10 - Archive and Pagination - Page Navigation - CSS
5:25:32 - Deploy - Netlify
5:28:59 - Deploy - Gatsby Cloud
Support me by subscribing to this channel ❤️
Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩🚀
Check out my premium courses at https://www.weibenfalk.com
—
Find me somewhere below:
Website: https://www.weibenfalk.com
Udemy: https://www.udemy.com/user/thomas-928/
Linkedin: / thomas-weibenfalk-76356611
Twitter: / weibenfalk
Github: https://github.com/weibenfalk
FreeCodeCamp: https://www.freecodecamp.org/news/aut...
Dev.to: https://dev.to/weibenfalk