Description
Stone River Elearning – Up and Running with Gatsby
Gatsby is the most popular pre-rendering engine for React applications. Using Gatsby you can create applications whose performance vastly surpasses that of any typical React application, while benefitting from improved SEO. In this course Gatsby expert Sam Julien will get you comfortable using Gatsby in your production and personal projects. Whether it’s a blog, a sales site or anything else the will benefit from server-side rendering, this course will teach you what you need to know. In this course you will learn how to create basic layouts, how to style your applications, how to use pre-built themes, and how to work with Markdown and MDX. Finally you will learn how to take Gatsby to production. This course is aimed at those who have little to no experience with Gatsby. Before taking this course you should be familiar with JavaScript, HTML and CSS. Previous experience with React is purely optional.
Course Curriculum
- Welcome to your first steps in learning Gatsby! (2:30)
- Gatsby Core Concepts (12:39)
- Course Philosophy (4:57)
- Course Repository Walkthrough (4:14)
- Let’s take our first steps with the Gatsby CLI. (1:03)
- Clone Hello World er (2:00)
- Basic Project Structure (2:32)
- The `gatsby develop` Command (2:01)
- Adding Pages (1:35)
- Assignment: Create Hotel Site (1:05)
- Solution: Create Hotel Site (4:46)
- Gatsby Link (2:25)
- Assignment: Link Between Pages (0:25)
- Solution: Link Between Pages (2:57)
- Gatsby Basics Recap (1:34)
- It’s time to learn about layouts in Gatsby! (1:48)
- Create Layout Component (3:24)
- Assignment: Add Layout to About Page (0:30)
- Create Header Component (2:51)
- Passing Props into the Layout Component (2:55)
- Assignment: Create a Nav Component (0:47)
- Solution: Create a Nav Component (2:39)
- Layouts Recap (1:24)
- Learn all about styling in Gatsby (1:16)
- Inline Styles Using JSX (2:43)
- Global Styles (3:25)
- Global Styles in gatsby-browser (3:09)
- Assignment: Change Fonts (1:05)
- Solution: Change Fonts (4:17)
- CSS Modules (5:30)
- Assignment: CSS Modules (1:06)
- Solution: CSS Modules (2:39)
- Intro to CSS-in-JS (2:42)
- Installing Styled Components (3:35)
- Using Styled Components (5:09)
- Assignment: Styled Components (1:59)
- Solution: Styled Components (5:13)
- Styling Recap (3:14)
- Let’s look at how data works in Gatsby (4:39)
- Add Site Metadata (2:05)
- GraphiQL Explorer (4:55)
- Using Site Data in a Static Query (5:36)
- Page Queries (4:56)
- Assignment: Static and Page Queries (3:12)
- Solution: Page Query (2:46)
- Solution: Static Query (4:36)
- Data Recap (3:42)
- What is markdown? What is MDX? How do we use it in Gatsby? Sam Julien Gatsby (5:56)
- Adding MDX (4:12)
- Adding a Custom Layout (2:14)
- Extracting a Default Layout (5:25)
- Assignment: Create Events Page (1:40)
- Solution: Events Page (4:53)
- Add Files as Sources (5:34)
- Looking at Files in GraphiQL (4:46)
- Creating Page Slugs (7:22)
- Creating Pages (6:10)
- Event Page Layout (4:02)
- Event Page Query (3:29)
- Finishing the Event Layout (2:52)
- Assignment: Format Date and Add Frontmatter (2:48)
- Solution: Date and Frontmatter (3:51)
- Events Index Query (3:44)
- Events Index Code (3:27)
- Markdown & MDX Recap (6:10)
- It’s time to spice up our project with images! (2:16)
- Importing Images (2:40)
- Using the Static Folder (3:13)
- Gatsby Image and Sharp (4:20)
- Adding Image Plugins to gatsby-config (2:39)
- Building an Image Query (4:03)
- Using an Image in the Index Page (3:39)
- Assignment: Add Image to About Page (1:16)
- Solution: Add Image to About Page (2:49)
- Modifying the Events Query (2:40)
- Add Images to Markdown Frontmatter (6:56)
- Extract Image Component (3:28)
- Setting Up Inline Images (5:46)
- Assignment: Add Images to Two More Event Pages (1:31)
- Solution: Add Images to Event Pages (3:15)
- Images Recap (7:14)
- It’s finally time: let’s get our site live on the internet! (1:59)
- Fixing the Build: Part 1 (3:32)
- Fixing the Build: Part 2 (4:20)
- Installing React Helmet (3:23)
- Using React Helmet (3:32)
- Assignment: SEO Component (1:32)
- Solution: SEO Component (3:57)
- Deploy to Netlify (5:24)
- Deploy to Now.sh (3:27)
- Production Recap (4:37)
- Thank You and Where to Go From Here (6:53)
Sale Page: https://stoneriverelearning.com/p/up-and-running-with-gatsby
Archive: https://archive.ph/wip/DaGYq
Reviews
There are no reviews yet.