Video

Introduction to Gatsby, v2

πŸ•ΉοΈ Levels: 🌱 Beginner, 😎 Intermediate
⏳ Duration: 4 hours
πŸ€‘ Price: Subscription
πŸ§‘β€πŸ’» Learning Platform: Frontend Masters
πŸ§‘β€πŸŽ“ Certificate: No

πŸ”‘ Key Learning Outcomes

  • Build Gatsby Applications: Learn to build high-performance websites using React and Gatsby from scratch, creating a full blog application.
  • Use GraphQL in Gatsby: Understand how to use GraphQL within Gatsby to store, retrieve, and query data efficiently for your site.
  • Optimize Images: Discover how to optimize images in Gatsby, including automatic image optimization with gatsby-image and handling images in Markdown (MDX).
  • MDX for Content Management: Learn to manage content with MDX (Markdown with JSX), enabling you to mix Markdown and React components for dynamic pages.
  • Deploy with Netlify: Deploy your Gatsby site seamlessly to Netlify and manage the deployment process for production-ready sites.

πŸ‘¨β€πŸ« About the Course

This course provides a comprehensive introduction to building fast, dynamic web applications using Gatsby. You will learn how to create pages, manage content with MDX, optimize images, and query data using GraphQL. Additionally, the course covers deploying your site to Netlify, ensuring it’s ready for the world to see. Whether you're new to Gatsby or looking to deepen your understanding, this course covers everything you need to start building modern web applications.

🎯 Target Audience

  • Beginners to Gatsby looking to build static websites or applications.
  • React developers interested in expanding their skills with Gatsby.
  • Developers looking to leverage GraphQL for efficient data management in web projects.

βœ… Requirements

  • Basic knowledge of React and JavaScript.
  • Familiarity with HTML and CSS is recommended.

πŸ“– Course Content

  • Getting Started with Gatsby: Learn the basics of setting up a Gatsby project, creating pages, and linking between them.
  • GraphQL & Metadata: Understand how to use GraphQL in Gatsby to query site metadata and display it on your pages.
  • SEO & Layout: Add SEO-friendly metadata to your site using React Helmet, and create shared layouts and global styles.
  • Content Management with MDX: Manage content using MDX, allowing you to mix Markdown and React components.
  • Image Optimization: Optimize images for faster load times and better performance with Gatsby's image handling tools.
  • Third-Party Data Integration: Learn to fetch and display data from a headless CMS or other third-party sources.
  • Deploying to Netlify: Deploy your site to Netlify with ease, ensuring it's live and accessible to users.

Drop a comment

Introduction to Gatsby, v2 by Jason Lengstorf

Log in to leave a feedback

Login