Check it out at Gatsby.pizza
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
For a full list of all topics covered, see below at the video list!
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.
Who is this for?
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.
These Kinds of People
- 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 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!
With These Skills
You should be comfortable with writing JavaScript - take my Beginner JavaScript course if you want to get a solid foundation first.
Some basic React skills β writing JSX and components - are good, but you'll be able to pick it up as we go.
Some of the more advanced React stuff - custom hooks, state management, context - is taught as part of this course so you'll learn with us!
All the code for the course is open source and posted on Github.
Meet Wes Bos
Wes Bos is a Full Stack Developer, Speaker and Teacher from Canada. He is a course creator, works as an independent web developer and is the co-host of Syntax - a popular web development podcast. Wes has taught over 500 students in 200+ classes and spoken at dozens of conferences around the world. Wes wrote his own bio in the third person for some reason.
Wes is the author of React For Beginners, Advanced React and GraphQL, ES6 for Everyone and Learn Node which together have sold over 55,000 copies. He is also the author of JavaScript30.com, CSSGrid.io, Flexbox.io and Command Line Power User, a set of free video series. 300,000 people have taken at least one of Wes' free video courses.
Follow @wesbos(dripping intensifies)
The Course Is…
Well-paced β not too fast, not too slow.
Do a few hours a day, have it done in a week.
Debugging, some goof-ups and jokes all left in.
Videos && Modules
Closed Captioning and Transcripts are provided for every video
01Welcome00:59
02Tooling and Starter File Setup13:17
03What is Gatsby? Why is it so awesome?09:03
04Pages in Gatsby11:18
05Routing and Navigation in Gatsby10:57
06Creating Layouts in Gatsby17:34
07Global Styles14:31
08Typography03:16
09Styling the Nav and Logo17:14
10Styling our Layout12:04
11Setting up our Headless CMS15:34
12Creating the Toppings Content Type and custom previews11:05
13Creating Data Relationships16:02
14Creating our Person Data Type04:17
15Custom CMS Inputs in Sanity17:37
16An intro to gatsby-config and sourcing data08:32
17Sourcing Sanity Data and GraphQL Introduction19:32
18Learning Gatsby Queries24:07
19Gatsby Images13:02
20Loading in Sample Data04:57
21Styling our Pizza Grid with CSS subgrid08:05
22Static Queries and Building the Toppings Filter26:06
23Dynamically creating pages with gatsby-node22:42
24Templating and Styling our Single Pizza Page04:44
25Dynamically Creating Toppings Pages22:37
26Sourcing Data from an external API14:32
27Querying, Displaying and Styling the Beers Page11:59
28Querying and Displaying Pagination13:07
29Paginating Data in Gatsby16:21
30Filtering the data based on Pagination03:53
31Creating a reusable Pagination Component20:24
32Single Slicemaster Pages08:33
33Gatsby SEO and Head Tags26:20
34Creating the Order page with Custom Hooks28:37
35Styling our Order Form09:58
36Custom Hook for our Order Form18:56
37Calculating our Order Total06:15
38Moving our Order State to React Context with a custom Provider13:53
39An Intro to Serverless Functions16:25
40Modifying our Custom Hook to send the order data20:44
41Coding our Serverless Function12:45
42Setting Error, Loading and Success States08:39
43Creating a Honey Pot to defend against bots06:56
44Creating a one-off Store Settings Page14:27
45Custom Hook for Client Side Data Fetching24:46
46Creating a Skeleton Screen while Loading Items18:21
47Displaying the Home Page Data20:33
48Building and Deploying our Headless Sanity CMS03:27
49Building our Gatsby Site03:28
50Deploying to Netlify17:18
51Hosting the Gatsby Website on your own server04:13
52Making the Website Responsive22:33
53Deploying to Vercel10:15
- Access to the first 6 Modules / 22 HD Video Tutorials
- Stream course from any device
- Source Code β Completed Examples and Exercises
- Unlimited Updates + Never Expires
Exclusive access to the Master Gatsby Slack Chat Room where you can ask for help and chat with other learners
- Access to all 13 Modules / 52 HD Videos β see above for a full listing of topics
- Stream and Download DRM-free files from any device
- Includes Dynamic pages, Serverless Functions, Custom Hooks, SEO and much more
- Unlimited Updates + Never Expires
Module 1
Getting Setup
Module 2
Gatsby Basics
Module 3
CSS in Gatsby
Module 4
Headless CMS
Module 5
Getting Data into Gatsby with GraphQL
Module 6
Puttin' in work
Module 7
Making Gatsby Dynamic
Module 8
Pages & Filtering
Module 9
Custom Pages + SEO
Module 10
Order Form, Custom Hooks and state management
Module 11
Serverless Functions
Module 12
Client Side Data
Module 13
Building, Deployment and Responsive Design
Course Packages
Starter Course
Master Package
Team License Packages
With a team license you can buy a number of spots to allocate to employees. The spots do not expire and you can fill the spots via the dashboard whenever you like.
Perfect for on-boarding new hires, interns and contractors to your tech stack.
The team license includes everything in the Master Package above. Spots cannot be re-assigned once used.
For larger groups or for on-site training contact me for more info!
All prices in USD
FAQ
I bet you have so many questions!
What's the difference between React and Gatsby?
Technically, React is a library and Gatsby is a framework. What's the difference?
With React you take data, put it in components and React knows how and when to render and update that to the page. It's really good at doing just that, but leaves the rest of the tech stack up to you.
Then Gatsby comes along and adds lots of features that React doesn't have β routing URLS, preloading pages, compressing + lazy loading images, sourcing all your data from the CMS + so much more.
Do these videos expire? Is this a monthly cost?
Nope and nope. Pay once, have them forever. Updates are also free.
Why didn't you use with instead?! WAY BETTER! YOU DONT KNOW ANYTHING
18,240 different combos! I think Gatsby and its huge plugin ecosystem is one of the best choices for building a fast modern site. If you'd like to learn Next.js instead, that is available over at my Advanced React course.
As for Sanity - I tried many different headless CMS options and I landed on Sanity because it's the perfect mix of ease-of-use paired with the ability to customize almost anything you want.
There are certainly other great options for a headless CMS - WordPress, Keystone, Strapi, and Prismic are a few I like myself. This course shows you how to source data into Gatsby. So switching to another headless CMS is usually as easy as swapping out the source plugin! I encourage you to try a few different ones out yourself!
What is a headless CMS? Sanity?! Sounds Spooky!
We cover this in depth in the course, but a CMS is the place where you (or a client!) login to add/update/delete data that will be on your website. It's called "Headless" because the actual creation or "theming" of your website isn't part of the CMS like a traditional CMS would be.
The CMS simply spits out data, and then we use another framework to slurp up that data and display it.
What about tools? Webpack? Babel? Parcel?
Thankfully all the build tooling is built into Gatsby. It does it all for us. Because of that the build + deploy videos are surprisingly short!
Do you provide a certificate of completion?
Sure do! In your course dashboard you can download an official certificate of completion that can be used to be reimbursed by your employer or land that dream job you are applying for.
Can I put the code on GitHub? Can I put this app in my portfolio? Can I blog about this?
Absolutely - I just ask that you don't create your own course teaching with this app. Otherwise, go nuts! You can credit my course if you like, but it's not required as you might be using this website to get a job :)
What other courses do you have?
I've got a bunch of free and premium web development courses β check out the whole listing over at wesbos.com/courses.
I lost, deleted or never got my welcome email! What do I do?
Log into your account, or create an account with the same email you used to buy the series.
What format are the videos? How do I watch them?
Once you buy a package, you will be mailed access to your account dashboard where you can stream all the videos. Buyers of the Master Package will also be able to download them for off-line viewing. All the videos were professionally recorded at 4k with top quality audio β no pops, echoes, chair squeaks, breathing or gross mouth sounds here! The downloaded versions are in 1080p HD.
What if I'm not thrilled?
I want to make sure you get real value out of this so I only want your money if you are happy with the product! If you aren't satisfied, please send an email to hey@wesbos.com with a copy of your welcome email and I will refund you.
Do you offer a student discount?
Absolutely! Fill out this form with some proof that you are a student and I'll send you a discount code. This applies to anyone in any type of schooling, including evening classes and coding bootcamps!
If you have received a student discount for a previous product, it's the same code π.
What theme do you use? What is that font? What terminal do you use? What type of oil goes in your car?
I've detailed my entire setup over here, feel free to tweet me with any more questions you have about setting things up.
I have a really good joke about "The Great Gatsby" to tell you
I've never seen it! Sorry!
I have another question!
Sure - email me at hey@wesbos.com or give me a call 416-833-3641!
