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.
Master Gatsby (Master Package)
11h 57m 6s
English
Paid
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!
About the Author: Wes Bos
Wes Bos is a Canadian full-stack developer, podcaster, and one of the most widely followed teachers in the JavaScript ecosystem. He runs his eponymous online course catalog at wesbos.com and co-hosts Syntax, the long-running web-development podcast. His teaching style — short, dense, project-based screencasts paired with downloadable starter files — set the template that most modern coding-course creators now follow.
The catalog mirrored under this source covers the surface area Wes is best known for: ES6 for Everyone (the canonical introduction to modern JavaScript syntax for a generation of front-end engineers), Master Gatsby, Learn Node (Node.js with MongoDB), and Full Stack Advanced React + GraphQL. The material is paid and aimed at developers who already know the basics and want a focused, working-engineer's tour through a specific stack rather than a beginner walkthrough.
Watch Online 52 lessons
0:00
/ #1: Welcome
All Course Lessons (52)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Welcome Demo | 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 |
Unlock unlimited learning
Get instant access to all 51 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 3y agoGatsby Tutorial and Projects Course
By: UdemyGatsby is a React-based, GraphQL powered static site generator. It combines together the best parts of React, webpack, react-router, GraphQL.21h 48m
Frequently asked questions
What are the prerequisites for enrolling in this course?
To enroll in this course, you should have a basic understanding of JavaScript and React.js, as Gatsby is a framework based on React. Familiarity with web development concepts such as CSS, HTML, and version control systems like Git would be beneficial. No prior experience with Gatsby is required, as the course starts with an introduction to the framework and progresses to more advanced topics.
What projects will I build during the course?
During the course, you will build several projects, including a full-featured modern website using Gatsby. Key projects involve creating dynamic pages with Gatsby, setting up a headless CMS, implementing a serverless function for order processing, and deploying the site to platforms like Netlify. Each project focuses on integrating Gatsby's features such as routing, data sourcing from CMS, and optimizing website performance.
Who is the target audience for this course?
This course is designed for web developers and designers who are interested in building modern, fast, and efficient websites using Gatsby. It is suitable for those who have a working knowledge of React.js and want to leverage Gatsby's capabilities to handle complex web development tasks more easily. Both beginners to Gatsby and those familiar with other static site generators will find value in the course.
How does the depth of this course compare to other Gatsby courses?
This course offers a comprehensive look at Gatsby, covering both foundational concepts and advanced techniques. With 52 lessons, it dives deep into topics such as creating dynamic pages, setting up a headless CMS, and deploying to Netlify. Unlike shorter courses, this one provides hands-on experience with serverless functions, pagination, and client-side data fetching, making it suitable for learners seeking an in-depth understanding of Gatsby.
What specific tools and platforms will be used in this course?
The course extensively uses Gatsby, React.js, and a headless CMS called Sanity. It also involves using GraphQL for data querying and Netlify for deploying the Gatsby site. Students will learn to set up and configure these tools, as well as use custom hooks, serverless functions, and CSS for styling. This combination of tools ensures a robust learning experience in modern web development.
Are there any topics not covered in this course?
While the course covers a wide range of Gatsby-related topics, it does not delve into non-Gatsby specific backend technologies like traditional databases or server management. The focus is on static site generation, client-side data handling, and serverless functions rather than full-stack development. Advanced React.js concepts outside the scope of Gatsby are also not covered in detail.
How can the skills learned in this course benefit my career?
The skills acquired in this course are highly applicable to careers in web development and design. Understanding Gatsby allows you to build high-performance, scalable websites efficiently. Knowledge of integrating with headless CMS systems and deploying to platforms like Netlify is valuable for any modern web development role. These skills can enhance your ability to deliver complex projects and improve your proficiency in React.js and static site generation.