Master Gatsby (Master Package)
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.
More
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 Master Gatsby (Master Package)
| # | Title | Duration |
|---|---|---|
| 1 | Welcome | 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 |
Similar courses to Master Gatsby (Master Package)
