gatsby-tutorials (20 Part Series)
Welcome to part-3 of the series.
As told in the earlier post, this series is based on the learning from this awesome udemy course by John Smilga
Let’s start where we left in the project. We will create a footer first. Inside the css folder add foooter.module.css file. You can get the content for the same from my github link.
Next, we will update our Footer.js component to use this CSS. Here we are just mapping through our links and social-icons from the constant files, and displaying them. We also have a copyright section.
It will show our Footer in the desktop view as below.
The Footer is also very responsive in the mobile view.
Next, we will create the SimpleHero component, which will show an image covering the whole page on the Home page. Create a new file SimpleHero.js inside components directory.
One of the main thing to check in the SimpleHero component, is the defaultHero class. It comes from the layout.css file. Here, we are using min-height to display it in whole page minus the header. We are also using a linear-gradient here. Then we are using display: flex, which will be useful soon to display the center text.
We will then update our index.js page to show this component.
It will show our huge image on the home page.
Next, we will create a banner which will contain a large heading, then paragraph and a large button to take us to places page.
So, go ahead and create banner.module.css inside css folder and the below content in it.
Next, we will create Banner.js inside components folder and it will contain below content. We can pass the props title, info and also children to it.
Next, we will add the Banner component in our index.js and pass it the required props —title and info. Also, we are passing a Link as a children.
It will show our Banner text inside our Hero image.
Next, we will update our Error component. So, go ahead and create error.module.css inside css folder and the below content in it.
Next, update the 404.js page with the below content. As, you might have noticed that we are reusing Banner component.
Now, when we goto any non-existent page the below will be displayed.
This completes part-3 of the series. You can find the code for the same in this link.
See you soon in part-4.