Gatsby Tutorial and Projects Course
21h 48m 56s
English
Paid
November 1, 2023
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 provide excellent developer experience. Gatsby is far more than typical static site generator though. You can think of it more like a modern front-end framework.
More
It uses powerful pre-configuration to build a website that uses only static files for incredibly fast page loads, service workers, code splitting, server side rendering, smart image loading, asset optimization, and data prefetching.
The course will consist of two parts. In the first part, the tutorial part we will cover Gatsby basics, and in the second part, projects part, we will build interesting projects using Gatsby.
All project intro videos are available for preview.
Requirements:
- Basic Knowledge of React
What you'll learn:
- Create Blazingly Fast Websites/Projects with Gatsby
Who this course is for:
- Everyone Interested in Building Blazingly Fast Static Websites With Gatsby
Watch Online Gatsby Tutorial and Projects Course
Join premium to watch
Go to premium
| # | Title | Duration |
|---|---|---|
| 1 | Gatsby Intro | 01:36 |
| 2 | Course Info | 00:31 |
| 3 | Course Requirements | 00:54 |
| 4 | Video Blur Fix | 01:51 |
| 5 | Course Review | 00:43 |
| 6 | Visual Studio Code | 01:42 |
| 7 | Intro | 01:28 |
| 8 | Install gatsby-cli | 02:01 |
| 9 | Setup New Project | 05:39 |
| 10 | Project Structure | 14:36 |
| 11 | First Page | 08:45 |
| 12 | Error Page | 02:36 |
| 13 | Nested Pages | 03:41 |
| 14 | Links | 06:41 |
| 15 | Navbar | 05:06 |
| 16 | Layout Component | 09:19 |
| 17 | CSS Info | 01:11 |
| 18 | Inline CSS | 01:41 |
| 19 | Global CSS | 05:35 |
| 20 | CSS Naming Issues | 03:50 |
| 21 | CSS Modules | 10:15 |
| 22 | Styled-Components | 12:48 |
| 23 | House Cleaning | 07:43 |
| 24 | Styles | 04:33 |
| 25 | Footer | 03:27 |
| 26 | Error Page | 01:08 |
| 27 | Contact Page | 06:08 |
| 28 | Assets and Icons | 07:12 |
| 29 | Navbar Setup | 08:56 |
| 30 | Navbar Functionality | 04:41 |
| 31 | Gatsby Image Info | 03:40 |
| 32 | Sandbox Setup | 06:07 |
| 33 | Install Plugin | 03:40 |
| 34 | Static Image Setup | 07:27 |
| 35 | Shared Props and Options | 04:40 |
| 36 | Options Example | 07:51 |
| 37 | All Layouts | 06:20 |
| 38 | Height | 04:36 |
| 39 | About Page | 09:53 |
| 40 | Hero Page | 06:18 |
| 41 | Gatsby and GraphQL Intro | 03:21 |
| 42 | Gatsby DataLayer in a Nutshell | 01:42 |
| 43 | GraphiQL Interface | 06:16 |
| 44 | siteMetadata | 05:40 |
| 45 | First Query | 09:14 |
| 46 | Explorer | 02:06 |
| 47 | Static Query vs Page Query | 01:27 |
| 48 | useStaticQuery Hook - Code Exporter | 06:17 |
| 49 | useStaticQuery, graphql - From Scratch | 10:32 |
| 50 | Field Alias | 03:02 |
| 51 | Query Keyword, Name and Gatsby Clean | 03:14 |
| 52 | Page Query | 07:02 |
| 53 | Install SOURCE-FILESYSTEM Plugin | 10:14 |
| 54 | allFile - Field | 06:18 |
| 55 | Query Arguments | 08:14 |
| 56 | Static Path Fix | 01:24 |
| 57 | file - Field | 03:23 |
| 58 | sourceInstanceName - Argument | 02:09 |
| 59 | Gallery Setup | 03:52 |
| 60 | gatsbyImageData - Field | 08:10 |
| 61 | Render Gallery | 11:46 |
| 62 | getImage - Helper Function | 04:34 |
| 63 | Local vs External Data | 01:28 |
| 64 | Headless CMS | 02:00 |
| 65 | Contentful Info | 00:49 |
| 66 | Setup Contentful Account | 03:38 |
| 67 | Content-Type | 06:54 |
| 68 | Content | 07:30 |
| 69 | Connect Gatsby - Contentful | 05:01 |
| 70 | ENV Variables | 06:13 |
| 71 | allContentfulRecipe - Field | 07:10 |
| 72 | AllRecipes Component | 09:04 |
| 73 | RecipesList Component | 12:00 |
| 74 | Featured Recipes | 10:52 |
| 75 | Utils Setup | 04:58 |
| 76 | Helper Function | 07:41 |
| 77 | TagsList | 03:48 |
| 78 | Tags Page | 06:09 |
| 79 | Recipe Template Page Setup | 04:36 |
| 80 | Recipe Template Page Walkthrough | 09:04 |
| 81 | Slugify | 04:08 |
| 82 | Query Variables | 08:51 |
| 83 | Recipe Template Query | 07:23 |
| 84 | Recipe Template Return | 12:19 |
| 85 | GATSBY-NODE.JS Setup | 03:59 |
| 86 | Create Tag Template Pages Programmatically | 17:54 |
| 87 | Tag Template Return | 11:32 |
| 88 | Possible Bug Fix | 06:47 |
| 89 | Fonts | 05:48 |
| 90 | Contact Form | 04:37 |
| 91 | FAVICON | 02:08 |
| 92 | SEO - Setup | 06:18 |
| 93 | SEO - Props | 05:55 |
| 94 | SEO - Complete | 09:32 |
| 95 | Netlify Info | 00:54 |
| 96 | Netlify - Drag and Drop | 03:35 |
| 97 | Netlify - Continuous Deployment | 09:13 |
| 98 | Webhooks | 04:30 |
| 99 | Intro | 00:58 |
| 100 | Install Starter | 01:57 |
| 101 | Project Overview | 07:49 |
| 102 | GATSBY-BROWSER | 08:51 |
| 103 | Navbar | 08:32 |
| 104 | Hero | 15:24 |
| 105 | Services | 06:13 |
| 106 | Setup Strapi | 06:06 |
| 107 | Content-Type | 05:40 |
| 108 | Content | 05:01 |
| 109 | Connect Strapi - Gatsby | 04:40 |
| 110 | Jobs Query | 03:16 |
| 111 | Single Job | 08:11 |
| 112 | Jobs Logic | 05:18 |
| 113 | Sort Jobs | 02:30 |
| 114 | Project Content-Type | 04:55 |
| 115 | Project Content | 03:37 |
| 116 | Project Query | 03:47 |
| 117 | Projects Component | 07:42 |
| 118 | Single Project Component | 07:05 |
| 119 | Projects Page | 02:20 |
| 120 | Setup Project Pages Programmatically | 05:00 |
| 121 | Project Template | 06:11 |
| 122 | About Page - Setup | 04:54 |
| 123 | About Page - Complete | 06:14 |
| 124 | Error Page and Footer | 04:36 |
| 125 | Contact Page | 03:15 |
| 126 | Sidebar Setup | 07:54 |
| 127 | Sidebar Logic | 05:28 |
| 128 | Initial Deploy | 02:48 |
| 129 | siteMetadata | 05:57 |
| 130 | SEO Component | 15:34 |
| 131 | Complete Project | 08:28 |
| 132 | Intro | 00:30 |
| 133 | Install | 01:48 |
| 134 | Project Overview | 02:44 |
| 135 | Plugins and main.css | 02:59 |
| 136 | Navbar | 07:17 |
| 137 | Sidebar | 03:44 |
| 138 | Sidebar Toggle | 03:34 |
| 139 | Hero | 03:36 |
| 140 | Footer | 02:09 |
| 141 | Error Page | 02:21 |
| 142 | Newsletter Info | 04:52 |
| 143 | Collect Form Values in Netlify | 09:28 |
| 144 | MDX Setup | 04:50 |
| 145 | Basic Markdown | 05:27 |
| 146 | Basic Styling | 05:38 |
| 147 | First React Component | 04:02 |
| 148 | Nice Text | 04:35 |
| 149 | Complete Components Info | 05:53 |
| 150 | Counter and Like Button | 04:36 |
| 151 | Posts Intro | 05:50 |
| 152 | Single Post Setup | 05:01 |
| 153 | Frontmatter | 06:22 |
| 154 | Home Query | 08:30 |
| 155 | Posts Component | 05:11 |
| 156 | Single Post Component | 05:47 |
| 157 | Posts Page | 02:12 |
| 158 | Create Post Pages Programmatically | 09:01 |
| 159 | Single Post Query | 04:33 |
| 160 | Post Template Complete | 05:16 |
| 161 | Categories Setup | 13:05 |
| 162 | Categories Query | 04:06 |
| 163 | Categories JSX | 02:29 |
| 164 | Banner About | 04:44 |
| 165 | Banner Recent | 06:55 |
| 166 | Banner Categories | 08:02 |
| 167 | Navbar Categories | 03:03 |
| 168 | Inline Images with Remark Images Plugin | 14:01 |
| 169 | Inline Images with GatsbyImage | 09:51 |
| 170 | Regular Video | 10:48 |
| 171 | External Video | 07:43 |
| 172 | MDX Wrapper Intro | 06:27 |
| 173 | Root MDX | 09:14 |
| 174 | First MDX Example | 06:30 |
| 175 | MDX - props / children | 05:39 |
| 176 | MDX - Component Example | 05:55 |
| 177 | MDX - H2 | 06:10 |
| 178 | MDX - H4 | 02:37 |
| 179 | Inline Code | 05:43 |
| 180 | MDX - Blockquote | 09:54 |
| 181 | Prism Setup | 09:21 |
| 182 | Prism Config | 10:16 |
| 183 | My Example | 04:10 |
| 184 | Intro | 00:38 |
| 185 | Bootstrap Starter | 01:52 |
| 186 | Starter Info | 01:48 |
| 187 | Global Styles with Styled-Components | 06:55 |
| 188 | Root Wrapper | 03:39 |
| 189 | Hero | 05:34 |
| 190 | Navbar | 04:54 |
| 191 | About and Title Components | 06:16 |
| 192 | Airtable Info | 04:40 |
| 193 | Airtable Setup | 02:17 |
| 194 | First Table | 12:07 |
| 195 | API Docs and Keys | 03:11 |
| 196 | Connect Airtable and Gatsby | 09:04 |
| 197 | Latest Project Query | 04:07 |
| 198 | Projects Component | 09:29 |
| 199 | Customers Table | 04:58 |
| 200 | Customers Query | 06:19 |
| 201 | Customers Slider Info | 01:02 |
| 202 | Survey Setup | 09:46 |
| 203 | Survey Fetch Items | 08:27 |
| 204 | Survey - Display Items | 05:43 |
| 205 | Survey - Update Items | 07:57 |
| 206 | Alternative Loading Setup | 03:01 |
| 207 | All Projects Query | 03:25 |
| 208 | Search Buttons - Setup | 04:11 |
| 209 | Search Buttons - Complete | 09:40 |
| 210 | Algolia - Intro | 03:21 |
| 211 | Algolia - Account Setup | 06:16 |
| 212 | Algolia - Plugin Setup | 04:31 |
| 213 | Algolia - Query Setup | 11:17 |
| 214 | Algolia - Basic Front-End | 08:15 |
| 215 | Algolia - SearchBox Component | 03:07 |
| 216 | Algolia - New Hits | 07:04 |
| 217 | Context API | 11:29 |
| 218 | Nested Links Info (sublinks) | 10:25 |
| 219 | Sidebar | 11:38 |
| 220 | Payments Page | 03:58 |
| 221 | Toggle Sidebar | 04:36 |
| 222 | Navbar - Sublinks | 12:20 |
| 223 | Tile Layout | 07:55 |
Similar courses to Gatsby Tutorial and Projects Course
Master Gatsby (Master Package)
Duration 11 hours 57 minutes 6 seconds
Course