React Website with Image Slideshow

A beginner website made better with Slideshows and Navigation Bars

We’ll build this webpage in 3 main parts:

1. Top — the greeting for our customer

2. Middle — a place for information about our business’ mission

3. Bottom — a footer for information about our business

We’ll create a Home.js component for our main page.

The Top

All we’re going to do here is set an image for our background and title for our company.

The image gallery comes later; it’s a separate element that we float around our page depending on the dimensions.

<div className=”section1">
  <img src=”./images/background-section1.jpg” alt=”” 
    className=”background_image_section1" />
  <div className=”title”>Sinclaire<br />Market</div>
</div>

This is our result:

The Middle

For this section we’ll have an image for our background; a message to our user; an image; and a call to action.

<div className=”section2" style={{ backgroundImage: 
   “url(‘images/marble.jpg’)” }}>
  <img src=”./images/background-section2.png” alt=”” 
     className=”background_image_section2" />
  <div className=”left_side”>
    Organic.<br/>Ethical.<br/>Fresh.
  </div>
  <div className=”right_side”>
    <img src=”./images/spice-bowl.png” alt=””/>
  </div>
  <div className=”call_to_action”>
    Browse our selection.
  </div>
</div>

This is our result:

The Bottom

A simple unordered list of items that can act as links.

<div className=”section3">
  <div className=”contacts” >
    <section className=”contact_section” >
      <ul>
        <li>Affiliates</li>
        <li>Careers</li>
        <li>Privacy</li>
      </ul>
    </section>
    <section className=”contact_section” >
      <ul>
        <li>Telephone <i className=”fas fa-phone-square-alt”></i> </li>
        <li>Email <i className=”fas fa-envelope-square”></i> </li>
      </ul>
    </section>
    <section className=”contact_section” >
      <ul>
        <li>Instagram <i className=”fab fa-instagram-square”></i> </li>
        <li>Twitter <i className=”fab fa-twitter-square”></i> </li>
        <li>Facebook <i className=”fab fa-facebook-square”></i> </li>
      </ul>
    </section>
  </div>
</div>

This is our result:

Let’s get our image gallery up and running.

We created this component in a separate tutorial.

You can find it here.

We’re simply going to import and modify it to fit our project.

All we really need to do is create a parent element for it in our project, we’ll call it the gallery, and position it on our page.

<div className=”gallery”>
  <Deck gallery={gallery} />
</div>

We’ll change some code in our ‘Deck.js’ component (the image gallery) and fit it into our parent element.

Let’s finish by implementing a navigation bar.

We created this component in a separate tutorial.

We’re simply going to import and modify it to fit our project.

All we really need to do is change the color scheme and icon being used.

This is our result:

There is much more nuance to this project. You can view our video tutorial down below. You can get the source files here. All images we’re gathered from Pexels. All contact image icons we’re gathered from Font Awesome.

If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Be sure to follow us on Instagram and Twitter to keep up with our latest Web Development tutorials.