Embark on a comprehensive tutorial to build a responsive React website using Gatsby JS and Gatsby Image. Learn to create a new Gatsby project, develop essential components like a Navbar and Footer, and implement styled-components for efficient styling. Master the art of integrating images using GraphQL queries and enhance your skills in editing various pages, including the home, image, and destinations pages. Gain hands-on experience in crafting a Hero section, designing custom buttons, and optimizing layout CSS for a polished final product. This beginner-friendly guide offers step-by-step instructions to create a fully functional, visually appealing Gatsby-powered website.
Overview
Syllabus
What we are building
Creating new Gatsby Project
Starting Gatsby Site
Editing pages
Creating Navbar Components
Installing styled-components
Editing Layout CSS
Creating Hero Section
Getting Images
Creating Button
Creating Gatsby Image with Graphql
Adding Images to home page
Adding Image CSS
Creating Footer Component
Editing Image Page
Editing Destinations Page
Taught by
Brian Design
