English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 12 Hours | 2.75 GB
Learn to build & style websites with Gatsby, React.js and friends.
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!
I’ve recorded it in such a way that the CSS videos are skippable, if you rather not learn some CSS along the way.
This course is for anyone who wants to learn how to build modern websites. Whether you want to whip up a brand new personal website, or try out some new tech with your team, you’ll learn a ton in this course.
Existing React developers – apply your existing skill set and pick up Gatsby quickly
WordPress / Drupal Devs – Bring your existing backend and use Gatsby for the front end.
Students – Build your personal portfolio website with Gatsby
Agency Devs – Agencies love Gatsby because it’s quick to build, easy to share code between projects and doesn’t require babysitting once it’s built because it’s compiles to HTML, CSS and JS.
Marketers – SEO friendly, easy to host, great for microsites.
Designers – Know a bit of CSS and JS? Bring your designs to life with Gatsby.
New Developers – Gatsby and React.js are some currently some of the best skills to have on your resume
Humans – I’ve run out of categories, what I’m trying to say here is that you should take the course!
Table of Contents
1 Welcome
2 Tooling and Starter File Setup
3 What is Gatsby Why is it so awesome
4 Pages in Gatsby
5 Routing and Navigation in Gatsby
6 Creating Layouts in Gatsby
7 Global Styles
8 Typography
9 Styling the Nav and Logo
10 Styling our Layout
11 Setting up our Headless CMS
12 Creating the Toppings Content Type and custom previews
13 Creating Data Relationships
14 Creating our Person Data Type
15 Custom CMS Inputs in Sanity
16 An intro to gatsby-config and sourcing data
17 Sourcing Sanity Data and GraphQL Introduction
18 Learning Gatsby Queries
19 Gatsby Images
20 Loading in Sample Data
21 Styling our Pizza Grid with CSS subgrid
22 Static Queries and Building the Toppings Filter
23 Dynamically creating pages with gatsby-node
24 Templating and Styling our Single Pizza Page
25 Dynamically Creating Toppings Pages
26 Sourcing Data from an external API
27 Querying, Displaying and Styling the Beers Page
28 Querying and Displaying Pagination
29 Paginating Data in Gatsby
30 Filtering the data based on Pagination
31 Creating a reusable Pagination Component
32 Single Slicemaster Pages
33 Gatsby SEO and Head Tags
34 Creating the Order page with Custom Hooks
35 Styling our Order Form
36 Custom Hook for our Order Form
37 Calclulating our Order Total
38 Moving our Order State to React Context with a custom Provider
39 An Intro to Serverless Functions
40 Modifying our Custom Hook to send the order data
41 Coding our Serverless Function
42 Setting Error, Loading and Success States
43 Creating a Honey Pot to defend against bots
44 Creating an one-off Store Settings Page
45 Custom Hook for Client Side Data Fetching
46 Creating a Skeleton Screen while Loading Items
47 Displaying the Home Page Data
48 Building and Deploying our Headless Sanity CMS
49 Building our Gatsby Site
50 Deploying to Netlify
51 Hosting the Gatsby Website on your own server
52 Making the Website Responsive
Resolve the captcha to access the links!