React Website Using Gatsby JS Tutorial – Responsive Project with Gatsby Image

Learn how to build a React website using Gatsby JS in this beginner tutorial. The project is responsive and uses Gatsby Image. We will utilize Graphql to query data to display the images.

Feel free to refactor the code and let me know any ways to improve it!

If you want to follow me along my coding journey, be sure to subscribe 🙂
https://www.youtube.com/channel/UCsKsymTY_4BYR-wytLjex7A?sub_confirmation=1

Timeline:
0:00 What we are building
1:57 Creating new Gatsby Project
4:14 Starting Gatsby Site
5:38 Editing pages
8:18 Creating Navbar Components
17:27 Installing styled-components
44:16 Editing Layout CSS
46:40 Creating Hero Section
54:33 Getting Images
55:40 Creating Button
1:01:18 Creating Gatsby Image with Graphql
1:18:24 Adding Images to home page
1:20:34 Adding Image CSS
1:26:20 Creating Footer Component
1:41:19 Editing Image Page
1:42:15 Editing Destinations Page

Starter Images
https://github.com/briancodex/gatsby-website-v1

React Website Using Styled-Components

Top 10 VS Code Themes


source