Frontend Mentor - Space tourism website solution

This is a solution to the Space tourism website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview

• The challenge

• Screenshot

• Links

• My process

• Built with

• What I learned

• Continued development

• Useful resources

• Author

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• View the optimal layout for each of the website's pages depending on their device's screen size

• See hover states for all interactive elements on the page

• View each page and be able to toggle between the tabs to see new information

Screenshot

Home page

Destination page

Crew page

Technology page

Links

• Solution URL: github.com/mohammadrezaii/space-tourism

• Live Site URL: mmd-space-tourism.netlify.app

My process

Built with

• React - JS library

• React Router - JS library

• Semantic HTML5 markup

• CSS module custom properties

• Flexbox

• CSS Grid

• Mobile-first workflow

What I learned

I learned how to change the background image based on the route we are on

1. First we need to get the route address where we are

const  path  =  useLocation().pathname;
const  location  =  path.split("/")[1];

2. Then we give the element the name of the root as a class

<div  className={`backgroundWrapper ${location}`}>
</div>

3. Finally, we use the root name as a class in css and apply our desired style

.backgroundWrapper.destination {
	background-image: url("*image url*");
}

Continued development

I want to use scss in future projects to make development faster and easier and I plan to do projects that are much more complex

Useful resources

• React-tabs - This library helped me a lot to create tabs