đ Key Learning Outcomes
- Understand how to build fast, modern websites using Gatsby and React.js, automating complex tasks like routing, caching, and image optimization.
- Learn how to source data from REST APIs, headless CMS, and GraphQL to create dynamic, content-driven websites.
- Develop skills in writing scoped CSS, using advanced techniques like CSS Grid, Flexbox, and CSS Variables to style responsive and accessible websites.
- Implement serverless functions and custom hooks to manage dynamic order forms, data fetching, and state management in Gatsby apps.
- Gain practical experience with building, deploying, and hosting Gatsby websites using services like Netlify and Vercel.
đ¨âđĢ About the Course
This course provides a comprehensive guide to building and styling modern websites with Gatsby, React.js, and various backend services. It covers the entire process of creating a fully functional web app, from setting up pages and layouts to managing dynamic content with GraphQL and APIs. Additionally, the course dives deep into advanced CSS techniques and serverless functions to enhance interactivity.
đ¯ Target Audience
- React Developers: Apply your skills to learn Gatsby quickly and extend your knowledge.
- Backend Developers (WordPress, Drupal, etc.): Use Gatsby to build modern front ends for your projects.
- Students: Build portfolio sites with Gatsby and impress potential employers.
- Agency Developers: Learn to build scalable, SEO-friendly sites with minimal maintenance.
- Marketers and Designers: Create fast, responsive, SEO-optimized microsites with ease.
- New Developers: Strengthen your resume with React.js and Gatsby, two of the most in-demand skills today.
â Requirements
- Familiarity with JavaScript (consider completing the "Beginner JavaScript" course first).
- Basic React knowledge (understanding JSX and components).
- Interest in learning advanced React techniques like hooks and state management (covered in this course).
đ Course Content
- Gatsby Basics: Explore the fundamentals of Gatsby, including how it handles pages, routing, and layouts.
- CSS in Gatsby: Learn advanced CSS techniques like scoped CSS, CSS Variables, and responsive design using Grid and Flexbox.
- Headless CMS and GraphQL: Set up a headless CMS and use GraphQL to source and query content for your website.
- Dynamic Pages and Filters: Build dynamically generated pages with data filtering and pagination.
- SEO and Meta Tags: Optimize your site for search engines with proper metadata and SEO practices.
- Order Forms and State Management: Implement custom hooks and manage cross-page state for dynamic forms.
- Serverless Functions: Learn how to integrate serverless functions to handle form submissions and other backend tasks.
- Deployment: Deploy your Gatsby site to platforms like Netlify and Vercel, ensuring fast performance and scalability.
Drop a comment
Master Gatsby by Wes Bos
Log in to leave a feedback
Loginđ Psst! Interested in More Gatsby Courses?
Intermediate Gatsby, v2Video
by Jason Lengstorf
đšī¸ Levels: đ Intermediate
âŗ Duration: 4 hours
đ¤ Price: Subscription
đ§âđģ Learning Platform: Frontend Masters
Introduction to Gatsby, v2Video
by Jason Lengstorf
đšī¸ Levels: đą Beginner, đ Intermediate
âŗ Duration: 4 hours
đ¤ Price: Subscription
đ§âđģ Learning Platform: Frontend Masters
Auth0 Tips and TricksVideo
by Tyler Clark
đšī¸ Levels: đ Intermediate
âŗ Duration: 1 hours
đ¤ Price: Subscription
đ§âđģ Learning Platform: Egghead.io