Gatsby JS is one of the single greatest ways to build a static site. It leverages the power of React under the hood. At first glance, Gatsby can seem overwhelming. There's JSX but there's also HTML and CSS and Components and nodes, oh my. That's where this course comes in.

This course is designed for someone who knows a little bit about HTML/CSS, but that's about it. This course will walk you through, step-by-step, on how-to:

Step 1: Install

• Install the needed components for Gatsby to run

  • iTerm 2

  • Homebrew (for the Mac)

  • Xcode (for the Mac)

  • Git

  • Gatsby CLI

  • Node JS

• Download the hello-world template

Step 2: Modify & Build

• Download and modify the Gatsby Starter Default template

• Modify the Gatsby Starter Default template

• Setup a custom CSS to modify your design with

• Setup a responsive navigation in Gatsby JSusing React Bootstrap

• Add an image in as a logo

• Use the <Container> <Row> and <Col> in React Bootstrap

• Add responsive/fluid images into your pages

• Adjust the Footer using Bootstrap

Step 3: Deploy to either Google Firebase or Netlify

• The costs of both services (free at the beginning)

• The Setup of Google Firebase

• The deployment of the website to Firebase

• The drag and drop method of deploying to Netlify

• The Gatsby-to-Git-to-Netlify method of deploying your site

Every step of the way is explained. From adjusting the Gatsby-Config file to setting up Git to understanding how to use and read the terminal.

Recommended software:

• iTerm

• Visual Studio Code (VS Code)