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
• Author
• Acknowledgments

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

Links

• Solution URL: https://github.com/Ofcl-Javed/Space-tourism
• Live Site URL: https://ofcl-javed.github.io/Space-tourism/

My process

Built with

• React Js Components
• React Hooks (Reducer, Context)
• CSS gridBox
• Desktop-first workflow
• Responsive
• React - JS library

What I learned

I learned how to use transitions using JS Conditions and hide and show contents using React mapping over Json file

Continued development

I'll continue to learn React more with Redux and Styled Components.

Author

• Website - Javed
• Frontend Mentor - Ofcl-Javed
• Github - Ofcl-Javed

Acknowledgments

Use CSS classes to display content with transition and don't just use display: none to hide and display: block to show, your transition property won't work then.