GatsbyJS Part 3: Site Layout and Basic Component Creation


  • Share on Pinterest

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