: Wes Bos
: 52 Videos
Learn to build & style websites with Gatsby, React.js and friends.
• Headless CMS
• Progressive Images
• Scoped CSS
• Serverless Functions
Build Awesome Websites
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™.
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
• Dynamic Order Form
• Client side Fetching
• Cross Page State Management
• SEO + Meta Tags
• Emailing of Order
• 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.
- Build your personal portfolio website with Gatsby
- 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.
- SEO friendly, easy to host, great for microsites.
- Know a bit of CSS and JS? Bring your designs to life with Gatsby.
- Gatsby and React.js are currently some of the best skills to have on your resume
- I've run out of categories, what I'm trying to say here is that you should take the course!
With These Skills[b]
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: https://github.com/wesbos/master-gatsby
[b]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.