JavaScript

Part 4 takes you through setting up some styling using CSS to create a pleasing simple layout. This includes adding some navigation to the header which links to empty pages ready to have content created.

Tools used
– NodeJS
– GatsbyJS

Part 1: Overview and install
Part 2: Site and file structure
Part 3: Site Layout and Basic Component Creation

Part 3 starts with cleaning up some of the files and folder structures created from the starting template. Then we move on to editing the header component followed by creating a new footer component that will be used across the site.

Along the way, we create some basic CSS with horrible colors so we can clearly see what is going on with the areas defined in the components, I often use this technique to test placement and get a visual feel for the page structure during early development before moving on to the proper (nice) design.

Tools used
– NodeJS
– GatsbyJS

Part 1: Overview and install
Part 2: Site and file structure
Part 4: Basic Site Styling and Navigation Setup

In part 2, we take a look at the site/folder structure of a GatsbyJS site. I’ll explain what the folders are for along with an overview of the files in a starting Gatsby site. By the end of this video, you will have an understanding of how a site is created and how components play a part in generating pages.

Tools used
– NodeJS
– GatsbyJS

Part 1: Overview and install
Part 3: Site layout and basic component creation
Part 4: Basic Site Styling and Navigation Setup